Trailsummit
An online exploration and collaboration tool to kickstart your mountain bike adventure abroad.
Exploration is a defining element of distinctly human identity. A great way to explore our surroundings is by mountain biking, giving new perspectives on our environment. As a mountain bike enthusiast, I challenged myself with this project to come up with a new approach to search and plan a mountain bike trip.
‘Trailsummit’ tries to fill the new space of MTB and travel, between existing sport and travel-related apps. In comparison: Strava is focussing on my own and friend’s efforts by analysing data. Trailforks is oriented on trails but has a pragmatic and complex interface. Mtbroutes.nl has great content about trails but is missing any adventurous feeling. Combining the functionality to filter and plan introduced a new and complex problem to be solved.
This design consists of a personal project, currently a work in progress. The aim of this project is to showcase my digital user experience knowledge to supplement the physical user experience projects in my portfolio. As a speculative project, I worked with public data and interviewed fellow riders for information about the target group.
Phase 1: Research - Customer profile
To understand who I would be designing for, I created customer profiles. The profiles explore jobs to be done, pains and gains of the user, which later were sorted by importance. Of course, taking into account the different types of riders there are. For this exercise I also user trigger questions from Strategyzer, which came in handy.
Strategies I used were collecting quantitative data from the internet and collecting qualitative data by conducting in-depth interviews with fellow riders. The interview focussed on their core needs, motivating factors and concerns while searching for new trails and stays.
Personas
Personas are made from the customer profile for a better collective insight of the users. They helped empathise with the users and to keep them in mind at all times during the design process. The people in the personas represent different archetypes of mountain bikers with different motives and needs. These personas helped me balance out my biases as a mountain biker myself while designing.
Epic and user stories
The insights from the in-depth interviews and collected data from the internet formed the epic’s. Each epic is broken down into user stories of the three archetypes users.
The stories were beneficial during the design of the app to shift my focus to a more human manner when thinking of features.
Competitor benchmarking & landscape analysis
After creating an understanding of the users, I searched for other platforms that could serve them. I analysed various other relatable platforms like trail databases, accommodation booking platforms and sport activity trackers.
Analysing these competitors, I looked at the strengths and weaknesses of their platform, style and quality of their content, the presentation of this content and graphic design. These analyses revealed opportunities for content strategy and design choices to avoid for the new platform.
Visual analysis
The visual analysis of competitors and other platforms in the sport/travel landscape showed besides strengths and weaknesses, common patterns. Mental models may be worth to incorporate in the design of Trailsummit to reduce new and complex interfaces.
Phase 2: Analysis - Value map
The value map exists of the services, pain relievers and gain creators of the new platform Trailsummit, in reaction to the users’ needs. Also included are relevant opportunities from the competitor and landscape analysis. These three groups of cards were sorted by importance to the user: having the greatest impact, rated the most important to develop.
Content strategy
With a system map, I put together a rough step by step flow incorporating all important items from the value map, taking in mind user and stakeholder. This map enabled me to understand which type of content is accessed at what touchpoint.
Journey mapping
With the system map as a start, the user journey was created by making it more detailed and incorporating user needs and emotion. While making the map, I kept in mind to focus on the performance indicator being ease of filtering and creating a route.
The user journey contains anticipated emotional experience of the user, their state of mind and goals. For the organisation side, the map includes company goals, user pain points to overcome and opportunities that will uplift the user experience.
Phase 3: Branding - Value proposition
Quickly prototyped value proposition directions enabled me to pinpoint how exactly Trailsummit will create value, and how it communicates this. This resulted in various ‘pitchable’ sentences.
Brand values + position
The character of the brand is defined by filling in brand attributes that match the user profiles and value proposition. Taking into account the mission and vision of Trailsummit. The various categories are used to define the values that dictate the tone of voice, visual identity, motion design and more.
Systematically positioning the brand by weighing in levels of consumer behaviour resulted in a clearer plan for communication and design.
I also positioned the brand in the EURIB brand positioning cube. This position is achieved with 3 psychological dimensions based on consumer behaviour:
– Conation: promise of excitement and adventure. Perceived thrill.
– Affection: promise of enabling consumers to make memories, sentiment emotion.
– Cognition: promise of data about trails and stays to educate. Perceived for knowledge.
Stylescape
The stylescape was made to explore how the brand could look like. I used layout inspiration from the competition and landscape analysis to incorporate common design patterns. Besides style, I also explored the design of key UI elements in this stylescape.
A complementary colour combination is chosen consisting of orange and green. The bold main colour orange is desaturated but bright. It evokes energy and expresses friendliness and playfulness. The green colour is more neutral. Psychologically it is the colour of balance and harmony and it emits some of the intellect of its neighbouring blue. The two main colours are accompanied by a warm pastel accent colour.
The typeface combination consists of two typefaces plus an additional one for information bites. Raleway is used for headings and subheadings, in a heavy weight. The geometric sans serif font communicates activeness and boldness. Founders Grotesk Text, is used for body copy. The font used has some quirkiness to it as is it is inspired by classic grotesks. For short information bites, IBM Plex Mono is used. This font has a more technical feel to it that matches the display of information that it will be used for.
Phase 4: Prototype - Flowchart
The flowchart displays navigation flow and the content blocks of all pages. This overview was helpful while sketching out the wireframes.
Wireframe sketches
First wireframes were made low fidelity by sketching. I made sure to cover the MVP first (map search and list collaboration), and worked around this. Following the principle of Jakob’s Law, the menu of the main map search is positioned on the left side. To leverage existing mental models of the user, having knowledge of familiar products such as Google Maps and Airbnb.
High Fidelity Prototype
Digital wireframes were made using Figma, according to the low fidelity sketches. I printed these prototypes out to easily make notes and iterate the design with pencil. I found this step helpful, by printing out the design I looked at it from another perspective than using Figma.
Interactive prototype
Work in progress.