What exactly is a design system? How do I write a user story?

Photo by Daria Shevtsova

UX design terms

User stories:

User stories are one way that designers communicate with engineers. Writing user stories allows your engineering team to understand what your solutions intend to look like from the user side. An example of this could look like:

User journey:

User journeys are diagrams or infographics that designers create to help communicate the paths that a user can take. User journeys can be very extensive, including every possible route within an entire website, or they can be simple and only focus on one task at hand. The intricacy of your user journey design depends on what you’re trying to communicate, and to whom.

Example of a simple user journey

Empty state:

Empty states are sections of your digital product that do not have any content in them yet. For example, imagine that you’re a new user on Instagram and you have not uploaded any photos. Your profile would show an empty state where your future photo grid would live. Having empty states helps communicate to users that these sections are to be filled in later on. Empty states are usually temporary until users take action to fill them.

Edge case:

Edge cases are the outlier situations within your product. They are possible pathways that a user or a design could take, but are more rare than your typical route. Designing for edge cases allows for preventative flexibility. What I mean by this is that when you design for edge cases, your designs incorporate all possible scenarios into them, making system breaks less likely to happen.

Example of a long translation text string
Example of a long translation text string
Example of a long translation text string
Example of long name length
Example of long name length
Example of long name length

MVP:

MVP stands for Minimum Viable Product. One way to frame an MVP is this: what is the simplest product that you can create that will elucidate the most amount of insight? Creating products at the MVP stage allows you to keep scope and cost low, while still observing how users interact with your product or service. Some insights you can gain by creating an MVP could be user interest in your service, usability testing, or feature validation. One important thing to note is that for many teams, MVPs are step 1 in product or feature creation. Most MVPs are created with the intention of future iterations. Generally speaking, teams will use the insights from their MVPs to add, subtract, or adjust their product accordingly.

Desk check:

Desk checks are quick chats between team members. These typically occur when an engineer wants to show a designer where they’re at with the development of a product. Suppose an engineer is coding up a welcome modal dialog design that a designer has sent over, and they’re at a point where they believe they’re nearly done. That engineer will reach out to the designer and have them look over their work. This moment of communication allows designers to QA their designs and make sure that they’ve translated over into code correctly.

User testing:

When we user test a product, we are looking to see how users react to that product’s interface and functions. We do this by having users perform specific tasks, under realistic conditions, to gain insight into their reactions. Do they understand where a particular button will lead? Can they tell that a specific icon is tappable? We use user testing to validate or adjust our UI/UX decisions.

Iteration:

Iterations refer to the cyclical nature of progressing a product. When we iterate, we go through a process of prototyping, testing, collecting data, analyzing results, and refining our designs. In iterative design, the product is never truly finished because it is constantly being iterated on. This allows products to stay current and ensures that you’re continuing to pay attention to your user needs.

Hierarchy:

Hierarchy often refers to typography, but can also be used to refer to information in general. When we talk about hierarchy, we are often referring to what a user sees first, second, third, and so on. An easy way to describe this is by comparing it to a newspaper. There’s the large, bold headline that draws your attention. Then, there’s a picture that connect to the story. And then, there’s the smaller body copy that dives into the article. If all of these elements were the same size, weight, and prominency, we would have a really hard time knowing what to look at first. This would overload our brain and create a negative experience, something UX designers are constantly trying to avoid. By using hierarchy, you can cut down on cognitive overload and make information processing easier for your users.

Design system:

A design system refers to a set of design standards and repeatable components that can be used in combination as a foundation for your designs. Design systems allow us to design without needing to reinvent the wheel every time. We use a design system when we want to use components that already exist elsewhere in the app. Buttons, for instance, usually have a particular color and shape to them that are consistent across all pages in an app. That button styling is part of the design system. If all of your product’s primary buttons are purple rectangles with white text, you wouldn’t make a blue, circular, primary button with black text. That would mean breaking your design system, something you have to have a good reason for.

There you have it.

A non-exhaustive list of terms that will help you down the road to discovering your best design solutions. These are the basic, high-level definitions that will create unified understanding among you and your teammates. Often, it helps to refer to these terms when you are advocating for your designs. For example, I use the term ‘hierarchy’ a lot when working with clients to explain why I cannot make the logo bigger or bolder, if it does not need to be. Once I explain what this means, and why we must adhere to these UX rules, clients are able to understand the reasons behind my UX decisions. This helps align us on what our ultimate goals are, and how we can get there together.

Product designer @Spotify, formerly @Hinge