Navigation Redesign
Increased SpotHero B2B engagement by 32% YoY by optimizing navigation and information architecture to support core revenue driving tasks for parking operators
Project Stats
8
Weeks Timeline
(4 sprints)
(4 sprints)
5
Internal Usability Tests
3
Operator Usability Tests
Team
Lele Nelson - Product designer
Amanda Wedow - Product designer
Anthony Arguelles- Product manager (PM)
Alexey Zinger - Engineering manager (EM)
Sami Meyers - Product marketing specialist
Amanda Wedow - Product designer
Anthony Arguelles- Product manager (PM)
Alexey Zinger - Engineering manager (EM)
Sami Meyers - Product marketing specialist
Tools
Figma, Figjam, OptimalSort
Key Skills
Card sorting, information architecture, usability testing, end-to-end product design
Navigation redesign supports operator self-service tasks in the SpotHero B2B app
The Control Panel B2B app allows parking operators to manage and self-service their inventory and rates for their parking facilities through SpotHero.
Supporting self-service features in the Control Panel ladders up to company goals because it unblocks sales and revenue team time to do what they do best; grow the business.
The current navigation and information architecture of the control panel reflects the quick growth of the company; new features were added randomly to the navigation without identifying the best place for the feature to live.
Without a clear path forward on the information architecture, engineers feared our team would be causing more tech debt in the current app down the line due to future constraints around app performance and URL structure.
Supporting self-service features in the Control Panel ladders up to company goals because it unblocks sales and revenue team time to do what they do best; grow the business.
The current navigation and information architecture of the control panel reflects the quick growth of the company; new features were added randomly to the navigation without identifying the best place for the feature to live.
Without a clear path forward on the information architecture, engineers feared our team would be causing more tech debt in the current app down the line due to future constraints around app performance and URL structure.
The why
The user path to core self-service features is unclear, leading to low engagement and high drop-off. Improving this will boost platform engagement and free up time for sales and internal teams.
Design Goals
Improve Navigation
Unblock Sales Team
Increase Engagement
Discovery
Discovery Research Goals
Understand & match user business mental model
Understanding the user mental model for operating a parking facility will help design a solution that actually simplifies user navigation process to quickly find self-service tools.
Determine core tasks completed in user journey
What do people come to the control panel to do? Knowing what they want to do most helps the team to focus optimization efforts to support core user tasks in the app.
Come to an internal consensus on role of app
Meeting and consulting with internal stakeholders to agree on the role that the control panel app can play for the business supports not only operators but also promotes internal teams.
pain points in current navigation
Watching live user sessions of the control panel via Sentry Replay helped to understand where users were getting stuck and how they were viewing data across their multiple facilities.
Session data reveals navigation issues
Analyzing user journey data using Mixpanel helped to visualize at scale how most of our users progress and travel through the control panel app. This helped the team to get a sense for how pervasive of an issue the poor navigation structure really is.
The Self service User journey
Land on the dashboard ->
Users review how their facilities are performing at a revenue level. This will help indicate if they need to change rates or inventory.
Toggle between facilities ->
71% of users toggle facilities as soon as they land on the dashboard. They will review the dashboard data at a single facility level and/or at a portfolio level.
Go to Reservations Page ->
20% of users then go to reservations page, likely to see at an operational level what cars they can expect to see in their garage today or this week in order to prepare.
Go to Self Service Page ->
After they’ve determine what is currently happening at the facility, they venture out to self service tools to make any optimizations to facility rates and/or inventory.
Simplify access to self service tools
There was a 78% drop in operators using self-service features. The hypothesis, supported by internal revenue team stakeholders, was that operators prefer asking internal teams to update rates and inventory instead of using the app's self-service features.
Reimagining the App's Role
Interviewing internal stakeholders aligned the vision for the control panel, focusing on shared value to define its role for the business. This ensured the new navigation and information architecture supported both operators and internal users, creating a scalable design valuable to all key stakeholders.
Aligning on design principles
Future-proofing the new navigation involved aligning on potential features being proposed for the app's future development.
Scale revenue & demand for control panel tools
Provide rate insights for optimizing performance, along with custom reporting tools
Provide a leg up on competitors
Provide more competitor microclimate data, parking spot quality data, and driver data
Create operational efficiency for all parties
Provide quick self service features to save SpotHero and operators time and money
Ideation
Prepping for ideation
In preparation for ideation, I conducted a task analysis to map out the core tasks users complete in the app, then created a deck to summarize the discovery findings.
The task analysis informed a card sort exercise with internal employees, helping to categorize and connect operator self-service tasks.
The task analysis informed a card sort exercise with internal employees, helping to categorize and connect operator self-service tasks.
Ideation workshop with team
We asked ideation session participants to focus on the Regional Manager persona, as their role involves making rate and inventory adjustments using the self-service tools we aim to promote.
.png)
function based sorting of tasks
I conducted a card sort with 10 internal participants and shared the results during an ideation session to guide brainstorming.
The card sort revealed that users grouped tasks into six categories based on similar functions, even across different business verticals. For example, editing airport rates fell under "rates" rather than "airport," and editing airport inventory was categorized under "inventory." We adopted this grouping for now but planned usability testing with operators to validate these findings.
The card sort revealed that users grouped tasks into six categories based on similar functions, even across different business verticals. For example, editing airport rates fell under "rates" rather than "airport," and editing airport inventory was categorized under "inventory." We adopted this grouping for now but planned usability testing with operators to validate these findings.
.png)
Ideation elicited so many great ideas!
...so we combined a lot of them
After our ideation session, Amanda and I took every idea and combined them into super options to review with our PM.
And we settled on a few options...
Conceptualization
Navigation best practices
We narrowed our potential solutions down coming out of ideation by which designs satisfied best practices for structuring navigation.
Option 1? - "Left left" X
Option 1 was ruled out due to technical concerns around maintaining a mobile version of the design, and it didn’t help that it wasn’t very visually appealing either!
Option 2? - "Left top" ✔
Our engineering manager and product manager found this version solid from a technical implementation perspective. They believed navigation would be faster than in option 1, and translating the design from web to mobile would be straightforward.
Refining & Usability Testing
Stakeholder Iterations
We collaborated with the engineering and design teams to refine the designs from both a UI and development perspective. To meet our OKRs for the quarter, we descoped some elements of the navigation.
goals of Usability testing
Testing with internal teams
Meeting with the revenue, sales enablement, and marketing teams ensured alignment on our solution before presenting it to operators. Their buy-in gave us confidence to proceed with testing.
.png)
.png)
Testing with real operators
We met with operators to observe their interaction with the new navigation. Our goal was to identify any deal breakers before finalizing the design for handoff to engineering.
.png)
Usability Insights
Here are some of the insights we gathered from both internal employees and operators to iterate to the final product.
Positive User Feedback
Mobile was highly intuitive and made sense.
Users generally understood how to switch between facilities. There was an opportunity however to reinforce how it works.
.png)
Pain Points Revealed
Operators want to search their facility by location ID. Sometimes they don't recognize the physical address of their parking lot if they manage many lots.
.png)
The information architecture needed slight adjustments, particularly in streamlining routing to core self-service pages within the mega menus.
During testing, we found that operators tend to think of tasks based on the business vertical first, followed by the task type within that vertical, which conflicted with our card sort results. As a result, we made design changes based on live feedback from operators.
During testing, we found that operators tend to think of tasks based on the business vertical first, followed by the task type within that vertical, which conflicted with our card sort results. As a result, we made design changes based on live feedback from operators.
.png)
The Solution
Improved navigation will increase self service platform engagement
Internal teams spend significant time updating rates and inventory for operators, and the sales team struggles to find a reliable source of truth for reporting data.
The new navigation streamlines access to self-service tools, enabling operators to navigate these features with confidence. We believe this will not only reduce the burden on internal teams but also build trust in the future services we offer through the app.
The new navigation streamlines access to self-service tools, enabling operators to navigate these features with confidence. We believe this will not only reduce the burden on internal teams but also build trust in the future services we offer through the app.
Before
...And after
Final Product
Measuring success
Increased monthly active users (MAU) post release
App engagement was tracked before and after the release of the new navigation. The new navigation was released in August.
YoY there was a 32% increase in app engagement as measured by monthly active users (MAU). MoM from Aug 2024 to Sept 2024 there was an 8% increase in MAU. This is notable considering the previous year pattern where from Aug 2023 to Sept 2023 there was an 2.5% decrease in users.
YoY there was a 32% increase in app engagement as measured by monthly active users (MAU). MoM from Aug 2024 to Sept 2024 there was an 8% increase in MAU. This is notable considering the previous year pattern where from Aug 2023 to Sept 2023 there was an 2.5% decrease in users.
Users are finding self service tools in the app more efficiently
The number of pages viewed vs. the number of self service actions taken in 2024 was tracked before and after the release of the new navigation.
There was a 30% decrease in the number of pages viewed while the number of self service actions stayed relatively the same MoM. This suggests that users are having to view less pages to find what they need in order to take the actions they need to take within the app.
There was a 30% decrease in the number of pages viewed while the number of self service actions stayed relatively the same MoM. This suggests that users are having to view less pages to find what they need in order to take the actions they need to take within the app.
Project Reflection
01. Importance of card sorting with real users, not just internal teams
Due to time constraints and concerns about response rates from busy operators, we decided to rely on the expertise of our internal revenue team instead of conducting a card sort with operators. Although I would have preferred feedback from real operators, the card sort results from internal teams were later contradicted by live feedback during usability sessions, underscoring the importance of testing with actual users to validate assumptions.
02. Process Improvement
The handoff process was rocky, with engineers diving too deep into implementation details after receiving a document outlining the new design. In retro conversations, we realized that focusing on high-level understanding rather than detailed implementation would have been more effective.
Moving forward, our PM and EM suggested emphasizing a broader design focus. Since then, the team introduced an "engineering takeover week" to let engineers explore the design before implementation.
Moving forward, our PM and EM suggested emphasizing a broader design focus. Since then, the team introduced an "engineering takeover week" to let engineers explore the design before implementation.
03. How you communicate your design is just as important as the quality of the design itself
I learned the importance of clearly communicating the type of feedback I need from stakeholders. Without proper guidance, conversations can veer off topic, and critical insights may be missed. For UI feedback, sharing designs via Slack is fine, but for broader process or user experience feedback, scheduling a meeting is often more effective.
Shout out to smashingstocks for their cool illustrations I used in this case study.
