Better

UX/UI Design

After noticing several issues with the UX/UI of the Better app, I decided to make a few adjustments to a key flow and build a wireframe to get to the testing stage as soon as possible.

Process

Research

Analysis

Wireframing

Prototyping

Timescale

2-3 days

Better

UX/UI Design

After noticing several issues with the UX/UI of the Better app, I decided to make a few adjustments to a key flow and build a wireframe to get to the testing stage as soon as possible.

Process

Research

Analysis

Wireframing

Rapid Prototyping

Timescale

2-3 days

Audit & Card Sorting

I looked through the flow for booking a swimming session.

Instantly I saw problems with the home screen and how info was displayed when trying to book a swim session.

So I looked through the user flow, copied it down and made my notes on what to change.

I also broke down all the information from the homepage onto sticky notes and endeavoured to organise them in a more efficient way. Note: if I had access to actual users I would have prefered to get them to perform the task so as to gain what a wide range of users think of the hierarchy of the home page.

Audit

CS (before)

CS (after)

Audit

CS (before)

CS (after)

Audit

CS (before)

CS (after)

Sketching & Wireframing & Prototyping

A colourful wireframe effectively, utilised only for testing the flow and if users could make sense of it

Sketching

Wireframe

Prototype

Sketching

Wireframe

Prototype

Sketching

Wireframe

Prototype

Testing & Next steps

I conducted a number of in-person usability tests over google meet. I aimed to test if users could select their pizzas quickly and customise them efficiently and see if users struggled at any points during the process. As well as to see what they thought of the visual design and how information was portrayed in the app.

Before & Afters

Below are select screens highlighting the before-and-after of the redesign.

Below are select screens highlighting the before-and-after of the redesign.

Before & Afters

Below are select screens highlighting the before and after of the redesign.