summit header logo
View Prototype
Project Overview
During my UX Design Bootcamp at BrainStation, we were tasked with completing a Capstone Project to showcase the UX skills we have accumulated from the course's material. The project was an end-to-end UX Design experience that included research, ideation, usability testing, interface design and branding.

I used agile for UX Design by conducting continuous testing, gathering rapid-fire feedback and making quick design iterations after each testing round with respect to the project timelines. The data gathered from the first round of user testing led me to PIVOT my design into a different directions that better serve the needs of my targeted users.
Project Type
Solo
Timeline
8 weeks
Role
UX/UI Designer
Tools
Figma
InVision
Platform
iOS
The inspiration behind the app...
British Columbia (BC) will always have a special place in my heart for its amazing natural landscape, and one of the most popular ways to take advantage of it is hiking. However, it is not always encouraged to hike alone due to safety concerns. As a hiker myself, I noticed how other hikers in my community struggle to find hiking companions with similar schedules, interests and skill levels.

Hence, in the current market, there is an opportunity for a digital solution that allows hikers to connect with each other and organize hiking trips.

Summit App is here to bridge this gap!

Methodology
I approached the project using the Human Centred Design process, which focuses on the user's pain points and motivations.
This was a non-linear and highly iterative process, I had to circle back through many of the steps to make sure the product reflects users' feedback and remains relevant to the targeted users' needs.
Empathize
  • Problem Space
  • Primary & Secondary Research
Define
  • Affinity Map
  • Persona
  • User Stories & Epics
Ideate
  • Task Flow
  • Sketches
Prototype
  • Wireframing
  • Prototyping
Test
  • Usability Testing
  • Design Prioritization Matrix
Refine
  • High Fidelity Prototype
  • Branding
  • Next Steps
Problem Space

"Solo hikers do not have a convenient way to find and connect with other hikers, which makes it difficult for them to find hiking buddies and organize hiking events."

After framing the Problem Space, I conducted secondary research to gain more understanding of the scope of the issues as well as my targeted users' pain points and behaviours. Below are the key points from my Secondary Research that aided my design decisions:
Secondary Research Key Findings

1. It is not advisable to hike alone on certain trails in British Columbia.
2. One in four of motivated Canadian hikers is between 18-34 years of age.
3. Female hikers perceived higher physical, psychological, and social risks than male hikers.
4. Falls and drowning account for 50% of fatal accidents, and drowning is the leading cause of death in national parks
5. Women suffer 55% of non-fatal hiking fall accidents, while men make up 45%.

Hypothesis

“I believe that designing a digital tool to help solo hikers easily find and connect with each other will give them a safer and more enjoyable hiking experience.

I will know this is true when I see the numbers of accidents involving solo hikers decrease even by just 1% or see more positive experienced shared by solo hikers online.”

Assumptions

1. I believe that my users have a need to connect with other solo hikers
2. I believe that the main motivations for solo hikers to use Summit App is to easily plan out hiking trips with other solo hikers
3. I believe that my users would like to learn about other solo hikers’ experience level when they plan hiking trips
4. I believe that one of my users’ main concern regarding meeting new people will be safety
5. I believe that Summit App’s  app biggest risks will be getting enough users at the starting phase

Interview Highlights
User Interviews were conducted as a part of my primary data collection methodology to develop a deeper understanding of users' need, identify information gaps within the problem space & gain empathy for real user experience.
The time constraints only allowed me to conduct interview with 5 participants.
In my future projects, I aim to interview more participants to increase my understanding on real users' motivations, pain points and behaviour.

link to full interview script
Affinity Mapping

The insights from User Interview were categorized into users' pain points, motivations and behaviours to form the Affinity Map. The data showed 3 themes that were opportunities to create a digital solution upon: Scheduling Issues, Different Hiking Skill Levels and Safety Concerns.

Persona

The Persona was created based on the data collected from Primary and Secondary Research

How Might We...

How might we help hikers find each other
by creating an easy way for them to connect digitally
so that they can meet & organize hiking trips together ?

User Stories & Epics

I developed 20+ user stories that captured the needs of my targeted user and grouped them into epics.
This section will only showcase the user stories and epics that are the most relevant to the motivation & pain points of my Persona.

Epic 1:
Finding Hiking Buddies

1. As a hiker, I want to find hiking partners I can trust, so that I can feel safer on my hikes.

2. As a hiker, I want to find people who are interested in the same hikes as I am, so that I can feel better when my partner also enjoys the hike.

3. As a hiker I want to find hiking buddies who are at the same level as I am, so that I can feel better when everyone is hiking at the same pace.

4. As a hiker, I want to be able to report anyone who makes me feel uncomfortable/ unsafe, so that I can feel safer in future hikes.

5. As a hiker, I want to connect with more people who likes to hike, so that I can hike with them in the future.

Epic 2:
Organizing Hikes

1. As a hiker, I want to know exactly which date and what time the hike is, so I can see if it is suitable for my schedule.

2. As a hiker, I want to communicate with all the members in the group, so that I can feel safe that everyone is on the same page.

3. As a hiker, I want to know exactly who is coming on the hiking trip, so I can feel secure about my hiking partners.

4. As a hiker, I want to know the name of the trail, so that I can do my research before the hike.

5. As a hiker, I want to know the exact meeting location for the group before the hike, so that I can show up at the right place and the right time.
Task Flow

From the Persona & User Stories, I created a user task flow to help me design the wireframe of the app.

Sketches

I started off with sketches to quickly get my ideas on paper, make quick iterations to help guide my wireframing process.

UI Inspiration Board

I put together an UI board to get design inspiration for specific elements for the app including location section, event section, buttons, fields,...

View full UI Inspiration Board here

Moodboard

