HikeCompass
Customised hiking recommendations according to your location, preferences and skills.
PROJECT OVERVIEW
TIMELINE
8 Weeks | Part-time
TOOLS
-
Figma
-
InVision
-
Photoshop
-
Pen and Paper
MY ROLE
UI and UX Design:
User Persona | User Journey | User Flow | Research | Usability Testing | Interactive Design | Wireframing | Prototyping | Animation | Mockup
THE CHALLENGE
To design a responsive web app that provides location-based recommendations, meeting user requirements and addressing issues found in similar existing apps.
THE ISSUE
Many existing hiking apps fall short of delivering all the necessary information for hiking, forcing users to juggle multiple apps for route planning.
THE SOLUTION
An intuitive web app that simplifies hike planning and enhances the overall experience by offering essential features in an all-in-one platform.
DESIGN PROCESS
I employed the Design Thinking Process to define the main problem while exploring alternative solutions. This user-centred approach ensured the final product effectively addressed user pain points and delivered a satisfying experience.
DISCOVER​
Competitor analysis
User research
User interviews
DEFINE
User personas
Minimum Viable Product
Jobs To Be Done
IDEATE
User flows
Interactive prototype
Usability testing
DESIGN
Mood board
Wireframes
Style guide
DELIVER
Responsive designs
Mockups
All the information you need for your hiking trips
in one place
HikeCompass
UX DESIGN
Discover
In this phase, I dived into COMPETITOR ANALYSIS and got to know potential users through USER INTERVIEWS. It resulted in a better understanding of INDUSTRY TRENDS and USER PREFERENCES. Thus, setting the stage for for a user-centric and innovative UI/UX design approach that would click with the audience and make the project stand out in the market.
COMPETITOR ANALYSIS
STRENGTHS
-
Intuitive design and easy navigation makes it accessible to all users.
-
Focus on mobile app, catering to the growing trend of users relying on smartphones for accessing outdoor information.
WEAKNESSES
-
Advanced features and additional trail information are only available through premium subscription, limiting access for budget conscious users.
OPORTUNITIES
-
Expand into more international markets.
Collaborate with well known brands / travel agencies could open new marketing channels and provide added value to users.
TREATS
-
Travel blogs that focus on highlighting the best local spots.
-
Sites such as TripAdvisor and guides from Lonely Planet, as well as other similar applications like Viator.
AllTrails
STRENGTHS
-
It caters to various sports, setting it apart as a specialised platform for outdoor enthusiasts.
-
Its extensive international community and its collaboration with popular brands and industries.
WEAKNESSES
-
Expanding coverage to less traveled areas might be a challenge, as its database is focused on popular regions.
-
It's diverse sports offerings might hinder its ability to provide a specialised experience for hikers.
OPORTUNITIES
-
Expand to new geographic regions.
-
Collaborate with platforms like Google Maps or Street View Images to access and integrate routes from less traveled regions instead of solely relying on user based content.
TREATS
-
Rival platforms may introduce new and attractive features that challenge its position.
-
Komoot must address data privacy and security concerns to maintain user trust.
USER INTERVIEWS
As a first step, I conducted user research and user interviews with 5 experienced and novice hikers, each participant with a minimum of 6 hiking experiences per year. The goal was to learn more about the hikers' behaviours, decision-making processes, and their experiences with existing hiking platforms.
FINDINGS
-
The difficulty of finding a reliable and easy-to-understand hiking app.
-
Not having real-time updates on the trail's conditions.
-
Having to search through different platforms.
-
Annoyance when having to purchase a premium subscription to use specific features.
GENERAL FRUSTRATIONS
-
Be able to accurately report safety issues of a specific trail point.
-
Share hidden scenic spots along the trail
-
An interactive and easy way to see the routes’ difficulty level.
-
Having an accurate and descriptive weather forecast.
WHAT THEY FIND ESSENTIAL FOR HIKING
Define
Based on user research finding USER PERSONAS were created. This helped become familiar with the characteristics and needs of potential users. After that, a MINIMUM VIABLE PRODUCT (MVP) was outlined to identify the features that were most important to include in the first iteration. I then used a JOBS TO BE DONE framework to understand the motivations behind user actions and find design solutions that fulfilled the MVP requirements. This approach consolidated the product idea, making it both FUNCTIONAL and ATTRACTIVE to users.
USER PERSONAS
1
2
3
MINIMUM VIABLE PRODUCT
Provide users with a comprehensive, easily accessible, and detailed list of nearby hiking options. Thus, allowing them to make well-informed route choices, save their preferences for later, and significantly reduce the time spent on research.
THE OBJECTIVE
JOBS TO BE DONE
NEED
“When something doesn’t go as planned, I want to be able to change my route on the spot, so I can still enjoy my day outdoors.”
WHY?
Hikers prioritise safety, making access to accurate technical data crucial for trip planning.
HOW?
Displaying technical data within the app: Distance, Elevation gain, Terrain type, Weather, and Photos.
NEED
“When I search for a hiking route, I want to do it in the fastest and simplest way, so I can go hiking as soon as possible.”
WHY?
Hikers prioritise adaptability and ensuring that their goals are achievable despite unexpected circumstances.
HOW?
Ability to input a desired location and receive a curated list of hiking options.
NEED
“When I choose a hike, I want to see all the relevant technical data, so I can prepare everything I need and safely enjoy the hike.”
WHY?
Seeking hassle-free experiences, hikers need an easy-to-use app that allows them to quickly access information.
HOW?
At home: Access information with the less amount of steps required.
At the route: Access already browsed hikes.
UX TO UI DESIGN
Ideate
This phase was all about finding CREATIVE SOLUTIONS for users' needs while ensuring usability and user-centric design. A MOBILE FIRST APPROACH was taken, starting with a USER FLOW to map out key app pages and user paths. Next, a RAPID PAPER PROTOTYPE was crafted and a USABILITY TEST was carried out on potential users. The goal was to address PAIN POINTS early on, avoiding costly revisions in later stages.
USER FLOW
.png)
USABILITY TEST
POINTS TO EVALUATE
-
User-friendliness of "Discover" and "Search Result" features.
-
How quick and easy it is to access specific trail information.
-
Clearness and usefulness of the trail's technical data.
-
Usability and acceptance of "Saving" feature.
PARTICIPANTS
5 experienced and novice hikers with a minimum of 6 hiking experiences per year.
FINDINGS
SOLUTION:
ISSUE:
Unclear how to navigate to the saved elements.
Confirmation message missing after saving a hike.
After saving a hike, there is no option to navigate back to the last viewed hike.
Place a link to the "Saved Items" screen in the dropdown menu.
After a user saves a hike, display a clear confirmation message, such as "Hike Saved," or a checkmark icon near the saved item.
After displaying the confirmation message for the saved item, the close button will take the user back to the last viewed hike.
UI DESIGN
Design
Usability test insights were used to create MID-FIDELITY WIREFRAMES, which were iteratively improved for better USER-FRIENDLINESS and USABILITY. A comprehensive STYLE GUIDE was established for CONSISTENCY across screens and facilitate the incorporation of UI ELEMENTS. The style guide was created through a BRAND DESIGN process using a MOOD BOARD for inspiration.
INSPIRATION
BRAND DESIGN PROCESS
Heading 4
Heading 4
Heading 4
Heading 4
Heading 4
Heading 4
Heading 4
Heading 4
Heading 4
STYLE GUIDE
WIREFRAMES EVOLUTION
LOW-FIDELITY
MID-FIDELITY
Deliver
MOBILE DESIGNS
Discover new hikes near you
Find the best routes in your desired locations
All the information you need to plan your hike
at a glance
Detailed weather forecast
and inspiring photos
Log-in or create an account to access your data
Save and organise your favourite rotes...
... and access them with just a few taps
Plan your hikes from the comfort of your own home
RESPONSIVE DESIGNS
Access saved hikes and find new routes, anytime, anywhere
HIGH-FIDELITY WIREFRAMES + MOCKUPS
RETROSPECTIVE
The designed app met the challenge of being a responsive web app that provides location-based recommendations for hikers.
WHAT WENT WELL
The success was achieved due to the following:
-
A user-centred approach was followed throughout all UI and UX design stages.
-
Valuable user feedback was integrated to refine the project into a functional first iteration.
-
The style guide was created smoothly and enjoyably, ensuring visual consistency across screens.
-
Responsive grids were used to create sleek app designs that adapt to various screen sizes without distortion.
WHAT CAN BE IMPROVED
Looking ahead, one main opportunity for growth lies in dedicating more time to the UX design phase, especially for an in-depth competitor analysis. A deeper understanding of existing hiking apps could have helped speed up the project, allowing me to design tailor-made, innovative solutions right from the project's early stages.
I would prioritise additional user testing and research to refine the essential features already implemented in the first iteration. Additionally, I would work on bringing to life the "nice-to-have" features that were identified during the definition of the product's MVP.
These features are:
-
Display hidden gems close to the trail.
-
Classify hikes by their level of difficulty.
-
Additional trail information such as: UV index, mosquito index, and wildlife sightings.