Improving VersaHub’s room experience to streamline user workflows, increase adoption, and prepare for future growth.
Role
Lead Product Designer
Date
2022-24
Type
Product Design
Tools
Figma
Overview
This redesign was part of VersaHub’s shift from a kitchen-focused tool to a versatile asset management platform capable of serving broader markets. The platform needed to accommodate various types of equipment beyond smart refrigerators and freezers, which presented new challenges for scalability and usability. The room views and settings, in particular, required an overhaul to address inefficiencies and align with VersaHub’s updated branding and design language.
Goals
The project’s goals were twofold. The primary goal of this project was to redesign the room management experience in a way that was scalable and responsive, supporting both current and future equipment types. A critical aspect of this was refactoring the unit card design to make it modular, clear, and easy to use while accommodating new sensors, alerts, and status indicators. Additionally, the redesign aimed to streamline how users managed contact and notification settings. By centralizing these controls, we sought to eliminate redundancy and save users time. Finally, the updated design needed to align with VersaHub’s refreshed branding and design system, creating a consistent and cohesive user experience that could grow with the platform.
Problem
As VersaHub expanded its capabilities, its user interface fell behind. The original design catered to a narrow set of use cases, creating friction as the platform evolved. Critical challenges included an outdated UI that failed to align with the new design system and a lack of clarity in the way information was organized.
For example, unit cards that displayed equipment information were overcrowded with data, making it difficult for users to quickly identify important details. Alerts for maintenance, connectivity issues, and temperature irregularities all appeared visually similar, which diminished their effectiveness. Furthermore, settings for contacts and notifications were scattered across the platform, forcing users to duplicate actions and navigate multiple tabs or accordions. These redundancies created confusion and wasted time, especially on mobile devices where layouts were inconsistent.
My Role
As the Lead Product Designer for this project, I managed the end-to-end design process, ensuring the final solution was both user-centered and scalable. My responsibilities included conducting an in-depth audit of the existing information architecture to create a more structured and flexible framework. I designed wireframes, interactive prototypes, and high-fidelity UI components, leveraging atomic design principles to build reusable elements aligned with VersaHub’s design system.
In addition to designing the new unit cards and room layouts, I worked closely with product owners to define priorities and balance user needs with technical feasibility. I collaborated with developers to ensure the designs could be implemented efficiently, providing detailed documentation and Figma components with built-in variants for edge cases. By actively engaging with stakeholders and cross-functional teams, I helped align the project’s goals with VersaHub’s strategic direction while addressing key technical and user challenges.
Design Process
Research
The process began with a thorough review of the existing interface to identify inefficiencies and opportunities for improvement. User workflows were analyzed to understand where redundancies and pain points existed. The key insights revealed a need for centralized settings to reduce repetitive actions and a more intuitive way to display equipment information in the unit cards. Additionally, the design needed to support new equipment types and align with VersaHub’s updated branding.
Wireframes and Prototypes
The redesign focused on modularity and scalability. For the unit cards, I developed a layout that separated information into three levels of importance. Primary details, such as the unit name, icon, and real-time temperature readings, were given the most prominent placement. Secondary information, like connection status and syncing timestamps, followed. Finally, tertiary details, such as alerts, were displayed with clear visual prioritization to help users quickly identify critical issues.
Icons replaced small product images to improve clarity in identifying equipment types. This approach streamlined the visual design while accommodating edge cases, such as low-battery states or disconnected units. A color-coding system for alerts was considered but ultimately rejected due to its complexity and high development costs. Instead, I used visual hierarchy to draw attention to critical alerts without overwhelming the user.
To ensure the design worked across devices, I created a responsive framework with defined breakpoints for various screen sizes. For empty rooms, I designed a zero-state view that encouraged users to add or purchase equipment. Centralized settings were added to the main navigation, simplifying workflows by allowing users to manage notifications and contacts from a single location. This adjustment eliminated the need for redundant room-specific settings.
Design System Contributions
The updated design was built using atomic design principles. Components such as card surfaces, icons, and alert indicators were created as standalone modules, making them reusable and scalable for future updates. Each component accounted for edge cases, such as loading states, disconnected units, and alerts, and met WCAG standards for accessibility.
I documented the components in Figma, ensuring developers could implement them efficiently. By using props and variants, I made the design system flexible enough to handle diverse scenarios without introducing unnecessary complexity.
Measuring Success
The redesign had a significant impact on both user engagement and operational efficiency. Users quickly adopted the new room layouts, creating and managing more rooms than ever before. This increased platform organization and allowed users to focus on monitoring critical information. Centralized settings saved time by reducing redundant workflows, and dashboards saw higher usage, with users returning more frequently to monitor their equipment.
Learnings and Feedback
Designing within the constraints of an embedded API posed unique challenges. For instance, aligning VersaHub’s layouts with WebstaurantStore’s parent navigation required breaking container padding rules and adjusting layouts for full-width mobile views. Early collaboration with developers helped address these limitations and ensured the design was feasible within the technical constraints.
Additionally, I learned that prioritizing accessibility and scalability from the start not only improved usability but also reduced future design and development effort. Stakeholder feedback underscored the value of a unified design system, which made it easier for teams to extend the platform without compromising consistency.
Next Steps
To build on the success of the redesign, the next steps include introducing quick-glance widgets to help users identify issues faster without scrolling. This would streamline the monitoring process further and save users time. Additionally, adjusting mobile views to use full-width layouts would maximize screen real estate and improve usability on smaller devices. Finally, consolidating maintenance workflows into a centralized view, similar to the settings redesign, would reduce friction for users managing equipment upkeep.
Conclusion
The VersaHub Rooms Redesign successfully transformed the platform into a scalable and user-friendly tool that meets the needs of a growing user base. By addressing core usability issues and aligning with VersaHub’s new direction, the redesign provided a solid foundation for future innovation.
The project demonstrated the power of modular design and close collaboration between design and development teams. It also reinforced the importance of solving real user problems through thoughtful, intentional design. Looking ahead, these improvements will enable VersaHub to continue evolving and supporting its users in managing their assets efficiently and effectively.
