Post on 17-Jan-2023
The product:
An app that allows cyclists to book a service for their
bicycle at the bicycle shop in Stockholm, Sweden.
Project overview
Project duration:
March 2021 - October 2021
The problem:
Bicycle riders who commute daily into work,
struggled to book services and maintain their
bicycles at the bicycle shop
Project overview
The goal:
Create an user friendly way to allow bicycle
riders to book their bicycle services in advance
My role:
UX Designer
Project overview
Responsibilities:
Created personas, researched and interviewed
potential users. Created wireframes and low-Fi
prototypes. Conducted usability studies and
created Hi-Fi mockups.
User research: summary
After conducting several research studies, I was expecting the potential users of this app to mostly be sports enthusiasts and I was surprised that bicycle commuters have great need for this app
User research: pain points
Booking a service
Bicycle commuters who rely on their bicycle
daily, struggle to make time to book a service
Loyalty rewards
Several potential users complained that they get
no rewards for being loyal customers
No app available
With no app available, customers had to rely on phoning in or visiting the shop in person which is
time consuming
Hidden costs
When booking a service on the phone, customers
complained about not knowing the cost of their
service
1 2 3 4
Persona: Arnie
Problem statement:
Arnie is a bicycle
commuter who needs a
better way to book a
bicycle service and get
rewarded for his loyalty
Because he is money
savvy customer who
relies on his bicycle as
his sole transport
User journey map
Image of user journey map
Arnie is all about saving
time and money. Following
his user journey we can see
if we offer him a way to
book a service in advance
and reward him for his
loyalty, he will achieve his
goals.
● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Startingthe design
Paper wireframes
I started with paper
wireframes to quickly iterate
several different designs.
This allowed me to try out
different UI layouts in an low
cost time friendly way.
Image of paper wireframes including
five different versions of the same
screen and one image of the new,
refined version
Digital wireframes
During research a key
insight was the ability to
book a service. Something
potential users struggled
with in the past
This version of the home screen was designed to give a brief over of the bicycle shop and guide users to booking a service
Insert first wireframe example that
demonstrates design thinking aligned with
user research
The ability to create an account and save profile details would help users with future bookings
Digital wireframes
Booking a service and
scheduling the date and
time is critical to the user
experience. This was an
early draft of the booking
service
A full calendars months view of designed to give users the most choice and information when deciding their date of service
Insert second wireframe example that
demonstrates design thinking aligned with
user research
Store details would help new users unfamiliar with the store
Low-fidelity prototype
Screenshot of prototype with connections or prototype GIF
All the connections that made the
Low-Fi prototype used in the first
round of usability testing
Link
Usability study: findingsAfter conducting a moderated usability study with several people ranging across ages and mobile app skills, there were some of the insights discovered.
Round 1 findings
Selecting the service type wasn’t clear1
The date selector was still not easy to use or understand
2
Round 2 findings
Editing the service type was difficult3
The date selector was too confusing 1
Users wanted more info on pricing2
A chance to confirm order details was needed
3
Mockups
I changed the date selector
which was confusing users,
to a button which bought
up a pop Material Design
date selector
Image of selected
screen before usability study
Before usability study After usability study
Image of selected
screen after usability study
Mockups
I refined the confirmation
page and opted to use a
card type system to display
information
Before usability study After usability study
Image of selected
screen before usability study
Image of selected
screen after usability study
Mockups
Main mockup
screen for display
Main mockup
screen for display
Main mockup
screen for display
Main mockup
screen for display
High-fidelityprototype
Link to Figma prototypeScreenshot of prototype with connections or prototype GIF
Accessibility considerations
Contrast:
A colour contrast test was used to make sure all the text contrast is at least AA
grade
Icons and text:
Icons and titles we used to ensure buttons and
icons were understandable
Navigation:
Multiple points of entry and persistent back key allow users to navigate
more freely
1 2 3
Takeaways
Impact:
“ I really feel like this was an app easy
to use, especially for users like myself
who are older and less computer
friendly” - Participant C, 56 years old.
What I learned:
Working on this app has been a journey. I feel
like my mind is more open to the needs of
others and accessibility is definitely something
I will consider more going forward
Next steps
Features:I do think this app needs more, beyond booking a
service and I would like to find out what users need
Test with real world data:Testing this app in its real
world situation and conducting unmoderated usability studies will go a long way in getting this
app ready
Deployment:Once we have fine tuned
the app and met the needs of the users. We can deploy the app and
perhaps even look at using this model for other
bicycle shops
1 2 3
Let’s connect!
Insert a few sentences summarizing the next steps you would take with this
project and why. Feel free to organize next steps in a bullet point list.
For more windows into my world of UX, check out hezzie.design
I can be reached at hezzie@hey.comALways keen to chat :)
Thanks for viewing this case study