How to Talk to Users. 5 Rules of UX Research Interview Questions

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

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

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

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, 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’s design system is simple yet robust and easy to use, including only two sections - Foundations and Components.

7. Zendesk design system

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
  

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

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

You have matches, a box of thumbtacks, and a candle. How can you fix the candle to the wall so that wax won't drip onto the table below?

The best solution is to pin the box to the wall, put the candle in the box, and light it.

Quite an unpredictable solution, right? It feels quite elusive when you’re trying to figure it out, but becomes obvious as soon as you know it. And believe it or not, most people fail to solve this puzzle and end up being astonished at how simple and obvious the answer was.

That’s our brain playing tricks on us. We fixate on the box’s function as a container, and it prevents us from considering it as a platform. If the box was empty from the very beginning, we would be more likely to find the correct answer. But when we need to think of an innovative way of using the box, we fail.

The candle puzzle was a demonstration of a single bias called “functional fixedness.” There are dozens of other flaws in reasoning that make it easy for us to think with common patterns but hard to think “outside the box.”

Integrated thinking patterns are a great evolutionary adaptation. They allow us to quickly apply the same actions and knowledge in similar situations so we do not have to learn everything from scratch every time. But they also prevent us from developing new ways to see, understand, and solve problems. From all those creative and innovative processes that are the holy grail of any startup.

Outsmarting biases is difficult, yet possible. People developed a range of problem-solving algorithms that can hack our biased brains. Like a scientific method. Or like a design thinking approach that is more suited for business needs.

What is design thinking (DT)?

The specific term "design thinking" was coined in the 1990s by David Kelley and Tim Brown of IDEO, but the design thinking strategy itself has been used in different variations since the early 1900s.

According to a commonly used design thinking definition, DT is a method for creative problem-solving. The main attribute of design thinking is a human-centric approach. It’s what separates DT from the scientific method, for instance. 

Startups usually base their decisions on what is viable for business or what is feasible for the technology they possess. But design thinking makes you start by analyzing how users interact with your product. Simply put, it makes you improve the product’s UI/UX taking into account desires that users have.

Let’s look at the benefits of design thinking in action with an example presented by Oral-B and IDEO — those guys who coined the term we are talking about and apply design thinking principles to everything they do.

How Oral-B designed the best-selling kid’s toothbrush

Oral-B wanted a new kid’s toothbrush, and they hired IDEO to design it. The IDEO team wanted to go out in a field and do some field research, but their client wasn’t happy about it. Like, it’s not rocket science. We are talking about kids brushing their teeth, you can hardly observe anything new about this process.

But IDEO found what to observe, actually. They discovered that kids don’t hold their toothbrushes in fingertips as adults do. Children don’t have their motor skills developed yet, so it’s more comfortable for them to hold their toothbrushes in a fist.

Before, every kid’s toothbrush in the history of the world was based on the implicit assumption that parents have big hands and kids have small hands, so the kid’s toothbrush should be a smaller and thinner version of the adult’s one. 

Pretty logical assumption, but IDEO’s research showed that kids don’t need little skinny toothbrushes. They need big fat toothbrushes. Oral-B started selling one such brush, and it has been the world’s best-seller for 18 months.

Doesn’t it feel the same way as in the case with the candle puzzle? The solution is pretty obvious, and today every kid’s toothbrush in the world is made comfortable for kids to hold it in a fist. But nobody noticed room for improvement until IDEO pointed at it.

What is the design thinking process?

To apply design thinking in practice, just like IDEO does, you need to follow the design thinking process that outlines a series of steps. It is not a strict step-by-step method but a focused effort that includes a variation of four stages: inspiration, compilation, ideation and implementation. 

Don Norman in his book “Design of everyday things” provides the process of four steps, Stanford’s d.school offers the five-step model, and Nielsen Norman Group suggests the process consists of six steps. Let’s go with the one offered by NNGroup.

Six design thinking steps of human-centered design

Step 1: Empathize

The observation phase called “Empathize” is a way to deal with the uncertainty that is inevitable at the onset of any project. To beat the uncertainty, you’re googling, doing field studies, and qualitative interviews to collect and analyze information about what your users do, say, think, and feel. The result of this step is collecting an overwhelming volume of information.

Methods that come into play at the stage of empathizing:

• Requirement gathering
• Field study
• Diary study
• User interview
• Stakeholder interview

Step 2: Define

So you’ve got mounds of raw data gathered from your research, and now you’re blankly staring at that data thinking, “Where to from here …?” From there, you need to narrow down your data — crystallize, synthesize, and summarize your understanding of who you’re designing for and define the problem users have.

Bring all the data you’ve collected together to find patterns and make sense of it all within the context of the design challenge that you face. 

Methods useful at the stage of defining:

• Persona building
• User journey mapping
• Building empathy maps
• Writing user stories

Step 3: Ideate

As users’ needs and pain points start to crystalize, you’ll see some opportunities for innovation. Time to brainstorm potential solutions inside your design team: start throwing random ideas to avoid the fear of a blank page and generate something new out of the boiling pot. 

Brainstorming principles:

• Everyone has to be heard, not only the ones who speak louder
• There are no “silly” ideas — they can spark new thoughts
• There are no “silly” questions — by questioning obvious things you can find hidden imperfections (and fix them) 
• The more ideas, the better
• The more diverse the ideas are, the better

Take a look at our collection of ideation techniques — they may come in handy at the third stage.

Step 4: Prototype

Time to turn ideas into prototypes. Prototypes offer a quick way to test your assumptions with real people. At the early stage of a design process, prototypes can be pencil sketches, PowerPoint slides, cardboard models, Figma wireframes, or whatever can simulate the user experience of the big powerful system you’re going to build.

Stage 5: Test

If your ideas make you do the wrong thing or a right thing but in the wrong way, this stage is your chance to figure things out. Testing gives the feedback you need to iterate on the prototype. 

You only need up to five people to participate in a test — that’s enough to give major findings. Study each person individually, ask them to operate the prototype, and comment on their actions aloud. 

Methods useful at the testing stage:

• Usability testing
• Accessibility evaluation
• Benchmark testing

Design thinking tools Eleken recommends for remote usability testing:

• Maze is perfect for unmoderated tests of your Figma prototypes
• and Lookback, a good choice for moderated tests

Stage 6: Implement

You can’t anticipate everything by testing your designs on small samplings. Your final and your most reliable test happens after the design goes live. So after your product is released, listen carefully to the feedback and monitor user problems, successes, and frustrations. This observation may trigger another circle of ideation, prototyping, and testing called to improve the user experience even more.

Some tools useful for observing results after implementation:

• Google Analytics to collect quantitative data and surface any trouble spots
• Hotjar, which gives you qualitative data — on heatmaps you can see how users interact with each page

How to practice design thinking

The design thinking algorithm is not a strictly linear process or a recipe you need to follow step-by-step. NNGroup recommends approaching it as a master chef, not a line cook: take the recipe as a framework, then tweak it as needed. 

It is common to return to the two understanding phases of design, empathize and define, after your initial prototyping and testing. You may need more information or new ideas. You may also need to repeat some phases multiple times for better results. And you’ll naturally return to the starting point after your design gets implemented — with a new understanding, new insights, and ideas on how to improve the product even better.

With every new cycle, you discover a new set of unmet user needs — and that’s how design thinking works with problem-solving and innovation. 

Want to learn more about design thinking? Check out how Netflix, Airbnb, and Uber applied this methodology to reach success.