/
Design process

7 Design Systems Examples for Your Inspiration

0

mins to read

When you had a team of five people, you more likely didn’t think about a design system. You could communicate style direction to everybody on your team, making sure you were all on the same page. But when your business scaled, it became next to impossible to instruct every new member how to adhere to a company’s design principles and coding standards to keep a high level of product consistency. 

If this is the case, then the UI design system is what you should consider, develop, and gradually establish. Here at Eleken our skilled designers are ready to apply their in-depth expertise and help you with creating your unique design system.

Why do companies create design systems?

In a nutshell, they want to make their life easier. The design system became an omniscient source of truth and the primary reference for everyone who works on the product. As a result of the designers, programmers, engineers, and product managers' joint work appear a holistic system made up of many reusable components - guides, patterns, and elements.

When designers need to create a new web page, all visual design components are ready to be used. Programmers can reuse a code snippet just by copy and pasting. Overall, the design system helps the product team be more efficient and reach a higher product consistency level. 

Creating the design system requires a lot of work, being a long iterative process. However, it also brings multiple benefits, which recoup all the efforts. 

Eventually, you will get and make the most out of:

  • Faster design process
  • Better cross-department collaboration
  • Higher product quality
  • Clear brand guidelines

The design system being a reusable components collection is not equal to a style guide or a pattern library.

Design system, pattern library and style guide- what’s the difference?

First and foremost, the design system is a brand’s philosophy embodiment. The system has structure and concept behind it and the elements subordinated to the main idea. However, most of the design systems can look like really just the patterns libraries with hundreds of components, which, without holistic vision, can be assembled in limitless ways yet not making a unified user experience.

With a clear guide on properly using the design system elements, all the UI components will adhere to a company’s standards.  

To give you a bit of inspiration for creating your design system, we assembled the best design systems examples you can learn from.

1. Atlassian design language

atlassian design system page image


Atlassian is a famous Australian enterprise software company known for its product - an issue & project tracking application Jira. The company’s focus is on agile tools development to help agile teams track their progress from product planning to delivery.

Atlassian’s mission is to “unleash the potential in every team.”

The Atlassian design system consists of several sections:

  • Brand - covers the company’s mission, personality, promise, and values
  • Foundations - the visual elements for creating an engaging end-to-end user experience. This section includes iconography, typography, layout, structure, accessibility elements, logos, and illustrations
  • Content - the content guidance covers voice and tone, vocabulary, grammar, and style
  • Components - the reusable design system blocks. Each of them meets the specific UI need and work together to create assembled patterns
  • Patterns - the reusable combinations of components to help users achieve their goals and ensure user experience consistency
  • Resources - the tools, kits, and plugins collection that includes color palettes, fonts, illustration and logo library, and templates

Overall, the Atlassian design system is very detailed, with clear reasoning behind each element’s choice.

2. Uber design system

uber design system image


Uber is an American technology company providing ride-hailing, food delivery (Uber Eats), package delivery, freight transportation services, and a micro-mobility system with electric bikes and scooters.

Uber’s mission and philosophy are “about moving people to where they want to be. In their day, in their lives, in the moment.”

Here is what Uber says about its design platform

We need tools that help designers stay in sync, common design libraries that provide them with our growing body of learnings and the means to recognize and apply our patterns to a diversity of user experiences. By grounding design at its basic level, we built a flexible system that empowers designers with the freedom to explore while keeping consistency and quality at the core.

Uber style guide where all design system elements are assembled includes:

  • Logo
  • Brand Architecture
  • Color
  • Composition
  • Iconography
  • Illustration
  • Motion
  • Photography
  • Tone of voice
  • Typography

Besides design elements, in its style guide, Uber showcases the examples of branding in different points of contact with potential customers starting from printed materials to digital billboards and posters. 

3. Polaris design system by Shopify

polaris design system image


Shopify is a cloud-based SaaS shopping cart solution that allows businesses to set up an online store. The company offers its proprietary platform for online stores and retail POS systems. Polaris design system aims to help both Shopify and the Shopify merchants to establish a better user experience.

Shopify builds “products, tools, and services for people to start, manage, and scale their businesses.” 

The company’s values underlie the user experience Shopify builds:

  1. Considerate - we show care for the people who use our tools and products
  2. Empowering - we want people to feel like they can accomplish whatever they’re trying to do.
  3. Crafted - Shopify experiences should feel like they were created with the highest level of craftsmanship
  4. Efficient - Shopify experiences should help people achieve their goals quickly, accurately, and with less effort
  5. Trustworthy - we constantly work to recharge our users’ trust batteries.
  6. Familiar - we want people to feel comfortable using our products, whether it’s their first time using them or their hundredth

