Andrew Htun BMF UX Case Study

Design Portfolio

Htun

Andrew

Hi, I’m a UX Designer passionate about creating human-centred designs that are impactful, beautiful and simple.

Project

My friend Tomfranchise business owner outdoor fitness company

is a for BMF, an, where I also work as a part-time fitness instructor.

Currently, around 80% of his new clients come from word of mouth and other offline methods.

they were put off by the mobile site which looks outdated and unintuitive

However, many new customers said - In order to grow his business, Tom needs to improve the online sign-up experience for potential new clients. My solution would be a complete redesign of the mobile web app to

optimize the mobile site, redesign the UI for a modern feel and build a smooth online experience

giving the potential new client a better understanding of what they can expect if they sign up.

*Current mobile site

Challenge

togetenoughmembershipsign-ups

recentCOVID-19pandemic peoplewantedtocontinue exercisingoutdoors

ThemainproblemwasthatBMFwas fromtheir outdatedmobilewebapp. Withthe ,studies showedthatmore asopposedtogoingbackto gyms-BMFwantedtocapitalizeonthisand createmoreonlineconversions.

myfirstUXdesignprojects testedthemwithrealusers

Asoneof ,Icreated twoideasand ina usabilitytest,beforesendingitintodevelopment. struggling

User-Centred Design Process

For market research, I conducted a competitor analysis and benchmarking to find out how other companies were solving the same problem.

Based on the research, I created two solution sketches and turned them into a real user interface design.

I created a clickable prototype to test them with potential customers in an A/B test to come up with the final design.

BMF - Outdoor Fitness Company

Heuristic Analysis 1

First CTA is for a user to find their nearest venue - this unnecessary additional click could be replaced with the search bar itself.

The very first screen a user sees doesn’t give any info on what BMF is and what makes it unique.

Poor colour contrast makes it difficult to read.

Font choice looks outdated.

Not much information is given to user even after scrolling downUser has to click to find out what BMF is or what happens in the classes.

When location is input by the user, it only shows your location, and may not show the nearest venue.

User has to scroll around to find it.

Heuristic Analysis 2

Venue Screen

Font size and spacings make it difficult to read.

Too much text here - it should be broken up with more info on what happens in a class.

Poor colour contrasts make the buttons difficult to read.

UI in general looks very square and unprofessional.

Button padding and size looks poorly designed.

Layout of memberships make it difficult for a user to compare options.

Inconsistant fonts, sizing and spacings with rest of the site.

Inconsistant padding with rest of the site.

Research Questions

1.

2.

3. How might we create a great mobile experience for an outdoor fitness app?

How might we excite the user about the BMF experience if they sign up?

How might we provide a smooth onboarding experience?

F45 - Indoor Group Fitness Company (1/2)

Competitor Analysis

Home Screen Home Screen - Scrolled Down

Clean and modern UI.

Welcome message introducing the user to what F45 is.

The user is given options of where to go from the very first screen.

Company motto.

Find a Studio CTA is highlighted, prompting a new user to take action.

Consistant messaging across the site.

A drop down tab opens as soon as the user scrolls down, prompting a free trial CTA.

Find a Studio

When a location is input into the text bar, the nearest locations show up, as well as the map.

Competitor Analysis

As a new user scrolls down, they can read a step by step outline of what to expect.

Drop down tab with CTA remains constant throughout.

The next step is shown as the user scrolls down.

Step by step outline continued.

Psycle - Group Spin Class Company

Competitor Analysis

The different workouts on offer are shown as tabs which a user can click to find out more.

Workout Choices

Clean and simple UI

Memberships

Each membership option is clearly defined with what it provides.

More benefits info can be found giving a new user as much info as possible.

Memberships - Scrolled down

A clear breakdown of each membership option makes them easier to compare.

A new user has the option to choose when they want to start.

Our Parks - Outdoor Fitness Company

Competitor Analysis

A location search bar is the first CTA a user sees when the open up the web app.

Home Screen Class Information Class Information - Scrolled Down

Short intro text informing the user what the company does. A short and easily-digestable brief is given to the user.

Informing a new user on the class duration will help make a decison whether to sign up.

This provides reassurance to a new user that they will be kept safe at all times.

Welcoming all abilities is important - especially if a new user is looking to get back into fitness.

The Fore - Group Fitness Gym

Competitor Analysis

WIth multiple calender dates shown, this makes it very easy for a new user to see what classes are on offer on each day.

A user has the option to find out more about the class without moving to another screen.

Each class type is has a brief description informing the user of what to expect.

A large, high-definition picture to accompany class description.

A user can easily scroll down to find out about all the different classes on offer.

Competitor Analysis

Large title and image to differentiate each type of class.

A user can easily scroll down to see what classes are on offer.

Tapping on an image gives a brief introduction text of what the class can offer.

A welcome message that is specific to new users - This provides reassurance and guidance.

A clear first step and CTA informs a new user what they need to do to get started.

