UX RESEARCH • VISUAL DESIGN • PROTOTYPE
Discovering new hiking adventures through full transparency of reviews and photos of existing popular destinations by real hikers.
CLIENT: Oakey
ROLE: UX Designer, Visual Designer, UX Researcher
TOOLS USED: Adobe XD, Miro, Whimiscal
TIMELINE: 3 weeks
PROBLEMS
Hikers have difficulty finding an appropriate trail route to explore. Most hikers often visit multiple platforms, such as Facebook, Yelp, Google just to find a new spot. Visiting multiple platforms is not efficient and doesn't save time. In addition, hikers want to see actual reviews of places from real people who have been there before before making a final decision on a place to visit.
MY SOLUTION
A mobile application to show all nearby trail routes by popular categories and showcasing reviews by verified people who have visited the place. This mobile application offers photos by real users of the platform to ensure that the trail route is appropriate for users to travel to. With transparent information about the trail route, hikers can turn to this application as their one-stop application to discover new routes.
01 - Research & Discovery
USER SURVEYS & INTERVIEWS
To better understand the behaviors of avid hikers, I sent a survey out to multiple groups of people who are in various hiker clubs, including the Los Angeles Hiker Club. Out of the 20 participants, I received some very interesting insights to help me paint the picture of common problems and issues that they were having while discovering new hiking trails.
IDENTIFYING PAIN POINTS & NEEDS
From my surveys, I was able to recruit 3 people to participate in user research interviews. Through these virtual interviews, I asked specific questions regarding their traveling behaviors, particularly when it comes to hiking.
After the interviews, I was able to narrow down some pain points and needs that this mobile application should do:
- Provide one meaningful way to look for hiking resources, rather than shopping various platforms. Many go to Yelp, Facebook, then Google Maps which can be very tiring.
- Photos play an important factor when making a final decision whether or not someone chooses that route or not.
- Clear information should be presented before a user embarks on their hiking adventure. Users find it confusing when trails are misled or inaccurate with estimated time information.
COMPETITIVE ANALYSIS
Looking at two main competititors, Yelp and Gaia GPS provides users options to choose hiking routes based on overall reviews, photos and maps of the trails. These applications were given to me by interviewers in this project. Often times, they have to go through several applications to discover and/or decide on a final hiking route.
However, there are some drawbacks to both mobile applications. Overall, both applications provides no starting point for a trail route and displays unnecessary information on the trail page that can easily distract the users. Although Yelp has a more simplified user flow when compared to Gaia GPS, it isn't tailored to just hikers and encompasses a wider audience.
02 - Define
USER PERSONAS
Based on my interviews, I created two personas: Wendy and Sam. Wendy is an all-around fun woman who loves adventure and enjoys sharing her experiences with her friend. Sam is a more relaxed family man who enjoys spending time with his family and friends and likes to discover new adventures that is best suited for his family. After creating these personas, they helped me figure out some key features that my mobile application had to have: simplified for the average hiker and engaging for the adventure-seeking individual.
How might we help the user discover new hiking routes that have been tried and true by real people?
INFORMATION ARCHITECTURE
To create an intuitive interface, I created three user flows specifically that aligns with my common user stories. These user flows help portray a possible pattern that makes it easy for me to assess the efficiency of the mobile application. After gathering my data from interviews, these user flows helped me figure out what components are necessary for the application and how a user's experience might be enhanced.
03 - Ideate
INITIAL SKETCHES
I started my ideation phase by sketching out a few screens of what the mobile application could look like. I labeled some important parts of the onboarding process as well as taking a closer look at what is important when users look at a hiking route.
After sketching these initial screens, I provided these to a few family and friends to ask them to complete a few tasks:
- What would they expect the hiking route information to look like?
- At what point in this mobile application do they feel is still confusing?
By answering these core questions, I was able to answer questions that I still had from initial research and had a clearer sense of what to create in my wireframes and mockups.
WIREFRAMES
Using this interactive wireframe, I made the following changes from my sketches:
- Provide in-mobile help and tools to educate the user about the application prior to the home page
- Adding options for users to create a 'Favorites' or 'Lists' to track previously searched routes or explore new routes
- Expanding the review page into a separate screen to provide users more visibility and giving the option to add photos
BRANDING
Using my competitor analysis' as a color guide template, I wanted to incorporate some light, but fun colors in this application. I chose two shades of green to portray the nature and hiking feel to the application. I ended up adding a charm pink color in my palette as an accent color to incorporate a fun vibe to the mobile application. Using Avenir as my main font, it is an easily legible font and perfect for mobile.
As I was thinking of the logo name, I wanted to reassure the user that the application is meant to help them find what they are looking for with ease - a trail route. I decided on a word play on the words "oak and okay" and came up with "Oakey".
LOGO DESIGNS
For the logo, I wanted to bring a nature vibe to the application. I utilized the mountains and trees here to provide it with a nice earthy feel. I chose a simple icon here to demonstrate that this is just for anybody - whether you are an avid hiker or a new hiker, the tree with the mountain is a nice combination of truth and happiness.
04 - Final User Flow
ABOUT THE APP TUTORIAL / ONBOARDING SCREENS
STARTING A TRAIL ROUTE WITH MAP DIRECTIONS
WRITING A REVIEW FOR A TRAIL ROUTE / CONFIRMATION SCREEN
05 - Iterations & Usability Testing
FEATURED IMAGE CAROUSEL
After I finished drafting the mockups, I ran some usability tests on Maze to see if a user could easily complete these steps:
- Find a trail route they enjoy and explore more photos
- Sign up for an account
- Complete a trail and write a review about their hiking journey
Users were able to complete all 3 tasks successfully. They provided me with some great feedback and recommendations for next steps. Users expressed concerns over the featured photo on the trail page. Many thought that they should be able to click on the photo to expand and scroll through some "featured" photos on the carousel. I edited my designs to match their mental model.
CREATE A NEW LIST
When users wanted to create a new list, there wasn't a way to do that. By adding an option to create a new list at the top of the screen, users can now easily save their favorites to create a newly favorited list to share with others or save for themselves.
Learning and Next Steps
SYNTHESIZE RESULTS
During the research phase, I learned to be more organized with my findings and summarize my findings. While I did surveys and interviews, I tried to keep tabs on too many things at once that I did not set a structured goal for myself. Learning how to synthesize results is just as important as the actual data.
THINK ABOUT YOUR USERS
To better maximize output for research purposes, I would like to utilize my outside sources to gather more data such as reading articles or existing usability findings. With an ongoing pandemic going on, it was tough to get actual data. I would love to observe actual hikers as they search for a new route.
ACCESSIBLE APPLICATION FOR ALL
If I had more time, I would love to make this app even more accessible by considering users who might be visually impaired or challenged. I would also love to consider users who might suffer from color blindness to better create an accessible product for all.
© 2020 ANA LIU