B-LINE
UX/UI Design | Brand Identity | Logo Design | Illustration | Promotional Activity
Shillington College of Graphic design Concept Project
INTRODUCTION
The brief
A design for a mountain biking app built with the purpose of connecting with health-conscious individuals who would like to get into the sport as well as catering to already existing riders.
Kickoff
In this project, I took a user-centred design approach that proved to be effective and easy to understand in my design efforts. I found the qualitative research method to be appropriate and the most useful. It consists of foundational research, competitive analysis, user interviews, and persona creation. I started by asking some initial key questions:
Who are the primary users of the app?
What are they looking for?
What do the primary users need the most?
Who do I see as the biggest competitors?
What is the purpose of the app?
These questions act as a starting point to understand the overall context and situation and allow me to proceed to the next step.
The Challenge
Mountain biking enthusiast are looking for an app that will allow them to communicate with a community of like minded people, an app that will allow them to find new biking routes and explore the mountains, to record biking trails and experience these trails with friends.
The Solution
A UI/UX design that uses clear information architecture, content hierarchy and clear use of alignment and graphic elements. An app which allows users to explore and find the information they are looking for with ease.
Discovery
Research Plan
I began by creating a research plan, to align our goals and map out how to get a deep understanding of the users’ behaviours, needs and goals but also why they would want to go mountain biking. Our main goals were to understand:
-
What are the constraints users have when looking for biking trails and their main blockers
-
What motivates users to mountain bike and what they get out of going
Competitive analysis
I audited industry competitors to understand how the existing museum websites are constructed. Several aspects that I reviewed are audience, first impression, user interaction, visual design and contents.
I first analysed the peloton app, to get an in-depth understanding of what users currently experience when entering an app. This also gave me a feel for their existing UI and brand voice.
From here, we did some initial competitive analysis to understand what other apps were offering. I looked at Strava and Peakvisor, as they are they are similar to what I am trying to achieve for the mountain biking community.
Some features that stood out were the minimalistic interface, short and to the point descriptions, easily accessible content, and clear segmentation for different categories and levels.
Competitive analysis was a tool I used throughout the design process and came back too often. I found referring back to our competitors’ apps, features, wording and flows incredibly insightful for inspiring what I did and didn’t want to achieve and include in our solution further down the line.
User Interviews
With the research plan and initial competitive analysis complete, we started interviewing. We established the participant criteria as users who want to mountain bike . We interviewed 6 users who fit the participant criteria, focusing our questions on:
-
How users find trails
-
Users’ emotional responses to mountain biking
-
What users think a positive biking experience is
-
Users’ motivations for mountain biking
Key Insights
These key insights fit into 3 main trends:
-
Users prefer finding the right level for them, in order not to start a trail they will not be able to finish.
-
Users feel more secure when riding trails that have been done by other people on their level.
-
Users want to record and share their achievements, so they can meet new people at their level and socialise with people with the same interests.
Reviewing the insights gathered so far highlighted that the focus going forward would be on users feeling prepared and knowing what to expect at museums, as this encompasses users’ key pain points. Therefore, this is the problem that we focused on solving as we moved through the rest of the design sprint.
Define
Persona
Using these insights, I discovered the persona. Sarah is a College student living in Geneva, Switzerland. she is looking to learn a new skill. She would like to socialise with her friends while doing an activity they might all enjoy. She is looking to build her confidence and stay healthy. She is always looking for a new challenge to overcome.
Problem Statement and How Might We Statement
With Sarah’s needs, goals and pain points clear, we workshopped and iterated on multiple problem statements to come up with the final statement to guide our design decisions moving forward and ensure that both the designers and stakeholders were united on the problem, its significance and who it was impacting. We also came up with a How Might We statement, as a starting point to begin exploring potential solutions and ideas to solve the problem:
Problem Statement:
Sarah needs a way to feel prepared about the trail she is going to undertake, because she needs to make sure that it is at her level, and she wants to make sure that all her friends enjoy the experience.
How Might We Statement:
How might we create a app that is easy to manoeuvre for the individual
who is curious about mountain biking, so that they can have an entertaining and social biking experience.
Develop
Design Studio
I then ran a design studio, where I had 6 minutes to sketch some ideas for solutions, which would be presented back to peers and vote on which to iterate on
Iterating on these solutions after the workshop provided a key learning for me as I realised that moving through new ideas was a more efficient problem-solving technique than defending solutions that only some of my peers were backing. In order to come to a valuable solution, I continued iterating and the more ideas I put forward, the better they became.
User Flow
I constructed a user flow for the persona from start to finish as they might have different journeys. This helped me in understanding the ways the user might interact with the product, as well as allowing me to see navigation through user goals. The user flow will predict how my persona might carry out the task.
Mid-Fidelity & UX Writing
After collating and refining our final ideas, we turned our low-fi sketches into mid-fidelity wireframes.
User Testing
We then conducted semi-guided, moderated tests with 5 users matching the persona to test the usability and desirability of the content in the mid-fidelity wireframes.
Overall, the feedback from testing was positive and users suggested they’d like to explore the features further. There were some usability changes to make, e.g. adding categories to the nav bar, changing some of the content and restructuring the home page.
UI Design
After making some final changes, it was time to finalise the UI elements and move on to high-fidelity. I decided to give the website a different identity, using different colours and graphic elements.
Deliver
High-Fidelity Prototype & Solution
To round off the project, we presented the final prototype to peers, taking them through our findings and how we got to the final designs.
Wanderer Magazine
Editoral Design
Manchester International Festival
Brand Redesign