UI UX design

A UI UX design is the design of a user interface (UI) for machines and software to optimise the user experience (UX).

A UI UX design is all about designing for the user. It’s primarily concerned with the look and feel of an interface and its interactive features, but adheres to the same usability principles and accessibility standards.

Closely linked to UX design, a UI design typically begins when most of the research, strategic planning, user journey mapping and UI wireframing tasks are done.

UX design is a design process that considers the experience of the user at all points of contact with that product or service. At Make it Clear, we use UX design to create purposeful, relevant experiences for users and inform the UI designs. For us, UX design includes user research, such as interviews or testing, usability and functionality workshops, or other research tasks that help us to understand the user interactions and motivations before designing to improve them with the User Interface (UI). 

The user testing can take place at any stage of the project, e.g. with the existing UI at the start, then again with the prototype of the UI design or at the end of the project to validate the changes. Testing at both ends of the project means that there can be a more measurable comparison and identification of success. 

Our UI UX design process

Step 1: Definition

To kick off our UI UX design process, we start by identifying the objectives for the design. Any parameters for the project are discussed at this point and any metrics identified for measuring the success of the project, e.g. lower bounce rate.

Identifying key stakeholders at this stage means that there isn’t a sudden change of direction because a stakeholder enters the project late with fresh considerations. In order to create an optimised UI design, we conduct UX research to better understand the user that the UI design will cater for. 

This stage also identifies the research methods that we will use in the project and the target audiences that we will be testing any designs and experiences with. Reviewing any existing materials and the existing designs, if applicable, helps to define the direction for an improved experience as well as any challenges that users currently face. 

  • Define the objectives and parameters for the project  
  • Identify key stakeholders and host kick off meeting 
  • Identify the research methods and target audience
  • Review any existing materials

Step 2: Solution

The solution phase is centred on designing the wireframes for the UI. After identifying any challenges that a user might face from existing documentation, feedback or by members of the team using the interface and encountering issues, the design is intended to combat these challenges and improve the user experience of the UI. 

The next step is organising the testing research to assess the user experience of the user interface wireframe by creating a prototype version. This can then be shared with a user, who will share their screen if we’re conducting the research remotely and talk us through their experience of the tasks we ask them to complete. Questions are directed at their background, examples about their past experience are encouraged and any suggestions for a smoother user experience are taken into account. 

After completing the interviews, we report to the client with our findings and any common themes regarding both the design and the user experience of the prototype, making recommendations for any design changes or solutions to existing challenges. 

  • Design the wireframes 
  • Create prototypes
  • Conduct user testing 
  • Report on the findings
  • Recommend the UI solutions

Step 3: Implementation

After completing the research, we adjust the wireframes and UI design after receiving approval or feedback on recommendations that we presented to the client in the last step. 

There may be rounds of iterations to get the designs exactly where they should be. The end result is often sending the signed off UI design assets to our partner developer for implementation. 

  • Adjust the wireframes to reflect the findings 
  • Sign off the UI designs

Step 4: Optimisation 

As always, we recommend completing a post project review at least 3-6 months down the line. With a UX UI design project, we also recommend bookending the designs with a before and after testing task – in order to compare the test results and understand the success, but also to uncover any suggestions for further improvements from the user’s perspective. 

  • Test the UI designs

Insights

July 31, 2019

What to consider when designing for on-screen reading

In today’s information-rich world there are multiple things competing for the reader’s attention. This has bred the perception that on-screen reading can cause[...]

May 11, 2016

What does success look like?

Sales figures, customer satisfaction, retweets, return on investment… the list of ways to measure the success of a project is endless.

May 4, 2020

How to run a remote design sprint

This guide outlines all of the steps involved in setting up and running a remote design sprint, detailing what is involved or required for each step.