Before creating the moodboard, I set the themes on what I want the users to feel using my app. As a designer, the moodboard helped me  to get a feel of the app’s UI, set the tone before designing and explore color choices.

view full Moodboard  here
Active
Modern
Adventurous
Exhilarating
Neutral
Fresh
Greyscale Wireframes

I started off with the greyscale wireframe to demonstrate my initial task flow.

User Testing Highlights

2 rounds of online user testing were conducted, iterations were made after each round.
5 individual user test sessions per round.

Initial Purpose of User Testing: to see if users can successfully find a hiking buddy and invite them on a hike using Summit App.

User Testing Results from Round 1

According to user feedback from the first round of user testing , most opportunities of improvement lies in Task 3: Invite chosen hiker on a hike since only 2/5 users can complete the task with no difficulties.

Pivot

Based on the valuable feedback from the first round of user testing, major changes were made to the prototype to help create a design solution that is more suitable for the Persona’s motivations, frustrations and behaviours.

The challenge for me as a UX Designer in this project is to manage drastic changes to the task flow within a tight timeframe. I created Design Prioritization Matrixes to helped me identify & prioritize the High Impact design interventions and saved the Lower Impact ones for next steps. Said iterations helped the digital product better tackle core user epics of Finding Hiking Buddies & Organizing Hikes and were reflected in the new user tasks for User Testing round 2.

Purpose of the Second Round of Testing: to see if users can successfully create a hiking event and invite hikers from their friend list and hikers outside their friend list to join the event.

User Testing Results from Round 2

In the second round of user testing, all users could finish the required tasks. Most opportunities of improvements lie in making the UI features more in tune with each other.

Mid Fidelity Prototype

The Mid Fidelity Prototype was created after the first round of user testing and incorporate user feedback from this round. The task flow was expanded in order to better reflect user needs regarding organizing hiking events and finding hiking buddies

Link to mid fidelity prototype
Design Prioritization Matrix

I gathered the user testing feedback and create a prioritization matrix to help guide my iterations

Iterations

Many changes were made between the first and last prototype based on usability testing feedback in order to improve users' experience. Below are the most notable changes.
Overall, the iterations helped improve the app's usability based on the heuristics of User Control & Freedom, Visibility of System Status, Error Prevention and Flexibility & Efficiency of Use.

High Fidelity Prototype

The High Fidelity Prototype is created after 2 rounds of user testing and iterations

View full high fidelity prototype here
Current Accessibility Considerations
Colorblind friendly
UI color palette
Contrast in UI passes
WCAG 2.1 level AAA
Inclusive copywriting
Brand Identity

In this project, I had full creative control of the brand identity from font, colours, wordmark to logo.
The brand identity for Summit was developed based on the UI inspiration board.
I wanted to incorporate modern, minimal design that echos the calming feeling you get from being in nature.

Wordmark

I started the ideation process for my wordmark by testing out different fonts and graphics. I did a survey among my cohorts and educators and make iterations based on there feedback.
The final wordmark uses the font Becalar with the letter "i" being modified to symbolize the top of a mountain.

App Icon

I started experimenting with the logo on Figma. I knew I wanted mountain tops in my design to stay consistent with the app name - Summit. I also wanted the app logo to have the brand's primary colours.

TADA THE FINAL PRODUCT !!
The icon is inspired by the abstract form of mountains and was design with simplicity in mind to aid scalability. Original size: 1024 x 1024  (iOS app icon standard measurements)

Marketing Sites
Desktop

The site visitors are immediately welcomed with a powerful hero image and preview of the app's interface followed by key stats to establish trust. The Marketing Site also give the users a snapshot of the basic function of the app and testimonials from existing users.

Mobile

I created the Desktop version of the Marketing Site first then scaled the components down to create the mobile version. I moved the download CTA & social links to the hamburger menu to make better use of real estate and make it more accessible to users.

Tarot Cards of Tech

The Tarot Cards of Tech encouraged me as a Product Designer to think more critically about the potential influence of my product.

I picked the Super Fan card for Summit App because I want to explore how the users will interact with the app if it does well.

Summit App's goal is to create an engaging community of hikers who operates upon respect for each other.

The community can be an asset when the user base helps increase brand's influence, radiates positive energy and empower more users to hike and be out in nature. On a business standpoint, having an engaging community of users can be an asset to develop more profitable products such as a subscription program, premium profiles or offline trail maps available for purchase. The community can become a liability if the users do not mistreat each other and give the app a bad reputation.

Since my product involves discourse, positive communication would reflect respect and friendliness. On the other hand, negative communication might take the form of discriminatory remarks or harassment. In order to prevent this, user should be able to report accounts that make them uncomfortable after interaction. Additionally, there should definitely be Community Guidelines in place to maintain the respectful of communication between users.

Key Learnings & Next Steps

This project has been a wonderful learning and growing experience for me as a UX Designer. The biggest takeaway for me was to be ready and open to change and trusting the agile process. When I first started the ideation process for Summit App, I had an entirely different idea of what the final product would look like in terms of user interface and task flow. However, the data from usability testing showed me that I had to pivot my product in order to satisfy the needs of my targeted users.

The users are the core of the design process and even though it was a challenge to make such a drastic design change in such a tight time frame, I chose to listen to user feedback and prioritize high impact iterations to improve the overall user experience. In the end, my effort was paid off when I saw the task successful rate improved from 60% to 100% in my second round of testing. 

As for what’s next
, I would love to conduct more testing with my high fidelity prototype to improve on the aesthetic design and usability, as well as fine-tuning my logo and branding

Overall, I thoroughly enjoyed the whole design process with all the ups and downs. I’m excited to use what I’ve learned in this project to design more human centred digital solutions in the future!

More Projects...

< TIES Website Redesign

Scotiabank x BrainStation >