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.
Goals
- Volunteers
Design a solution that assists new volunteers in understanding the assembly process and incorporates features beneficial to veteran volunteers.
- Riders
Design a solution that helps riders (end users) track the progress of their custom bike build.
Design Thinking Approach
Design Process
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.
insights
Interviews
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
main user
Persona
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
Builder
Journey Map
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.
Ideation
Sketches
- 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
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
High Fidelity Prototype
Usability Testing
Insights
Before submitting my design proposal to Freedom Wheels, I created an interactive prototype to perform a testing round with users in order to reveal possible usability problems. I found some opportunities to improve my design in terms of accessibility and information architecture.
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.
Introducing the community of customised bike builders
Features
Track your Bike…
Riders will get real-time updates on their bike order and track its progress.
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.
key
Learnings
- User research and testing are key to designing a successful product.
- Learning while working for a company in parallel is an incredible experience and also a big challenge, but I believe through passion and perseverance, I managed to fulfil the expectations of the company, as well as my professional goals.
- I felt confident in presenting my final design to the client, and it was really satisfying when I got great feedback on my project.
- Working in collaboration with my mentor was an enriching experience; we were able to share knowledge and explore different ideas and new possibilities that I would have never imagined.
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.
Goals
- Volunteers
Design a solution that assists new volunteers in understanding the assembly process and incorporates features beneficial to veteran volunteers.
- Riders
Design a solution that helps riders (end users) track the progress of their custom bike build.
Design Thinking Approach
Design Process
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.
insights
Interviews
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
main user
Persona
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
Builder
Journey Map
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.
Ideation
Sketches
- 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
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
High Fidelity Prototype
Usability Testing
Insights
Before submitting my design proposal to Freedom Wheels, I created an interactive prototype to perform a testing round with users in order to reveal possible usability problems. I found some opportunities to improve my design in terms of accessibility and information architecture.
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.
Introducing the community of customised bike builders
Features
Track your Bike…
Riders will get real-time updates on their bike order and track its progress.
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.
key
Learnings
- User research and testing are key to designing a successful product.
- Learning while working for a company in parallel is an incredible experience and also a big challenge, but I believe through passion and perseverance, I managed to fulfil the expectations of the company, as well as my professional goals.
- I felt confident in presenting my final design to the client, and it was really satisfying when I got great feedback on my project.
- Working in collaboration with my mentor was an enriching experience; we were able to share knowledge and explore different ideas and new possibilities that I would have never imagined.
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.
Goals
- Volunteers
Design a solution that assists new volunteers in understanding the assembly process and incorporates features beneficial to veteran volunteers.
- Riders
Design a solution that helps riders (end users) track the progress of their custom bike build.
Design Thinking Approach
Design Process
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.
insights
Interviews
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
main user
Persona
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
Builder
Journey Map
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.
Ideation
Sketches
- 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
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
High Fidelity Prototype
Usability Testing
Insights
Before submitting my design proposal to Freedom Wheels, I created an interactive prototype to perform a testing round with users in order to reveal possible usability problems. I found some opportunities to improve my design in terms of accessibility and information architecture.
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.
Introducing the community of customised bike builders
Features
Track your Bike…
Riders will get real-time updates on their bike order and track its progress.
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.
key
Learnings
- User research and testing are key to designing a successful product.
- Learning while working for a company in parallel is an incredible experience and also a big challenge, but I believe through passion and perseverance, I managed to fulfil the expectations of the company, as well as my professional goals.
- I felt confident in presenting my final design to the client, and it was really satisfying when I got great feedback on my project.
- Working in collaboration with my mentor was an enriching experience; we were able to share knowledge and explore different ideas and new possibilities that I would have never imagined.
NEXT CASE STUDY
Memories B2B Experience