AllTrails Video Case study
What is Alltrails?
AllTrails helps people explore the outdoors with the largest collection of detailed, hand-curated trail maps as well as trail reviews and photos crowdsourced from a community of 10 million registered hikers, mountain bikers and trail runners. AllTrails has built the most complete, accurate, and global dataset for off-road recreation ever, along with the easiest-to-use product suite that helps users find, customize, record and share outdoor activities and the largest and most active digital community of outdoor enthusiasts.
What was the problem with Alltrails
Research showed us that users were unhappy with the current homepage. Reports said that they couldn't find new locations to visit/hike due to the current interface.
What was my role on the project?
I was the Project Manager & Interaction Designer.
What device did we design for?
IOS.
Who did I work with?
I worked with Brandon Shin a UX Researcher and Michael Tsay a Visual Designer.
What was our design process?
Brandon Conducted User Interviews and Competitive and Comparative Analysis of other competitors. After he completed his work we went over the results and collaborated what we should do going forward.
Affinity Map
How did we measure the usability of the app?
We conducted a Heuristic Evaluation so we could identify usability problems in the user interface design on the AllTrails landing page.
User Persona
The Problem
Solution Statement
Astrid just moved to Seattle and needs to find easy hiking trails in her area. She wants to get out of the city to clear her head and explore what the Pacific Northwest has to offer.
We believe that by redesigning the AllTrails landing page to be more accessible for different user needs, we will achieve a more user-friendly experience. We will know this to be true when app downloads increase, more hiking trails are logged, and more sightseeing spots are shared.
User Scenario
Astrid is a recent transplant to Seattle. Since she’s new to the city, Astrid wants to explore the Pacific Northwest and she needs driving directions to the trails as well as maps of the chosen destination.
Original Landing Page
My first Iteration was very similar to what was already placed on the AllTrails app. I wanted to follow the design guidelines of what AllTrails has already set in place with their users.
Wireframe Iteration 02
In my 2nd Iteration, I added boxes on top and listed categories under them. Hike, Run & Cycling. Through user research, we found that users will use the app to find different locations to venture to for different reasons. Adding this made feature made this easier for users.
Wireframe Iteration 03
Through more user testing and a design studio, we found that a carousel design would be the best option for users to find new hiking spots. This helped limit the endless scrolling through options that users found to be intuitive.
What was the Final Design?
Through the design process, we did not want to have too much of a dramatic change to the AllTrails landing page because, of how large a user base AllTrails has already established. Therefore the changes we made were subtle. Through Research, the core issue that arose was that users mentioned how they didn't think that scrolling continuously was the best way of finding curated trails and hikes. That was the influence behind the carousel feature with three categories.
1. Filter Feature: We found out through Research that users may have specific preferences to where they want to travel and hike to. Therefore, we needed a way so that Specific Users can choose hikes based off of distance, location, difficulty, pet-friendliness, as well as other specific needs.
2. Activity Tab Bar: The main purpose of the Activity Bar is so users can choose different activities based on mood and location, giving them a wide array of possibilities they may want to spend their time.
3. Destination Name: This feature allows users to see the name of the location they want to choose.
4. Pictures of Hike destination: We found out through Research that Users are more likely to click on a picture of a location then the name.
5. Hike Destination Specs: We found through Research that users prefer to see attributes of their hiking destination before they choose. Therefore, we decided to place important information without having to click into the link.
6. Icon Bar: The Icon bar functions as a tool that allows users to change to different pages in the app.
7. Map Feature: The Map Feature was found to be used in a variety of different ways by users. Some used the map to see if hiking destinations are near their location and some used the map to guide them through trails
8. Search Bar Feature: The Search bar functions as a way for users to type in specific hikes that they already know of. As users start to type in the Search Bar, it will give suggestions based on AllTrail's massive curated database.
9. Carousel Scrolling Function: This feature was the most dramatic change in the final redesigned version of the AllTrails app. Through research, we found this to be the best way for users to find new trails without scrolling excessively.
Final Mockup
Visual Style Guide
Brandon
Self Reflection & Final Thoughts
Mike
This was the first design team I had ever worked with where I was put in the role of Project Manager. Such a task may be daunting for some. Luckily I had a phenomenal team to work with. Brandon was new to conducting research and interviewing users, but that did not stop him from doing a great job. He truly came into his own early in his project. Mike, who has a background history in art and photography did a great job adding visuals to my wireframes and made beautiful final mockups. I would most certainly work with again on another project if the opportunity was to arise.
Brandon Shin
User Researcher
- User Interviews
- Findings Report
- Usability Testing
Ian Jackson (Me)
Interaction Designer
- Lo-fi Sketches
- User Flow
- Prototype Development
Mike Tsay
Visual Designer
- Navigation Schema
- Style Guide
- Sitemap
- Hi-Fi comps
Working with Brandon & Mike was a pleasure. Brandon was thorough with his research and produced strong results. Mike is a phenomenal Visual Designer who produced impressive mockups.