During a recent interview I was asked to do this design challenge. It was a fun entertaining project and I thought about sharing it with you.

It took about 1.5 days of work.

Pick an app that you use already, and identify a process, flow or feature you think could be improved upon and add real user value to show your user experience skills. It should be an app which also needs a redesign, and redesign at least one screen to show your interface design skills.

My approach follows a standard circular approach to design, where three main phases can be identified. Discovery, Design and Validation.

I started the discovery phase with some research on the existing product, the current users and what are their goals and pain points. In the second stage of the discovery phase I was able to start drawing insights from the data collected during the research phase, this allowed me to define some proto-persona and identify three of the most important areas for improvement on which I will focus during the design phase.

The design phase will show the design solutions proposed in terms of flows and detailed UI designs. 

Lastly, I discuss several measures which can be used to determine if my redesign had made a positive impact.

Lothian Buses M-Tickets App was introduced to allow people to purchase and use bus tickets on their smartphones. The app is available for Android (100k+ downloads) and iOS devices. However, the ratings and reviews show a general dissatisfaction with the product.

In order to deeply understand the friction points of the app the best approach is to run some user interviews. Another powerful way to gain some insights in what are the major pain points of a product is to involve customer support in the discovery process. In this case, I decided to read through some of the reviews of the app. I was then able to identify six main reasons for complaint:

1 - The app crashes

2 - £10 minimum spend

3 - Bad UI

4 - Slow to load

5 - Only one active ticket at the time

6 - Tickets only active for 5 minutes 

Another method to generate quick and inexpensive understanding of a product is an heuristic evaluations. Here some of the key points:

 - Consistency problems. There is not a standard way to achieve a task and this could generate confusion. Also, the UI is not very consistent across the different screens. E.g. Home page, tickets page, activate a ticket page, my account, etc.

 - Visibility problem. Complex tasks are not explained in advance. E.g.: activating a tram ticket differs a lot from activating a bus ticket. A bus ticket is activated within the app and expires in5 minutes, while a tram ticket requires the scan of a QR code that can be found on the platform and expires in 30 minutes and even if expired is required at the end of the tram journey. Better help/documentation for complex tasks should be provided.

 - Excessive error prevention. Activating a ticket is a three steps confirmation.

 - Confusing interface. The design looks cluttered and too many options are often offered at the same time. E.g.: home page is offering the possibility to buy tickets, share tickets, view available tickets, activate a ticket, open the main menu on top left, open a secondary menu on top right and see the available tickets in a different screen. Colour scheme and UI look outdated and not consistent.

User reviews analysis and heuristic evaluation allow me to identify the design issues the current app has and prioritise three of the most prominent.

Non-contemporary UI can create confusion in the users, slow down the journey and ultimately make him fail. It can also be seen as untrustworthy. 

There are two navigation menus, different pages where the tickets can be seen and used and three main routes that can be taken from the home page.

Two main point raised: being able to activate more than one ticket at the time and better handling of the active time.

Understanding target customers is always crucial for problem-solving. A better understanding of users could help better transforming them into business value. Here a brief sample of three persona that want to use our app.

With the insight from the discovery phase this are the proposed solutions:

PROBLEM - UI outdated and poor visual hierarchy.

SOLUTION -  Simplify the UI following a more minimalistic design for ease of use with emphasis on the usability. Create better visual hierarchy by hiding unnecessary information. 

PROBLEM - Disorganised navigation. 

SOLUTION -  Reorganise the navigation getting rid of redundant elements creating more linear user flows.

PROBLEM - Poor functionality. 

SOLUTION -  Add option to activate tickets for multiple passengers on the same app and use of tutorials to better explain complex processes when going through for the fist time.

Brainstorming and sketching out the flows allowed me to quickly come up and validate possible solutions. 

Paper/whiteboard sketching is a good way to creatively think about the big picture and app architecture while not getting lost in small details.

With Lo-Fi wire framing I was able to reorganise my ideas and come up with a strong solution for a specific user flow. Activating tickets.

For the high fidelity designs I focused on the specific user flow of activating tickets for multiple passengers. I have created five screens focusing on keeping the elements in the screen to the minimum. The best way to regain trust from the current users is to show a focus on functional values and to do so I’ve chosen a minimalistic design with only 3 colours that focuses on simplicity and coherency. Reliability in the experience will create a better emotional connection that more elaborated and colourful graphics. I have tried to recreate a sense of familiarity and knowing what is going to happen. The only screen where I opted for a more sophisticated graphic (downloaded from the web for the sake of the exercise) is the active ticket screen where no further action from the user is required and there is no worry about distracting them from achieving their goals.

I am also assuming that is not the first time the app is used. My approach is to explain in depth the process only the first time a user goes down a path and assuming that if the interface is intuitive enough the user will be able to perform the same task again without help the second time around. It follows the principle of game tutorials.

A basic prototype created with Sketch and InVision can be seen through this link https://invis.io/PROMOJZFSJC

For the purpose of this exercise I haven’t done any evaluation. However, I propose several steps and metrics that will help determine whether the redesign was successful. 

Many testing sessions should be run throughout the entirety of the process to keep improving the assumptions on which are based the designs.

By keeping track of the ratings on the app stores we can collect quantitative and qualitative data. Also, a decrease in complaints should indicate better performance.

An increase in number of users and/or an increase in number of tickets used.

SIDE NOTE: It is possible that the technical difficulties (app crashing - not loading tickets) will influence the users’ experience. I’d recommend improving the reliability of the product alongside the designs.