Polaris design system serves as an extensive guide for designing your online shop based on Shopify’s platform. It provides inspiration and various visual elements and UI components to create a better user experience for ecommerce projects.

Design system elements:

  • Colors
  • Accessibility
  • Resources
  • Typography
  • Illustrations
  • Sounds
  • Icons
  • Interaction states
  • Spacing
  • Data visualizations

4. Helpscout design system

helpscout design system image

Help Scout is a pure-play SaaS help desk solution that helps small businesses manage their customer relationships. The solution allows users to create multiple mailboxes for each shared email address, enabling them to work across departments or manage several products from a single account.

Help Scout aims to follow its brand values being:

  • Helpful
  • Trustworthy
  • Human & Organic
  • Energetic
  • Curious

Design system elements:

Helpscout design system is one of the most compact yet nicely designed systems. 

It consists of 3 sections:

  • Visual Elements
  • Content Style
  • Product Design

These sections contain everything you need to design your help desk, ticketing system, knowledgebase, or the support forum.

5. Canvas design system by Hubspot

canvas hubspot design system image


HubSpot is a cloud-based CRM and inbound sales & marketing software that provides tools to help companies with blogging, SEO, social media, email, landing pages, marketing automation, and web analytics.

Here is what Hubspot says about Canvas, their design system: “This library is a window into how we build our products here at HubSpot and what it’s like to build the HubSpot product. We’re sharing it because we’re proud of the time and effort we’ve put into creating our design system and optimizing it for developers and designers so that we can keep it evergreen.”

The system elements:

  • Components
  • Graphs
  • Patterns
  • Styles
  • Editor

Canvas design system is a comprehensive library of the building blocks that Hubspot uses to build its products. It’s a set of various elements and styles, starting from “colors and typography to React-based components and data visualization tools.”

6. Mailchimp design system

mailchimp design system image


Mailchimp, an email and marketing automation platform, developed their design system long before other brands started establishing design libraries. 

“One main goal of this new brand identity is to provide a consistent structure to our design language. We have a lot of creative people with unique voices under one roof, which can be inspiring — and messy. To keep the system from feeling disjointed, we have introduced a framework of core components, so that the elements existing inside of it can be as free and expressive as we want.”
mailchimp design library image


Mailchimp’s design system is simple yet robust and easy to use, including only two sections - Foundations and Components.

7. Zendesk design system

zendesk design system image


Zendesk, is a SaaS help desk solution offering support, sales, and customer engagement software and serving as an API platform and marketplace for various apps.

Zendesk claims their design system Garden is “The source of truth for tools, standards, and best practices when building products at Zendesk.”

They also consider Garden as “an evolving library of shared knowledge that intentionally blurs the line between design, content strategy, and engineering to reinforce a cohesive user experience throughout Zendesk’s product suite.”

Design system elements:

  • Content - voice and tone, grammar, punctuation, and word list
  • Design - colors and icons
  • Components - theming, buttons, dropdowns, forms, loaders, notifications, typography

And now, when you saw the most popular design systems examples, you may have already started considering how to establish yours.

Here are the key steps to building a design system:

How to create the design system 

  1. Think over your design language.

Your visual design language consists of four main categories you should consider:

  • color - one to three colors that represent your brand
  • typography - usually, one font is used for headings and one for a body copy
  • sizing and spacing - it looks best when you have visual rhythm and balance
  • imagery - set guidelines for illustrations and icons
  1. Create a pattern library. 

You should collect all the UI elements you currently have in production, merge them, and remove what doesn’t match your brand design concept.

  1. Document where to use each component.

Documentation and standards differ a well-established design system from a pattern library or a style guide.

You may also find it interesting to learn about the product design process and how to build a successful product.

Natalia Borysko

Author

Table of contents

Top Stories

Design process
/
0
min read

The Power of Storytelling: Improve UX Design by Telling a Story

What is the difference between these shot glasses? 

Difference

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.

Beyond books
Image credit: growth.design

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.

A coincidence or not? Image credit: Dan Nessler

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.

Storytelling example

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:

The page

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.

Story

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:

Storytelling

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.

Storytelling

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.

Storytelling

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.

animated text: Nothing great is made/built/brainstormed/designed alone

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).

Refera page

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.

Refera pages

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.

Pages

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.

Design process
/
0
min read

What Does a UX Researcher Do?

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.

Design thinking process
Source

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

UX researcher roles diagram

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.

UX researcher skills diagram
Image credit: https://bootcamp.berkeley.edu/

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.

SEO Crawl screenshot

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.

Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.
Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.