Alltrails
Redesigning and creating a more useful and relevant account page experience!
Role:
-
Lead Ux Researcher
-
Lead Ux Designer
-
Lead Ui Designer
January 2024 - October 2024
Overview:
In 2010 Alltrails launched with the intention of being a freemium based business where their users may use advanced features through a subscription service called Alltrails+. Since the subscription service, users have continuously shared their need for a way to manage their subscription and payments.
The goal of this project was to create a way for the users to enjoy a better account management and better navigation of those pages.
The Process
I followed the four phases of Ux design. I am to incorporate the key phases of Discovery, Definition, Ideation and Implementation in all of my projects.
Understanding the Problem
Before I started this case study, Alltrails has been around for 14 years already. Working on a site and app that has been around for that long put me on a different path for understanding the problem. I started by doing research on the products reviews. This lead me to do a SWOT analysis, a competitive analysis, and a usability test on the live site.
My research entailed:
-
The functionality of the account pages
-
The hierarchy of the account pages
-
The navigation of the account pages
Gathering Insights
To have a deeper understanding of our users and the problem they are having, I conducted 5 usability tests on the current website. The goal was to pinpoint the exact frustrations around the current account pages and learn what the users truly needed. After collecting the recordings from the usability tests , I conducted affinity mapping to synthesize the pains identified. I grouped these problems under common themes and features in the platform.
Key Findings
-
there was no way for the users to manage their billing and subscriptions for the site.
-
the socials were at the top of the page instead of account settings.
-
the users when trying to go to certain pages the navigation would take them somewhere else
Wire-framing Solutions
Based on the problems discovered above, I then worked on addressing the user pains by coming up with potential solutions.
-
Establishing a clear visual hierarchy by grouping related fields
-
Creating a new pages for billing and subscriptions
-
Updating the navigation drop down
I quickly sketched and created basic wireframes to gather information from our users on the overall navigation, layout, and hierarchy of the pages.
Validating The Designs
I conducted moderated usability testing sessions with our users to understand if the designs solved the user pain points. I came up with a script and a list of tasks for them to do, including a scenario to manage their billing and subscriptions.
During the sessions I observed how the users interacted with the prototype and navigated through the pages and if they were able to get to billing and subscriptions. The usability sessions revealed that:
-
50% of users slightly struggled going to edit their profile due to there not being an edit button near the profile picture, this can be fixed by adding a button
-
100% of users were able to finish the tasks and mentioned that it was still straightforward and easy to navigate.
-
50% of the users thought that the social media offered were outdated and needed to be updated to current socials , this can be fixed by updating the socials to more current socials like ( twitter, instagram, facebook, snapchat, and tiktok)
Final Designs and High Fidelity Mockups
I created my high fidelity mockups and final interactions of the prototype in figma. I followed the Alltrails style guide as much as possible. Then i did a final UX review of my pages and interactions to ensure that they were aligned with the designs before it would go live.
Results and Takeaways
The solutions that i came up with for this case study were changing the location of the account settings information from the bottom to the top of the page, adding two new pages for billing and subscriptions, updating the socials and also moving my maps to the lists created. These solutions allowed the users to enjoy a more efficient, relevant, and useful account page experience.
Key Takeaways:
-
Plan ahead of testing sessions, so that there are users lined up and ready to test and interview
-
Iterate, iterate, iterate reworking designs is an expected process to do throughout out the whole timeframe of the project.
-
When following a companies study guide make sure everything is pixel perfect.
Other Work
Let's Connect!
LinkdIn