Design

4 steps to user-centered design - a comprehensive guide to web design

A comprehensive guide to web design

1-1



So what is User-centered design (UCD)? Well, to put it in layman terms it’s a process of designing and developing products where the main emphasis is on understanding the users and their needs. When you know the people you are trying to reach, and then design from their point of view, you develop a profound empathy with them. That’s why user-centered design principles is something that is embedded in our web and product design process.

Now that you have a basic understanding of what UCD is, let’s have a look at the various steps of web design that you can replicate at your company.

Step1: Discovery

The discovery phase is focused on research and exploring possible solutions. During discovery, you check the market, you look at the competitors, you talk to potential customers. User research is a must. We opt for user interviews here, as they give more in-depth insights about people’s problems and motivations. Other important things to keep in mind when going through a discovery phase:

It is not a one-person job – the whole (product) team should understand the problem space. After all, you cannot have half of the team working on the solution while the other one is still defining the problem. What is more, the more people will get to understand the problem in depth, the better for the following phases.

It is not a validation exercise – you cannot go into the discovery phase wanting to confirm the problem and maybe even the solution that you had already assumed was right. You ought to stay open—ideas might change, your previous assumptions might turn out to be wrong, and that is okay, it is a part of the process.

Lastly, the discovery phase is not a design sprint. Creative thinking is great for coming up with solutions, but first, you need to make sure that you know the real problem. And for that, you need research.

stages of design quote

Step 2: UX Design

The design phase is where the design thinking comes into play. The process we like to follow is:

A 3-day design thinking workshop involving all the key stakeholders, including the client. We use a mix of design sprint and other design thinking exercises.

UX Design phase – here, our UX Researcher and UX designers translate the outcomes of the discovery phase and the workshops into wireframes. No visual design happens at that stage. It is all about making sure the product will incorporate all the functionalities needed, will be usable, accessible and easy-to-use.

User testing – once we have functional prototypes, we test with users following the rule mentioned, above: fail early and fail cheap. We analyze and code the results, and, based on that, apply the necessary changes to the prototypes

3 (1)

Step 3: UI Design

Once the design is functional and its usability is verified with users, we inject the brand's personality into the design. The steps we would typically take are:

Preparing moodboards – moodboards are based on the brand’s personality we discussed during workshops. Typically, 2-3 different versions are prepared to let the client choose what best expresses their brand. Each moodboard presents the typography, colors, and the general look and feel of the product. Furthermore, we show what the app would look like with that branding by applying the style to one of the wireframes.

Preparing a design system – with branding in mind, we prepare a full design system for the product along with proper documentation. We tend to base it on recognizable standards and guidelines or even well-established design systems, for instance Ant Design.

Creating pixel-perfect designs – using the components from the design system and the wireframes as a blueprint, we create pixel-perfect designs of all screens of the application.

User testing – here, ideally, we test the designs with users again in order to make sure before the launch that the product meets users’ needs and is pleasant to use.

4

Step 4: Benchmarking and tracking the UX

Set up an ongoing benchmarking practice, i.e., every year. Track details such as the number of visitors, bounce rates for the whole site as well as specific pages, drop-off points in the sales funnel, audience demographic, conversion rates for different goals, time to complete tasks, and, last but not least, user behavior across all pages. Then, you can compare to an earlier version, to a competitor or an industry average.

For benchmarking & tracking, we use Google Analytics and Hotjar. We have actually been growing more and more fond of Hotjar and discovering more of its handy features. Having numerous funnels and heatmaps set up, pausing and duplicating them after any major changes on the website to measure from the start and having screen recordings enabled and filtered is how we ensure we get the most out of the tool.

Why benchmarking? To track improvements, show impact, and calculate ROI! – Your product team will be pleased to see the positive outcomes of their work, and stakeholders will be impressed if you show them the numbers as well! Show them how much money they will be saving or how many more customers the company will be getting thanks to the web app improvements, and you will secure yourself investments for the next improvements!

5 (1)

Conclusions

We approach the design of new applications with a comprehensive step-by-step process that covers all the key aspects of an impactful product. In our books that means a product that:

  • falls into a market gap or niche
  • addresses real-life problems of its target users
  • is functional and usable
  • expresses a unique and powerful brand personality.

Our design service covers launching a product that covers these as well as continuously tracking its performance to ensure that it improves over time.

Ready to create a delightful product?
Tell us about your project
.

Read more

New Year’s resolutions that all QA teams should consider
TensorFlow.js, Machine Learning and Flappy Bird: Frontend Artificial Intelligence