UX/UI DESIGN - CONCEPT PROJECT
Redesigning AllTrails: Reinforcing the Planning Process
Overview
Venturing out into the wilderness can be both exhilarating and stress relieving, especially when you have an idea of what to expect. AllTrails, a popular crowdsourced adventure platform, has been a reliable application for planning, recording, and reviewing hikes, but lacks certain features to assess current trail conditions. Our goal was to improve upon specific aspects of AllTrails that could help hikers feel more prepared for their outdoor adventures in a shorter amount of time.
My Role
I led the UI design and shared the responsibilities of user research, journey mapping, prioritizing features, prototyping, and usability testing.
*Note: This was a concept project and is not affiliated with AllTrails.
Team
UX/UI Designer - Mel Mogensen
Product Designer - Cheryl W. Yu
UX Designer - Brent McCormick
Developer - Arjun Singh
Project Type
Mobile App Redesign
Concept Project
4-week sprint
Tools
Figma, Adobe Illustrator, Adobe Photoshop, Miro, The Noun Project, Google Suite, Zoom, paper & pen
The challenge
Redesign the highly regarded AllTrails’ mobile application to enhance the user experience.
Discovering room for improvement
In order to understand how we could best improve AllTrails’ experience for the hiker, we evaluated the UX of their mobile application by performing a heuristic evaluation.
Heuristic evaluation of AllTrails’ current mobile application
To validate our assumptions, we conducted an online survey that received 28 responses and 5 interviews of people who had used the app. These responses were transferred into Miro, where we used affinity mapping to interpret common themes.
Key findings:
Hikers tend to use reviews to check on trail conditions
They reference photos to assess the difficulty of the terrain
They spend most of their time within the app deciding on which trail to hike
“Planning a hike can sometimes be unintuitive…the photos aren’t great, there isn’t a lot of context about what to pack, and more spots to stop could be indicated.”
- Regular AllTrails user and experienced hiker
Based on the responses to our survey and interviews, we generated a persona of our “seasoned hiker”, Sheena, to better understand the user’s needs. I then created a journey map to help my team visualize Sheena’s interaction with AllTrails throughout her hiking experience.
Journey map for our persona, Sheena, the seasoned hiker
Since multiple issues occurred while the user is planning a hike, we narrowed our focus on this portion of the hiker’s journey.
Problem Space
How might we provide a way for hikers to make quick, informed, and confident decisions when choosing a trail?
Defining key improvements
We brainstormed possible solutions and plotted them on a prioritization matrix to compare technical feasibility with value to the user.
We experienced challenges to keep critical functions, such as GPS and data capabilities, in mind. Features that required the user to be in cell range were placed lower on the feasibility scale since you often lose reception on hikes.
Features that were ranked as having both a high degree of feasibility and value to the user were prioritized.
Feature prioritization matrix
My task was developing the UI for these 3 features:
Search bar in the review section
Photo detail and gallery organization
Trail comparison
By making these updates, we believe that we will see increased usage of the AllTrails application, a reduction in the time required to plan a trip, and increased trust in the brand.
How everything fits together
With AllTrails being such a robust app, there were many interactions between features that we needed to be aware of. To understand how everything fit together, we created a wireflow.
Wireflow for incorporating new features
We mapped out specific flows that incorporated our new features and prepared them for the first round of usability testing with our MVP.
Testing initial ideas with our MVP
Before polishing UI elements, my team and I first tested our minimum viable product (MVP), which was intended to test the functionality of interactions. We tested 5 users over Zoom and also conducted unmoderated user testing on Maze to get supplemental data.
Trail comparison screen
Segmented photo gallery
Check trail conditions
From our testing results, we found that:
Simplicity was key. If too many steps were required to accomplish a task, the user would consider using another source
Some affordances weren’t as obvious as we intended and were overlooked by the user
Users did not find certain icons to be intuitive
From these insights, it became clear that UI design would have a big role to play in the next iteration of our prototype.
Increasing fidelity to test UI elements
Due to time constraints and for the purpose of exploring UI elements, we moved forward with applying this feedback to our high-fidelity prototype rather than testing another round of the MVP.
As mentioned earlier, these 3 features were developed to assist the hiker in their planning process:
Feature 1 - Adding a search bar to filter reviews
During user interviews, hikers reported that they used the review section to check trail conditions, such as water availability or snowfall, but there was no way of searching for a specific keyword. To save them time in sifting through reviews, I added a search bar within the trail review section.
Feature 2 - Organizing images to give context on trail conditions
Hikers commonly reference images to assess the terrain of a trail, but had difficulty determining what time of year each image was taken due to the homogenous gallery. This lack of context caused hikers to spend more time caused hikers to hesitate while committing to plans. I aimed to solve this issue by providing more image details, including date and location, to allow hikers to make more informed decisions.
Feature 3 - Comparing multiple trails on a small screen
We observed hikers toggling between 3-4 trails after deciding on an area of interest. Surprisingly, hikers still used AllTrails’ mobile application for planning, as opposed to desktop, since they preferred accessing it while on the go. Due to mobile screen constraints, hikers were forced to open/close trail cards and remember specific information from each trail, increasing cognitive load. We addressed this issue by designing a way for hikers to directly compare multiple trails at once.
Enhancing the look & feel
To ensure all elements were kept consistent and flexible throughout the design process, I created a style guide that housed components, colors, typography, and icons. We decided to maintain the general style of the product for brand integrity while using an 8pt grid and adjusted specific assets to increase usability.
Colors
Typography
Icons
Buttons
UI Alterations
Current App - Trail Screen
In certain cases, the icons overlaying the trail image, such as the back and ellipsis buttons, were difficult to see if the image was busy or light in color. Important buttons had low reachability, requiring more effort to access by the user.
Current App - Map Screen
While using AllTrails’ map function, users reported the issue of not being able to differentiate certain icons, like the Camp and Peak icons.
Redesign - Trail Screen
Icon legibility was increased by adding a white background. I referenced apps like Airbnb that display a similar range of information in a minimalist style. Important buttons were moved lower on the screen to increase reachability.
Redesign - Map Screen
Icons were differentiated using color, so that the user can interpret the map quicker. This prevents the user from having to zoom in to distinguish the icons.
Results & reflections
Redesigning a product that I am a user of myself was challenging in that I constantly had to be aware of the false-consensus effect, or projecting our behaviors and reactions onto users. I had to divorce my opinion from my users and remind myself that I am not my user and my opinion does not count. In the process, I learned to talk to and really listen to our users in order to design a solution they need, not something I think they needed.
Most notably, this conceptual project allowed me to delve deeper into UI design than I had in previous projects and I really enjoyed taking the lead in this role. By examining the interface of an existing, successful product, I was able to interpret the reasons behind certain design decisions. I put time into developing a robust design system to keep us aligned while prototyping and this gave me extensive practice with creating component variants and complex wireflows.
I’m grateful to have had the experience of working with a team that gave me fresh perspectives on new concepts and I’m excited to apply these learnings to future projects!