The problem
People who want to get into hiking usually don’t know how to get started, who to go with or even what gear to wear. A lot of websites cater well to experienced hikers but not so to new hikers further deterring them away from the world of hiking.
Role- UX designer
The product
A hiking website that shows different trails in the UK, allows users to plan hikes, buy hiking gear, and also shows the health benefits of hiking.
Framework- Design thinking model
The goal
To create an aesthetically pleasing user-friendly website that caters well to new hikers.
Duration- 4 weeks
-
![]()
-
![]()
-
![]()
-
![]()
-
![]()
-
![]()
New List Item
Empathise
Summary
I conducted interviews because I wanted to understand the thoughts of both new hikers and people who have hiked before. I wanted to put myself in their shoes to see their views on hiking and to find out whether a website like this would be useful. The age range for interviewees was 20 - 30 year olds from diverse backgrounds, Inclusivity was key for me to gain a wider understanding of this subject.
Research goals
-Would a hiking website that helps a new hiker get started be useful?
-Do users have friends who hike?
-What are the factors that may stop someone from getting into hiking?
-How difficult is it to find information on trails?
-Do people know about the health benefits that come with hiking?
-Do people know the appropriate clothing to wear for hikes?
-Can joining hiking be a good way to make new friends?
Empathy maps
-Not knowing what gear to wear.
-Hiking is a great way to be active and bond with people.
-Lack of motivation to go hiking.
-Not knowing where to go hiking.
-The weather stops some from going on hikes.
-Going on hiking websites that have too much hike jargon demotivates them.
-Becoming discouraged about hiking due to visiting non-user-friendly websites.
-Not feeling welcomed as a new hiker on certain hiking websites.
-A hiking website that helps a user who is going on their first hike.
The user personas were created to help further understand and empathise with the target user, these fictional characters represent the people I interviewed. One persona represents those who have been hiking before and the other represents those who have never been hiking.
User stories
Common themes from the interview
Farzana- As someone who has never been hiking, I want to be able to feel prepared by purchasing the correct clothing, gaining the relevant information needed to go on my first hike, and making new friends.
Joe- As someone who has been hiking before, I want to be able to buy new hiking gear to add to my collection so I can go on more hikes, and explore new trails.
User personas
Define
After empathising with the user, I moved on to the define phase in which I used my findings to define the problem. I started this phase by creating problem statements.
Problem statement
Joe: Joe is a Software engineer who needs to learn more about hiking health benefits and go on more hikes because he would like to explore new areas around the country.
Farzana: Farzana is a restaurant manager who needs to get into hiking because she wants to make new friends whilst improving her cardio at the same time.
Big picture storyboard
I then created a big picture storyboard which focuses on the user experience side of things and how the product solves a user’s problems. The problems are not having people to go hiking with and visiting non-user-friendly websites that do not cater to new hikers.
The storyboard revolves around the user moving to a new city and wanting to try new things, they see a TV advert on hiking and feel inspired to get fitter but they realise they do not have friends to go with.
They visit various hiking sites but feel discouraged due to complex jargon, and the lack of usability with those sites. They then find the “Hike” site, join a hiking group and begin to hike with new friends while staying fit.
Ideate
After defining the problem, I began to “ideate”. This section was a good opportunity for me to take all that I have looked into and find a solution to the problem.
IA/sitemap
Structuring an IA for the website was extremely important because it gave me a chance to show where pages were going to be and how to navigate through them.
Competitive analysis
I then realised that I needed to scout what was already out there in the market, I did a competitive analysis and identified three different websites that are direct and indirect competitors. This allowed me to critique and analyse certain aspects around unique value proposition, the user experience, and generally what I thought was good about their content (features) and what I also thought was bad.
Crazy 8’s
I then began brainstorming, I chose to do an exercise of crazy 8s for this.
This exercise involved me splitting an A4 piece of paper into 8 sections and spending 1 minute sketching an idea in each box. The purpose behind this exercise was to generate any sort of idea that came to mind without judgment.
Chosen home page design
I picked different aspects of the layouts in my crazy 8’s exercise to form the design for the home page.
Prototype
Paper wireframes
I sketched the skeleton of each page to then build upon later down the line in low and high-fidelity mockups.
Moving into the prototyping phase was an exciting period for me because it was my chance to show creativity by budling what I had researched and to then create paper wireframes alongside high and low-fidelity mock-ups
Low-fidelity mock up
High-fidelity mock up
User testing
I tested the high-fidelity prototype before creating the final prototype to gain some needed feedback. I tested the prototype on diverse participants in an unmoderated usability study. I used the feedback to make improvements and create the final design. Here are the feedback and improvements:
-The users wanted a more “capturing” and “visually appealing” home page.
-Include a landing page that has a sign-in/sign-up form with the option to use the website as a guest.
-They wanted the design to show the option for users to join hiking groups.
-Some users said they would like to see the pages with a footer.
-Make the shopping page look nicer and engaging.
-A user mentioned that the brown buttons are “off-putting” and don’t mesh well with the rest of the colours.
-On the find a hike page, instead of having the user filter first for trail options to appear on the screen, there should already be trail options for them to pick.
-Re-do the “Induction” page, make it look nicer, and show how users can take their induction, maybe through watching a video clip or some texts or maybe some sort of flow.
Final designs
Final prototype
Final prototype feedback
Person 1- “This is visually pleasing to the eye, I am constantly engaged through the beautiful images and easy-to-read texts”
Person 2- “I like the fact that it gives users the ability to join hiking groups, as someone who doesn’t have friends that are interested in hiking, this would be a great feature for me to use”
Person 3- “The site has a page for purchasing hiking gear, I like this”
Person 4- “The new hiker’s page is a great way to help someone who doesn’t know much about hiking, they can watch the induction video and then choose their hikes in one continued flow”
Person 5- “The buttons work well, they look so cool and well designed”
Conclusion
What I learnt
I learnt a lot with this project, some of these skills were greatly enhanced whilst doing this project, and other skills were newly acquired. A lot of these things I will continue to use for future projects to ensure success, these things are as follows:
-Working towards a deadline
-Creating and using variants in Figma
-Typography
-Layout variation
-Colour schemes
-Thinking with a user-centric approach
Next steps
I would be intrigued as to what a mobile app version would look like, this could be an exciting project I could undertake and liaise with developers to develop.