Trailsummit

An online exploration and collaboration tool to kickstart your mountain bike adventure abroad. Browse, book and ride!

Exploration is a defining element of distinct human identity. A great way to explore our surroundings is by mountain biking, offering new perspectives on our environment.

As a speculative project, I worked with public data and interviewed fellow riders for information about the target group. 2020

digital interaction research web app

The app

‘Trailsummit’ tries to fill the space of mountain biking and travel, filling the gap in already available sports and travel-related apps. Trailsummit is more inclusive than existing tools: Strava is focussing on users’ own and friends’ 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 the essential adventurous feeling. The combination of filtering and planning functions posed a new and complex problem to be solved.

Figma prototype

This video shows the interactive prototype of the Trailsummit app.

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.

The strategies I used were collecting quantitative data from the internet and collecting qualitative data by conducting 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 user stories

The insights from the interviews and collected data from available resources together formed the epics. Each epic is broken down into user stories of the three archetypes of users. The stories were beneficial during the design of the app to encourage a user-oriented mindset when thinking of the 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 valuable to incorporate into 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 as a starting point, I put together a rough step by step flow incorporating all important items from the value map, taking into mind users and stakeholders. 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 emotions. 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 the 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 exactly how 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

A stylescape was made to explore what the brand could look like. I used layout inspiration from the 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 heavyweight. 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 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 the 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.

Design elements

Interface elements for the Trailsummit exploration tool. Atomic designs’ atoms and molecules.

Explore tool design

The exploration tool of Trailsummit consists of a large screen-filling interface including a map and an information panel. The user can switch between explore, a list with saved items and the route planner within the information panel. The explore tab in the information panel provides search of stays, trails and other points of interest such as bike shops. This interface uses a topography map, the second image in the carousel shows the app with satellite content.