Designing a bike builder app
The instructional mobile app for building custom bikes
CLIENT
Freedom Wheels
ROLE
UX/UI designer (UX/UI & research)
DURATION
2 Months (2021)
TEAM
CEO, CTO & senior product designer
LOCATION
Melbourne
oUTPUT
Mobile app
Overview
Freedom Wheels, a Solve-TAD initiative, custom-builds bicycles for individuals with disabilities who are unable to use standard bikes. The project aimed to understand the bike assembly process and develop a digital solution to guide new volunteers through the correct assembly steps, while also providing value to veteran volunteers to enhance their work.
Opportunity
Freedom Wheels sought to retain and increase the number of volunteers in New South Wales and Victoria, and to boost bike deliveries and sales, all within the constraints of limited staff resources. There was an opportunity to create a community of expert bike builders by designing an instructional tool for bike assembly and a tracker for bike deliveries.
Design Thinking Approach
This diagram represents the 8 weeks of the all phases of the project, from understanding the client’s needs, the research, obtaining insights, analysing qualitative and quantitative data, generating ideas to create an interactive prototype, testing, until the day I presented the design proposal to the key stakeholders.
I conducted semi-structured interviews with five volunteers and one coordinator to empathise with users and generate personas and journey maps. These tools guided the design solution by identifying user requirements and product features.
Interview guide questions
The primary persona, the bike builder, was developed based on interview insights. Understanding their journey helped identify obstacles in the building process and opportunities for simplification and efficiency.
Builder Persona
Mapping the builder's journey at the Freedom Wheels workshop highlighted key tasks, pain points, and areas for improvement. This analysis informed user goals, design opportunities, and product requirements.
Builder Journey Map
- I focused on the building day at the workshop.
- I considered the pain points on the User’s Journey to create design opportunities.
- I generated ideas after contemplating some steps of the journey where we can improve the volunteer’s experience.
- The journey map helped me in validating assumptions, defining the product requirements.
- I created the user goals after understanding the most important tasks and deliveries of the volunteer.
- Initial sketches facilitated rapid idea generation and iteration. They were instrumental in consolidating concepts and organising information based on user interviews. Three versions were created, each refining the app's flow and structure.
- The main purpose of my sketches was to consolidate ideas into something tangible.
- After analysing and summarising the information from the user interviews, I started with the sketches, which allowed me to present, test and generate new design possibilities.
- User feedback and weekly team discussions helped me choose the best design.
Sketches of Key User Flows
Wireframes of Key User Flows
- Low-fidelity wireframes were developed for testing purposes, providing a tangible representation of ideas and enabling early feedback.
- I started adding some bright colours to my design based on the brand guidelines.
- I used clear and simple iconography.
- I did a few iterations of elements based on user feedback.
- I followed the Gestalt principles to organise the app elements.
High Fidelity Prototype
UI Design
Once I tested out all usability problems, I did some tweaks and iterations on the prototype:
- Following the Freedom Wheels brand guidelines, I created a nice, fresh and light visual design.
- I used blue as the primary colour which represents the app main user (retirees volunteers in their 60s).
- To improve accessibility, and following the Web Content Accessibility Guidelines (WCAG), I use large fonts, big buttons, high contrast with the background and bright colours.
UI Design
“
“
That looks fantastic! An amazing clickable prototype, backed up with great thinking...You really nail each of the main needs, I look forward to showing it to the team. — Freedom Wheels.
NEXT CASE STUDY
Memories B2B Experience
Designing a bike builder app
The instructional mobile app for building custom bikes
CLIENT
Freedom Wheels
ROLE
UX/UI designer (UX/UI & research)
DURATION
2 Months (2021)
TEAM
CEO, CTO & senior product designer
LOCATION
Melbourne
OUTPUT
Mobile app
Overview
Freedom Wheels, a Solve-TAD initiative, custom-builds bicycles for individuals with disabilities who are unable to use standard bikes. The project aimed to understand the bike assembly process and develop a digital solution to guide new volunteers through the correct assembly steps, while also providing value to veteran volunteers to enhance their work.
Opportunity
Freedom Wheels sought to retain and increase the number of volunteers in New South Wales and Victoria, and to boost bike deliveries and sales, all within the constraints of limited staff resources. There was an opportunity to create a community of expert bike builders by designing an instructional tool for bike assembly and a tracker for bike deliveries.
- Riders
Design a solution that helps riders (end users) track the progress of their custom bike build.
Design Thinking Approach
This diagram represents the 8 weeks of the all phases of the project, from understanding the client’s needs, the research, obtaining insights, analysing qualitative and quantitative data, generating ideas to create an interactive prototype, testing, until the day I presented the design proposal to the key stakeholders.
I conducted semi-structured interviews with five volunteers and one coordinator to empathise with users and generate personas and journey maps. These tools guided the design solution by identifying user requirements and product features.
Interview guide questions
The primary persona, the bike builder, was developed based on interview insights. Understanding their journey helped identify obstacles in the building process and opportunities for simplification and efficiency.
Builder Persona
Mapping the builder's journey at the Freedom Wheels workshop highlighted key tasks, pain points, and areas for improvement. This analysis informed user goals, design opportunities, and product requirements.
Builder Journey Map
- I focused on the building day at the workshop.
- I considered the pain points on the User’s Journey to create design opportunities.
- I generated ideas after contemplating some steps of the journey where we can improve the volunteer’s experience.
- The journey map helped me in validating assumptions, defining the product requirements.
- I created the user goals after understanding the most important tasks and deliveries of the volunteer.
- Initial sketches facilitated rapid idea generation and iteration. They were instrumental in consolidating concepts and organising information based on user interviews. Three versions were created, each refining the app's flow and structure.
- The main purpose of my sketches was to consolidate ideas into something tangible.
- After analysing and summarising the information from the user interviews, I started with the sketches, which allowed me to present, test and generate new design possibilities.
- User feedback and weekly team discussions helped me choose the best design.
Sketches of Key User Flows
Wireframes of Key User Flows
- Low-fidelity wireframes were developed for testing purposes, providing a tangible representation of ideas and enabling early feedback.
- I started adding some bright colours to my design based on the brand guidelines.
- I used clear and simple iconography.
- I did a few iterations of elements based on user feedback.
- I followed the Gestalt principles to organise the app elements.
High Fidelity Prototype
UI Design
Once I tested out all usability problems, I did some tweaks and iterations on the prototype:
- Following the Freedom Wheels brand guidelines, I created a nice, fresh and light visual design.
- I used blue as the primary colour which represents the app main user (retirees volunteers in their 60s).
- To improve accessibility, and following the Web Content Accessibility Guidelines (WCAG), I use large fonts, big buttons, high contrast with the background and bright colours.
UI Design
“
“
That looks fantastic! An amazing clickable prototype, backed up with great thinking... You really nail each of the main needs, I look forward to showing it to the team. — Freedom Wheels.
NEXT CASE STUDY
Memories B2B Experience
Designing a bike builder app
The instructional mobile app for building custom bikes
CLIENT
Freedom Wheels
ROLE
UX/UI designer (UX/UI & research)
DURATION
2 Months (2021)
TEAM
CEO, CTO & senior product designer
LOCATION
Melbourne
OUTPUT
Mobile app
Overview
Freedom Wheels, a Solve-TAD initiative, custom-builds bicycles for individuals with disabilities who are unable to use standard bikes. The project aimed to understand the bike assembly process and develop a digital solution to guide new volunteers through the correct assembly steps, while also providing value to veteran volunteers to enhance their work.
Opportunity
Freedom Wheels sought to retain and increase the number of volunteers in New South Wales and Victoria, and to boost bike deliveries and sales, all within the constraints of limited staff resources. There was an opportunity to create a community of expert bike builders by designing an instructional tool for bike assembly and a tracker for bike deliveries.
- Riders
Design a solution that helps riders (end users) track the progress of their custom bike build.
Design Thinking Approach
This diagram represents the 8 weeks of the all phases of the project, from understanding the client’s needs, the research, obtaining insights, analysing qualitative and quantitative data, generating ideas to create an interactive prototype, testing, until the day I presented the design proposal to the key stakeholders.
I conducted semi-structured interviews with five volunteers and one coordinator to empathise with users and generate personas and journey maps. These tools guided the design solution by identifying user requirements and product features.
Interview guide questions
The primary persona, the bike builder, was developed based on interview insights. Understanding their journey helped identify obstacles in the building process and opportunities for simplification and efficiency.
Builder Persona
Mapping the builder's journey at the Freedom Wheels workshop highlighted key tasks, pain points, and areas for improvement. This analysis informed user goals, design opportunities, and product requirements.
Builder Journey Map
- I focused on the building day at the workshop.
- I considered the pain points on the User’s Journey to create design opportunities.
- I generated ideas after contemplating some steps of the journey where we can improve the volunteer’s experience.
- The journey map helped me in validating assumptions, defining the product requirements.
- I created the user goals after understanding the most important tasks and deliveries of the volunteer.
- Initial sketches facilitated rapid idea generation and iteration. They were instrumental in consolidating concepts and organising information based on user interviews. Three versions were created, each refining the app's flow and structure.
- The main purpose of my sketches was to consolidate ideas into something tangible.
- After analysing and summarising the information from the user interviews, I started with the sketches, which allowed me to present, test and generate new design possibilities.
- User feedback and weekly team discussions helped me choose the best design.
Sketches of Key User Flows
Wireframes of Key User Flows
- Low-fidelity wireframes were developed for testing purposes, providing a tangible representation of ideas and enabling early feedback.
- I started adding some bright colours to my design based on the brand guidelines.
- I used clear and simple iconography.
- I did a few iterations of elements based on user feedback.
- I followed the Gestalt principles to organise the app elements.
High Fidelity Prototype
UI Design
Once I tested out all usability problems, I did some tweaks and iterations on the prototype:
- Following the Freedom Wheels brand guidelines, I created a nice, fresh and light visual design.
- I used blue as the primary colour which represents the app main user (retirees volunteers in their 60s).
- To improve accessibility, and following the Web Content Accessibility Guidelines (WCAG), I use large fonts, big buttons, high contrast with the background and bright colours.
Share your Projects…
Builders will be able to add notes, photos, videos, and share their building knowledge.
Learn with the Community…
Volunteers with different skill levels will be able to access the learning community of bike-building experts.
UI Design
“
“
That looks fantastic! An amazing clickable prototype, backed up with great thinking...You really nail each of the main needs, I look forward to showing it to the team. — Freedom Wheels.
NEXT CASE STUDY
Memories B2B Experience