Centralizing settings, streamlining workflows, and designing scalable navigation to enhance VersaHub’s usability and support its growth as an asset management platform.
Role
Lead Product Designer
Date
2022–24
Type
Product Design
Tools
Figma
Project Overview
VersaHub’s navigation redesign addressed critical usability challenges across desktop and mobile platforms. The existing navigation was disjointed, lacked scalability, and created friction for users trying to perform key actions, such as adding units or navigating across rooms. The redesign was initiated to resolve these issues while preparing the platform for future feature scalability, like multi-hub functionality. My role included end-to-end design leadership, encompassing UX/UI design, design system enhancements, and close collaboration with developers and product owners to ensure a seamless implementation.
Goals
The primary goal of the VersaHub navigation redesign was to create a modular and scalable system that delivered intuitive and efficient navigation across both desktop and mobile platforms. This involved consolidating navigation elements to ensure consistency and ease of use, enabling access to core actions like adding units or rooms from any screen, and updating language and labels (e.g., changing “Location” to “Rooms”) to reflect a database restructure. Additionally, the redesign introduced a clear, dedicated status bar for trial and non-premium users, incorporated support for new features such as policies, external marketing links, and feature announcements, and prioritized responsive design to accommodate future feature rollouts seamlessly.
Problem
Due to being the result of a proof of concept, the KitchenDash (former name) navigation system faced several usability issues, including limited access to key actions, such as adding units or rooms while viewing a specific room, and a disjointed mobile experience with scattered elements and no way to switch between units in the same location. The logo lacked dashboard navigation functionality and was cluttered with an unclear status tier indicator, while policies and external links were missing entirely. To address these challenges and prepare for future multi-hub functionality, the redesign aimed to create a modular, scalable navigation system. It consolidated elements for consistency, enabled access to core actions from any screen, updated language to align with a database restructure (e.g., “Location” to “Rooms”), introduced a clear status bar for trial and non-premium users, supported new features, and ensured responsive, future-ready design.
My Role
As the lead product designer, I was responsible for overseeing the end-to-end design process for the VersaHub navigation redesign. This involved analyzing the information architecture to create a scalable navigation structure, designing wireframes, prototypes, and final UI elements using the existing design system, and collaborating closely with product owners, developers, and stakeholders to align on strategic and technical requirements. I led the visual design updates, including enhancements to the logo, status ribbons, and responsive layouts for both desktop and mobile platforms. Additionally, I ensured effective communication of new features by designing banners, indicators, and announcement panels. Partnering with the QA team, I tested and validated the navigation experience throughout development, iterating on the design based on user feedback to address usability challenges and improve engagement. My efforts focused on delivering a user-friendly, scalable solution aligned with VersaHub’s future growth and my long-term vision for the platform.
Design Process
Information Architecture & User Flows
To establish a clear structure, I developed a flowchart mapping out primary and secondary navigation levels, user flows, and key user intentions. This process highlighted high-priority actions and informed the reorganization of navigation, centralizing resources like reports and settings for easier access.
Leveraging the Design System
The navigation redesign utilized the existing design system to ensure visual consistency, maintaining harmony across colors, typography, and iconography. Icons from Phosphor and Heroicons libraries were integrated alongside custom icons designed for unique features.
Layout Constraints & Responsiveness
To address content limitations, I chose a fixed navigation width that could accommodate lengthy items like the upgrade ribbon. On mobile, I designed a full-height navigation modal to ensure accessibility and scalability as more features were added.
Logo and Status Tier Updates
The logo was simplified by removing the tier indicators, while a premium trial ribbon was introduced to drive subscription awareness. This ribbon was complemented by an intermediary modal that clearly explained premium offers and their benefits. The logic for the ribbon was to use relatable semantics, like "ends today", "ends tomorrow", "ends Jun 6" or "ends in 30 days". These conditional strings plus the CTA were the driving factor for deciding the main nav's width.
Feature Announcements
A dynamic banner was integrated to announce new features, linking users to a "What's New" panel within the support section. Subtle unread indicators were added to the support menu to raise awareness without overwhelming users.
Multi-Hub Updates
The redesign introduced a business name identifier under the VersaHub logo, paired with a button for seamless business switching. The navigation also supported new actions, such as adding units, rooms, and contacts, through a consolidated menu.
Development Collaboration
To streamline developer handoff and ensure consistency, I documented design specifications in Figma using the Spectral plugin (pre Dev Mode being available to our teams). This included layout dimensions, typography, color codes, icon usage, and interaction patterns, supplemented with annotations for responsive behaviors and edge cases. I collaborated closely with the development team, conducting QA across front-end and back-end systems to address issues promptly and ensure a smooth rollout.
Visual Design
The visual design balanced clarity and aesthetics to enhance usability. Navigation modularity emphasized hierarchy, grouping related actions under intuitive labels for better discoverability. On mobile, a full-height navigation modal improved accessibility by minimizing scrolling for core features. Additionally, the trial and upgrade ribbon used the design system’s accent colors to draw attention without disrupting the interface.
Testing and Prototyping
Using Figma, I created a prototype of the full navigation experience for both desktop and mobile platforms. This prototype was tested internally with stakeholders and team members, providing an opportunity to evaluate usability and functionality. The feedback collected during testing helped validate design decisions, identify pain points, and refine interactions to ensure a seamless and intuitive user experience before moving to development.
Success Metrics
The redesigned navigation was well-received, with post-launch feedback indicating a seamless user experience across both desktop and mobile platforms. Users successfully adopted the new navigation system, utilizing the streamlined interface to perform key actions like creating units and rooms or accessing newly added resources without frustration. Additionally, subscription engagement improved as the clearer trial ribbon and premium tier explanations effectively communicated membership benefits, encouraging upgrades.
Learnings and Feedback
One of the primary challenges faced during the VersaHub navigation redesign was time constraints. The project was launched incrementally through separate development tickets, requiring careful prioritization of tasks. Collaborating closely with the product owner, I ensured that the phased rollout minimized disruptions to the user experience. Another significant challenge was addressing mobile-specific constraints. The initial modal designs for mobile devices were too small to accommodate the expanding feature set effectively. This limitation necessitated a shift to a full-viewport layout, which improved usability and allowed critical elements to remain accessible above the fold.
To gather user insights, I added a survey banner linking to external feedback forms, providing an avenue for customers to share their experiences with the redesign.
Next Steps
To build on the success of the redesign, the next steps involve continuously integrating new features into the navigation as they become available. To manage cognitive load, secondary navigation levels will be leveraged to organize additional functionality. Also, introducing counters for alerts, such as when a unit is in an alert state, will further enhance user awareness, ensuring critical updates and features remain easily discoverable.
Conclusion
The VersaHub navigation redesign established a scalable foundation for future growth while significantly improving the user experience across both platforms. This project showcased the value of design systems, iterative collaboration, and user-focused solutions in creating a robust, future-ready interface.
