7 Design Systems Examples for Your Inspiration

What is the difference between these shot glasses? 

The price is the same for a used shot glass with print and a set of six glasses with 22K gold trim and a tray.

The difference lies in the story. Story is what made a used glass purchased for $1 at a flea market be sold for $76 on eBay. It was a part of an experiment on storytelling.

100 random items of different levels of inutility and trashiness were bought at flea markets for $129 in total. Then, each of them got a personal story from a writer. All the items with their background stories were placed on eBay and sold for a total of $3,612.51. So, if you are still not ready to pay $76 for a used shot glass, try reading its story first.

The set of six glasses with 22K gold trim and a tray has no story in the description. And we still don’t know if it was sold.

Storytelling has penetrated all parts of human culture and communication. Instagram stories, books, advertisements, corporate blogs… We are a SaaS design agency and are want to tell you a story about storytelling in UX (in our blog, yes).

Beyond books. Telling stories about boring things

If you started wandering through the stories of 100 objects, I bet most of you were just skimming through and didn’t take the time to read each story thoroughly. Why are we like that? Because we are in the 21st century and we spend a vast amount of time on the web. To capture the attention of our inner ADHD monkeys, visual storytelling can be more effective than text.

Guess what this story tells us about? Here’s some context: this is growth.design, a project that collects case studies about psychology in UX design. So, what does “The Handmaid’s Tale” in the background haves to do with psychology in UX design?? You definitely need to click through the case study to find out.

This is a great example of storytelling. And spoiler — the case study tells us about Zeigarnik Effect that states: “People hate the tension created by incomplete tasks”. And that is one of the factors that make storytelling so powerful and the reason why we can’t stop watching TV series and scroll all the way through growth.design case studies. We are hooked on a story and we want to know what’s next.

“What is next?” is a good question to build a storytelling process around (and that’s why we put a call-to-action at the end of the articles). 

In UX design, the Zeigarnik effect can work for onboarding. When there is a task that has to be finished, it motivates a user to go through all the steps and not abandon the onboarding process in the middle.

Examples of storytelling

There are many brilliant examples of storytelling among websites. For example, Slavery Footprint, a page that aims to educate people about modern slavery.

I spent about ten minutes entering lots of personal information to find out that there are 28 slaves working for me. Not many websites manage to hold millennial's attention that long.

The company says that after the launch, their website crashed soon because of too many visitors. So, what makes it so engaging?

The page opens with a hook:

From then, you can proceed with a test or read an explanation of how modern first-world countries are related to worldwide slavery.

The storytelling is all over the place here. Look at the navigation.

They make it very clear that the user is the character of the story. When you click on “your story”, a pop-up window appears. First, it gives some context, connecting the character and the topic. Next, it shows the challenge:

This topic is complex and difficult. Giving so much heavy information could bore users. Storytelling is what makes it digestible and gets readers to scroll till the end of the page – to find out how they can save the world together.

Now, let’s take a look at some elements that will help you understand how you can use storytelling in UX design. The list we provide is not exhaustive, as it’s all about creativity and out-of-the-box solutions. So think of it as just a start.

Things that make storytelling

The storytelling is used at different levels. It can form the overall principles of user experience or define the choice of menu icons. The most strategic storytelling starts at the very basis of product design and becomes a core of holistic user experience.

Customer journey map

This is the invisible side of storytelling in UX. We’ve had quite some articles on this blog about journey mapping, and if you take a look, you’ll clearly see what role storytelling has in customer journey maps.

When the relationship with the user is seen as a journey, it opens lots of opportunities to communicate that throughout the product design. 

Let’s get into more details and see how separate elements impact storytelling.

Dialogue

Dialogue might not always tell a story, but as long as it tells something, it will drive attention. And it makes dialogues a powerful storytelling tool.

The page from Slavery Footprint, which explains the presence of slave work in our daily life, is made in a form of a dialogue with a person who can’t believe that they are somehow related to slavery.

The text is asking and answering the questions that probably go through the mind of a person visiting the website. Presented in this way, it captures the attention of the reader firmly.

Motion

Moving elements have great potential for storytelling. They are perfect for focusing the user's attention and connecting two episodes of a story. 

