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 several usability tests via Google Meet to evaluate whether users could efficiently select and book a swim class. During each session, I documented any challenges participants encountered. Additionally, I ran a few quick A/B tests to gather feedback on the existing Better app design compared to my redesign.


Overall users found the redesign:

  • to be an improvement in terms of information hierarchy

  • to be improved, in terms of booking an activity (more efficient)

  • needed a bit more variety in how info was presented between the different screens, as well as more visuals

✅ Pro's

Search bar: Users recognized its value, though not for this specific flow. They felt it would be more useful for returning users who want to quickly find a class or sport instead of navigating through multiple screens.

  • Member card & scan code: Participants appreciated that these elements were clearly placed at the top of the homepage, noting that since they’re used on every visit to the centre, the prominence was appropriate.

  • Homepage: Overall, the homepage layout made sense to users. They found it helpful that upcoming activities were prominently displayed. They also noted the added benefit of having these activities confirmed through notifications and emails. While ease of cancelling wasn’t explicitly shown, all participants assumed the kebab menu would provide options to edit or cancel bookings.

  • Booking flow: Users consistently found it clear when and where a booked activity would take place. They felt the redesigned flow was more efficient compared to the original, which they considered cluttered.

  • A/B testing:

    • Homepage: Users found the original version too busy and crowded. The redesign was described as cleaner and more polished.

    • Activities: Participants wanted to see all activities listed with headers for clarity.

    • Swimming booking: The original design was strongly disliked compared to the redesigned version.

    • Confirmation screen: All preferred the redesign, highlighting that the original contained too much text. They agreed it was better to keep extra details within a “more info” or hamburger dropdown.

❤️‍🩹 Cons

Upcoming activities: Some users suggested adding filtering options to view events/bookings by date, week, or a monthly calendar.

  • Sub-navigation: A participant noted that an arrow indicator would help signal the ability to scroll sideways through the secondary navigation menu.

  • Activities design: A few users felt the activities listed on the homepage and activities screen looked too similar (“samey”) and would benefit from more visual variety. One user suggested displaying all activities on a single scrollable page for easier browsing.

  • Help button: A user suggested adding a visible help button on the home screen but also assumed it could be found under the hamburger menu (which matched the card-sorting placement).

  • Class previews: A participant noted that previews of classes (videos or images) would be more useful than text descriptions alone, as visuals better convey what to expect.

  • A/B testing:

    • Book swimming: One user wanted an obvious way to select a range of times (e.g., a slider between two time slots). However, they disliked the current slider implementation for completing this action.

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.