An Instagram feed makes the classes seem more realistic and relatablecompared to high production photos which can seem corporate.

Solution Sketch A

Task: Start Trial

(Left to Right

Homepag

Homepage - scrolled dow

Find Your Venu

Find Your Venue - input locatio

BMF Location Scree

Sign Up Scree

Paymen

Payment Confirmation

Solution Sketch B

Task: Start Trial

(Left to Right)

What is different

Search bar has been added directly to the home screen

Venue map has been replaced by venue cards with the user given the option to view the map

New user is prompted to book a session, before signing up and providing payment

Just one option to sign up (with email) and make payment (with card)

Option to add booking to calender upon confirmation.

User Interface Design - A (1/2)

THE WORLD’S BEST OUTDOOR WORKOUT

Find Your Venue

We are the first in military fitness and the leaders in OUTDOOR TRAINING

New to BMF?

WE TRAIN EVERYONE

Our workouts are tailored to fit all ability levels

WE TRAIN ANYWHERE

Just like the military, we workout using what’s available - benches, tyres, ropes..

... IN ALL WEATHERS

We endure the hard yards, push ourselves, and we’re not afriad to get a little muddy.

London Bridge

LONDON BRIDGE

Trial 14 days for £20

Start Trial

14 London Bridge, London SE1 2YZ John Smith Venue Owner

Welcome To

BMF - London Bridge

There are many reasons why London Bridge is our most popular park. An idyllic scenic hub of fitness, the park's mostly flat landscape is well maintained, including football pitches, running trails and footpaths

BMF - London Bridge

BMF - Hyde Park

14 London Bridge, London SE1 2YZ 1 Hyde Park Way, London SW1 9C2

0.5km 1km

Within the park lies lakes and the bandstand to run around, making London Bridge the perfect place to enjoy exercising outdoors!

BMF - Hyde Park

User Interface Design - A (2/2)

LET’S GET STARTED!

Get your at BMF - London Bridge 14 days for £20

First Name

Purchase your 14 days for £20* Credit/Debit Card

Your payment is secure

Password (min. 6 characters)

Your information is always kept private and secure

Or

Continue with Google

Continue with Facebook

Memberships from £55/month

BMF - Hyde Park 1km away

Tom Griller

Known for being our Signature workout, Military Fit is a 60-minute workout where you’ll be on the go right from the start. Military training strategies are used to get the most out of our members in every session, whilst using our knowledge and understanding of the body to get the very best fitness results.

User

Interface Design - B (2/2)

Military Fit

5 June

Military Fit

Monday, 5 June Outdoors Bodyweight 6am - 7am

Login to continue

Login to Book

Instructor

Tom Griller

Known for being our Signature workout, Military Fit is a 60-minute workout where you’ll be on the go right from the start. Military training strategies are used to get the most out of our members in every session, whilst using our knowledge and understanding of the body to get the very best fitness results.

New to BMF? Register now!

Prototype

I created a clickable prototype in Figma to conduct a usability test with real users. The goal was to find out what worked and what did not.

Usability Testing

I ran usability tests with 5 people, in 5 separate in-person interviews to take the learnings into my final design.

KEY LEARNINGS - Top 5 findings

Solution A

Find Your Venue

BMF - London Bridge

14 London Bridge, London SE1 2YZ

0.5km

Solution B

Find Your Venue

Enter your location

BMF - London Bridge

Memberships from £55/month

14 London Bridge

London SE1 2YZ John Smith Venue Owner

Welcome To

BMF - London Bridge

There are many reasons why Bridgeisourmostpopularpark.Anidyllic, scenic hub of fitness, the parks mostly flat landscape is well maintained, including football pitches, running trails andfootpaths.

Within the park lies lakes and the bandstandtorunaround,making

Trial 14 days for £20

Start Trial

Continue with Google

Continue with Facebook Sign Up

Bridge the perfect place to en exercisingoutdoors!

BMF - London Bridge

14 London Bridge, London SE1

Upcoming Sessions

Monday, 5 Jun

Military Fit

Monday, 5 June

6am - 7am

Outdoors Bodyweight

Login to Book

Results 3 out of the 5 participants got stuck on solution A since the info about the ‘London Bridge’ was mostly about the park itself and not about what BMF - London Bridge did in terms of fitness.

All 5 participants clicked on the ‘Start Trial’ button immediately whilst 3 of the 5 participants were confused they were being asked to Log In when they hadn’t registered on the web app before.

Instructor Tom Griller

Known for being our Signature workout, Military Fit is a 60-minute workout where you’ll be on the go right from the start. Military training strategies are used to get the most out of our members in every session, whilst using our knowledge and understanding of the body to get the very best fitness results.

New to BMF? Register now!

All 5 participants found the sign up process easy with little to no friction points - 2 of the 5 participants didn’t see the ‘Register Now’ text link on solution B and were confused. out of the 5 participants found using the map easier to navigate and find their closest BMF locationThey were able to tell immediately what information was being shown