Smart scrolling patterns, highlights, and micro interactions – all of these slight or not-so-slight movements impact the impression from the page.

Here is the header of the Figma landing page. It combines words and motion while showing the words as if they were edited in Figma in live.

Colors

Colors bring various associations. And they have an impact on unexpected levels. Studies found out that people tend to eat less food when it is served on red plates, and eat faster when the interior of a restaurant is red or orange (yes, that's what fast food restaurants have in common).

As for interface design, there are color "traditions" as well. Bright colors for CTA, blue for social and fintech. Using these associations along with the others, deeply rooted in human culture, makes color an essential element of visual storytelling techniques.

When making a redesign for Refera, a dentist referral app, we decided to switch from blue (very common in healthtech) to green (also common, but not too much).

Illustrations and photos

Over the last years, as illustrations are reclaiming the public space lost since the 1920s, we see it everywhere in digital products. 

Refera used to have illustrations on their landing page. When we started working on the redesign of their app, we decided to put a photo of a doctor instead of abstract illustrations. It helps to create a character, a key figure in storytelling.

We are well aware that a photo of a smiling doctor on the landing page doesn’t look very trendy. But we also do know that a dentist referral app doesn’t need to be trendy. It has to appeal to dentists, not to the Awwwards jury.

Typography

Here is a story from one of our case studies, Planner. Initially, the junior designer who was working on the project wanted to use Poppins font, one of those that were trending at the time.

Later, a senior designer checked the design and recommended changing the font to Gilroy. If you see them next to each other, you see little difference. Yet, typography can tell a story. What story does Poppins tell? “I look cool, you might have seen me on some fashionable websites at Awwwards of 2021, whose names you can’t recall”. What about Gilroy? It tells a story of a font that is in line with trends, yet not trendy enough to be recognizable.

Whenever a designer picks a boring or “cool” font, there is a story behind it. If you are curious why there are few fonts that are used over and over in interfaces, read our article on typography.

What comes next?

It’s hard to stop once you start talking about storytelling. Now, we’ll just make a turn here and go to what was supposed to be the beginning of this article.

What is storytelling? We hear this word all the time, and most people assume they understand it since they know what "story" and "tell" mean. Fair enough!

Those who learned a bit more about storytelling know that it consists of exposition, rising action, climax, and so on. It is quite simple when we talk about text, but what about UX design? There is little text and the main elements are visuals.

Visuals are less eloquent, but they can tell something, too. There are so many stories told through art without a single word. And in UX, there is room for storytelling, too.

Such thing as the structure of a love story and dramatic arc find their place in user experience design. The more diverse the knowledge base of a designer, the wider their creative horizons. If you are looking for other sources of not-so-obvious UX design wisdom, check out our article about psychology in UX Design.

In 2022, at least 750,000 openings for UX researchers were reported across the US. These days, spending money on user research is not something that only big companies do. It is the opposite: the vast majority of businesses, including tiny startups, just can’t afford to skip the UX research.

Knowing your users is a must. The cost of wrong assumptions would be much higher than the research cost. As a design agency, we always base our work on thorough research, and we are glad to see this trend as it aligns with our pragmatic approach to design. 

So, what does a UX researcher do? Poetically speaking, saves your product from a tough clash with reality. In the design thinking framework, their job has mostly to do with the first stage of the design: emphasizing.

To put it simply, UX researcher duties are getting to know your users. But does it mean that you necessarily need to hire a professional to do only that? Do UX researchers tell designers what to do or do they just bring in insights based on user feedback?  Let’s clear things up.

UX researcher roles and responsibilities

The main UX research respoinsibilities are to listen to the users, gather data from them, and translate it into valuable information for the design team. 

The UX research process consists of collecting, processing, and analyzing data, finding weak points in the product, suggesting ways to fix them, and testing solutions with the users to get real feedback. 

UX research tasks day to day include: 

• defining goals, 
• setting scope, 
• making a plan, 
• choosing the right research methods, 
• recruiting users, 
• communicating with them, 
• writing research scripts, 
• conducting the research itself (user interviews, usability testing, card sorting, data collection, and so on), 
• organizing and analyzing the results, 
• presenting reports. 

UX researchers work closely with UI/UX designers on suggesting changes and new solutions based on the findings of user research.

Now, here are some of the most common responsibilities taken from real user researcher job descriptions:

• Design and execute custom research to support the objective of the business.
• Collaborate with design team to define intent, development, testing, and refinement of prototypes.
• Build user journeys and personas.
• Design and execute a variety of research studies, including user testing, field studies, usability tests, concept tests, group discussions, and so on.
• Unify quantitative data with qualitative data to help drive product and design decisions
• Partner with design team, product managers, marketing and development teams to understand business needs, and design appropriate research studies to generate user-focused insights

UX researcher skills

The skillset of a UX researcher must be rather diverse, but there are not many complex technical skills. One of the most essential skills is the ability to see patterns in users’ behavior, which comes with experience, not just training. UX research roles imply one of those professions where “good soft skills” might play an even more important role than the hard skills.

‍

Hard skills

• Knowledge of user research techniques, such as usability testing, heuristic analysis, tree testing, eyetracking, and many more. See our list of essential UX research methods to fully grasp an idea.
• Knowledge of data processing software (small projects can work just fine with Google Workspace, while big ones require complex software)
• Usage of user research tools, such as Hotjar, Maze, Figma, and others. Check out this list of UX research tools recommended by our designers.
• Visual communication (at least basic knowledge is important for communicating with designers and understanding how the elements of user interface work)

Soft skills

• Communication skills. The success of UX research depends largely on the information obtained from direct communication with the users. The ability to express themselves clearly, pose correct questions, and endear people allows user researchers to get in good contact with the customers and get valuable insights.
• Empathy sounds like an obvious skill for a person whose job is to understand other people better, but not all HR managers working in the ICT field give enough attention to this trait. Empathy is what helps a researcher notice every insecure move of a user during usability tests and understand the reasons behind it.
• Critical thinking and problem solving helps to establish an unbiased approach to the research and the product.
• Analytical skills are crucial to process large amounts of data gathered throughout the research and distill the most relevant information.

When do you need a UX researcher… 

There are cases when you need a UX researcher on your team and cases when other people can fulfill this role quite fine. In general, it's a good idea to consider cooperating with a UX research specialist, when:

• You don't have a clear vision of your product and its future user base. Cooperating with a UX researcher early on can help you test your product idea and define its future direction.
• You're stuck on your business strategy. The insights UX research brings can help you understand your customers’ expectations or frustrations. This way, you'll better on what areas you should focus.
• If your product serves a diverse audience with complex user needs, a UX researcher can help uncover and prioritize these needs through in-depth user studies.
• If your product is only developing or at crossroads and other UI/UX specialists on your team are not experienced enough to conduct a proper user research, obviously you should consider hiring a UX researcher.

…and when you don't 

Budget constraints, simple or smaller products are some of the reasons to skip hiring a UX researcher. But even for more complex products, sometimes going for a skilled UI/UX designer might be a better choice.

Often people come to UX research after having worked in a related field, such as UI/UX design or product design. Narrowing down the role helps them to deepen their expertise and move to working on bigger products. If you need more information to grasp the difference between UX designer and researcher, read our article what UX designers do.

While in huge companies there may be many UX researchers, in small startups it is common to have one person perform the role of both UI/UX designer and UX researcher. That is how we work at Eleken. 

And then you have Eleken

Our designers have expertise in both fields and thus can have a wholesome look at the project. In our case, the narrowing comes with the focus on one type of product: we work exclusively with SaaS products.

Our designers successfully conduct user research when client's needs call for it. For example, before redesigning SEO Crawl, we dived into user feedback on the previous version of the product. We also studied the online feedback about competitor products and found out that the most significant challenge users faced was the lack of customization. 

‍

The results of user research allowed us to come up with the idea to build a customizable dashboard that can be adjusted to individual users’ requirements.

‍

To sum up 

You can’t skip UX research building a product. Each one is unique and the research strategy has to be tailored to the business objectives. A complex product at a crossroads with a big team might require hiring a UX researcher to conduct in-depth studies and lighten the load of other specialists. 

However, if you don't have the need for ongoing UX research and require it as a part of forming product strategy or before redesign, consider hiring a UI/UX design agency. Drop us a line and our skilled designers will both conduct research and implement its insights to breathe new life into your product.