What is UX Design

For many people, the term “user experience” is associated with online business, where people interact with digital products (mobile apps and websites) across devices.

But actually, all of us have dozens of daily ‘user experiences’ apart from the digital world,: when we drive our car, stop at a red light, go through the checkout line at the grocery store…and the list goes on and on. (2)

Let’s assume that you bought a wardrobe online, without the assembly service. The wardrobe will arrive at your house in bits and pieces, not as a whole! The first thing you will do most likely is look for the “assembly manual” and use it as a guide to build your wardrobe.

assembly-services-assembly-company
Image credit: Omaha Furniture Assembly (3)

 

Surprisingly after flipping through a few pages of the manual, you’ve discovered some issues that might block you from building the wardrobe easily, for example:

  • The illustrations of how to put the wardrobe pieces together inside the manual are not clear enough.
  • The manual font is small and illegible.

  • The manual doesn’t provide sufficient instructions on how to build the wardrobe.

That’s not all! we may even face worse situations than that — what will you do if the manual is lost? Do you have to order a new manual online and wait for some time until it arrives? Hopefully the company from whom you bought the item offers an online version of the manual you can download or maybe even an instructional video you can watch online!

All these details shape the “user experience”, and also affects the user opinion and feedback towards a product and webshop in a positive or negative way.

In this blog post, I will define user experience and the roles it covers, and also walk through a case study of a user experience project we executed here at home24.

frustrated.png
Image credit: Omaha Furniture Assembly (3)

 

What is User Experience (UX)?

“UX is how a person feels when interfacing with a system. This includes a website, web application, desktop software and basically any form of human/device interaction.”

From UX Design: The Importance of User Experience

allaroundus
Image credit: by Nick Babich (4)

 

uxmiddle

 

Why is User Experience (UX) important?

User experience (UX) plays a crucial role in any product development. It focuses on having a deep understanding of users and their needs. It aims to fulfil these needs as well as help users complete their task easily and effortlessly. Providing a good experience has a positive impact; it keeps user loyal to the product and when users are happy, business is good.

 

The Role of the UX Designer

The User experience (UX) field is a growing field that is not completely defined yet. The responsibilities of an UX designer may vary in different companies, sometimes even from project to project within one company. Below a summary of the main, or most common, UX designer roles:

 

umbrella
Image credit: by Nick Babich (4)

 

  • User Researcher: focuses on tasks such as conducting user interviews, behavior analysis.

  • Information Architect: focuses on tasks such as how to organise site content, how search should work, what labels to use on menus.

  • User interface (UI): focuses on the look and feel of a site. And make sure that it is aesthetically pleasing.

  • Interaction Design (IxD): focuses on creating engaging interactive systems with well thought out behaviors.

 

The UX Design Process

The process in the UX industry depends on the project, and how much UX help is needed in that project. However there are general guidelines designers should follow for each project.

 

process
Image credit: by Nick Babich (5)

 

Product Definition

Before building a product or adding a new feature to a product it is necessary to interview stakeholders to gather insights about their goals and values.

 

Research

Research teaches us about the users, their behavior, goals, motivations, and need. It also shows how they feel when using the product.

This phase usually includes:

  • Interviews

  • Online surveys

  • User testing / usability testing (when improving a pre-existing product)

 

Analysis

The aim of the Analysis phase is to draw insights from data collected during the research phase. Which help designers create assumptions after defining the problems users are facing.

 

Design

After knowing the users’ expectations and goals from a product and how they like to interact with it, Designers will start creating design solutions and testing them.

This phase usually includes:

  • Sketching

  • Creating wireframes

  • Creating prototypes

Validation

During the validation phase, the final product will start taking shape, where a product should be validated with stakeholders and end-users through the series of user testing sessions. collecting data and feedback are quite valuable in this phase to drive the product refinement forward.

 

Case Study: home24 Checkout Redesign Project

The following example highlights the UX team process during the work on redesigning the checkout project. The aim of the project is to improve the overall experience of the checkout pages and provide the customers with a user-friendly interface across all devices, to ensure that customers can complete their purchases trouble-free.

Collecting data & Define problems

We started our research by collecting data from different sources in order to define the problems our customers are facing.

 

Data sources included

  • Google Analytics helped in defining: Customer Journey, Where are users blocked, Conversion funnel, Screen resolutions.

  • Customer Service is a direct link to our users: CS reports, Interviews with CS agents.

  • Mouseflow helped in reviewing: Heatmaps, User Session Recordings.

 

home2checkout_research

 

Benchmarks & Trend analysis

Benchmarking is an excellent way to get inspiration and insight into what works and doesn’t work to make sound design decisions. We’ve reviewed different types of checkouts (multiple/one-page checkout..etc).

 

The process included:

  • Taking screenshots on all devices, etc.

  • Documenting the features.

  • Which solutions might solve our problems (not just entire features, but also wording, interactions, etc…)

  • Considering themes like “Security”, “Trust” and ”Transparency”

  • Looking at current and new things in the market across competitors and other sites we have identified.

 

home2checkout_benchmarks

 

Research reports & Legal issues

The last part of the research phase included reading the Baymard Institute reports (E-commerce checkout, Mobile e-commerce report) which contain 400 site reviews and 20.678 ‘best practice’ examples.  In addition we had several meetings with the legal department to get more insight regarding what content should be displayed and where we should place it in the checkout pages to be legally compliant.

 

Brainstorming & first wireframes

The first step after collecting data from different sources was filtering and grouping the data into small digestible pieces. We then started with a series of brainstorming sessions to create hypotheses and solutions that might help us solve our customer’s problems.

In order to test the efficiency of the proposed solutions, it was necessary to translate them visually. Therefore we created the first paper prototype to test them quickly.

wireframes

First prototype & Usability testing

After testing the paper prototype, we created high fidelity wireframes and prototypes (InvisionApp) as well as an interactive prototype for full usability testing. The usability testing of the checkout required creating different user scenarios and preparing tasks for them to complete in the usability lab.

During the usability sessions, we asked the customers to perform and specific tasks in order to measure and validate the progress in the proposed design, and we recorded the usability session to review it later.

 

Pixel Perfect Design

After several sessions of design iteration and testing, the decision was to move from a high-fidelity prototype to a pixel perfect design across devices.

home24-checkout-slider

References

  1. Main image Source – Digital Hub City – https://www.pinterest.de/digitalhubcity/

  1. Usability Geek – https://usabilitygeek.com/user-experience/

  1. Assembly image – http://wedeliveromaha.com/services/omaha-furniture-assembly/

  1. https://theblog.adobe.com/what-is-ux-and-why-should-you-care/#ux

  1. https://theblog.adobe.com/ux-process-what-it-is-what-it-looks-like-and-why-its-important/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s