Alltrails
Redesigning and creating a more useful and relevant account page experience!
Role:
End to end designer
January 2024 - October 2024
From Confusion to Clarity: Enhancing Alltrails Account Pages
Impact
-
Users were able to find the account settings info 100% of the time and 3x faster
-
Users were able to manage their accounts 100% of the time
-
navigation increased to 2x faster
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 confusion is all in the information hierarchy and navigation
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. 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.
My research entailed
-
The functionality of the account pages
-
The hierarchy of the account pages
-
The navigation of the account pages
User Pain Points and 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
The cause of the problem is the information hierarchy is not clear and is confusing along with navigation of the pages. There is no account section, no way to unsubscribe, etc.
“How might we create a more useful and relevant Account page experience for AllTrail users?”
“the important things should
be on top so you know where to go”
" I'm surprised that the socials took up the most space on the profile edit page. I feel that the account settings should be higher up."
Early concepts to enhance alltrails pages
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.
Minor Setbacks Discovered and easy fixes
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)
The account pages are enhanced!
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.
Solutions
We changed the location of the account settings information from being near the bottom of the page on the edit page to near the left top, so that the users could find what they needed faster and more efficiently.
We added two new pages to the settings. We added an account settings page and a billing/ subscriptions page, so that the users would be able to go to those pages and manage what they need to because these did not exist before.
we also moved my maps into the lists because the information hierarchy made more sense that way and fixed the tabs so that they go to where they are supposed to
We updated the social media buttons so that the socials used would be more up to date of what is relevant with modern trends
Impact
Changing the location of the account settings information allowed the users to find it 100% of the time and 3 times faster.
Adding the account settings page and billing/ subscriptions page allowed the users to manage their accounts and billing/ subscriptions 100% of the time.
Moving my maps to lists and changing the flow of the tabs allowed the users to navigate the pages more 2x faster than before.
Changing the social allowed for users to be able to connect their socials that are currently being used.
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!
Get in touch for opportunities or just to say hi! 👋
LinkdIn