Enhancing the existing UI and entire user experience to accomodate and speed up multiple device setup.
Role
Lead Product Designer
Date
2021-2022
Type
Product Design
Tools
Figma
Overview
VersaTile is a compact, cost-effective device designed to make any equipment “smart.” Targeted for bulk acquisitions, the product required an intuitive, scalable setup experience to support users managing multiple devices efficiently. To address this need, the VersaHub setup wizard was redesigned to streamline the onboarding process, integrate clear tier-based benefits (Trial, Premium, Basic), and simplify long-term device management.
Goal
The primary goal was to redesign the setup wizard to provide a streamlined, user-centered experience. This involved accelerating onboarding by simplifying the flow, enabling device setup without requiring WiFi, and reducing redundant tasks, such as repetitive contact entry. Furthermore, the solution needed to clearly highlight Premium benefits to enhance user awareness of subscription tiers and encourage upgrades.
Problem
The initial setup wizard for VersaHub was complex and time-consuming, especially for users managing multiple devices. The process lacked clear guidance, often requiring redundant input. Additionally, the interface did not effectively communicate the benefits of tier-specific features, such as Premium account advantages, leaving users with an unclear understanding of what they were entitled to based on their subscription level.
My Role
As the UX/UI Designer for this project, I led the redesign effort by restructuring the user flow, creating prototypes, and crafting a clean, cohesive visual design. I collaborated with cross-functional teams and facilitated usability testing to ensure the final solution addressed user needs while aligning with the broader product vision. My primary tools included Figma and FigJam, which supported the creation of wireframes, interactive prototypes, and final high-fidelity designs.
Design Process
Discovery and Research
The redesign began with a comprehensive analysis of the existing setup wizard to identify pain points. Key issues included convoluted language, a time-intensive drop-down equipment selection process, and inconsistent visual elements such as dynamic modal heights. Users were also required to repeatedly input the same contact information across different rooms, creating unnecessary friction.
During this phase, opportunities for improvement emerged. A scalable, modular framework was proposed to streamline the setup process and support VersaTile’s growing product suite. Additionally, the redesigned solution was designed to anticipate future features, such as seamless integration with upcoming products and services.
Solution Development
To address these challenges, I restructured the wizard into two modular tracks: the Onboarding Track for initial business setup and the Equipment Track for device configuration. This bifurcation allowed for a more focused and efficient user experience.
The Onboarding Track simplified foundational tasks, enabling users to personalize their business setup without requiring a device immediately. It introduced a streamlined flow that included a welcome message, compliance steps like the EULA agreement, and features like bulk room and contact creation. By reducing friction in these early steps, the onboarding experience became smoother and more intuitive. Premium benefits, such as SMS and email notifications, were strategically highlighted during the contact setup process to increase user awareness.
The Equipment Track was designed to handle multi-device configuration, with a focus on scalability and efficiency. Users could add both WiFi and non-WiFi devices, view the full VersaTile product suite, and access vendor pages for additional equipment purchases. The track incorporated custom icons for a visually cohesive experience and ensured that device setup was accessible from anywhere within the system.
Wireframes and Prototypes
Initial wireframes were developed during collaborative brainstorming sessions in FigJam, involving stakeholders and cross-functional team members. These wireframes served as the foundation for high-fidelity interactive prototypes created in Figma, which were tested with users to validate the new flow and gather actionable feedback.
Visual Design
The redesign prioritized a clean, user-friendly interface with custom illustrations and UI components. Equipment types were visually distinguished using icons, making each step of the setup process feel seamless and cohesive. Despite the separation of onboarding and equipment setup into two tracks, the interface maintained a unified look and feel. The design was also future-proofed to accommodate features like Multi-Hub management, ensuring users could manage multiple hubs under a single account.
Testing and Iteration
Usability testing was a critical component of the design process. Interactive prototypes were tested across different user tiers, providing insights into areas for improvement. Feedback led to refinements in instructional language, adjustments to the visual hierarchy, and optimization of UI components for smoother interaction. Testing confirmed that the modular design was both intuitive and scalable, meeting the needs of current users while supporting future product expansions.
Development Collaboration
Throughout the development process, I worked closely with front-end and back-end developers, product managers, and other stakeholders to ensure the design vision was implemented effectively. Regular check-ins and detailed design tickets facilitated clear communication and alignment. I provided ongoing design support to troubleshoot issues, clarify interactions, and adjust specifications as needed. The final QA phase involved rigorous testing to confirm the seamless integration of all features and ensure the product was ready for launch.
Success Metrics
The redesign delivered measurable improvements in the setup experience. Customer feedback highlighted the ease of use, with comments such as, “The online interface is easy to set up and use,” and, “Setup is simple and intuitive.” Thousands of successful onboardings were completed for both WiFi and non-WiFi equipment with no negative feedback. The new business setup feature was seamlessly integrated, adding value without disrupting the overall flow.
In addition to qualitative feedback, quantitative data revealed increased repeat purchases, with users building robust hubs containing multiple rooms and devices. Heatmaps and session tracking via Microsoft Clarity validated the effectiveness of the design, while also providing insights for future improvements.
Learnings and Feedback
The VersaHub setup wizard redesign transformed a cumbersome process into a user-centered, scalable solution. By emphasizing modularity, the new design supports VersaTile’s current needs while paving the way for future innovations.
From this project, I learned the importance of early and consistent stakeholder collaboration to align on goals and expectations. Prototyping and testing across user tiers provided invaluable insights, ensuring that the solution addressed diverse needs. Finally, designing with scalability in mind proved critical for delivering a solution that remains cost-effective and relevant as the product ecosystem grows.
Next Steps
Looking ahead, there are opportunities to enhance the setup experience further. Integrating detailed user analytics will provide a clearer picture of how users interact with the system, enabling targeted optimizations. Expanding Multi-Hub management features will address the needs of users managing multiple hubs, while refining the Equipment Track can simplify bulk device configuration even more.
Conclusion
The VersaHub setup wizard redesign set a new standard for VersaTile’s product ecosystem. By balancing functionality with user experience, the redesign not only improved onboarding efficiency but also enhanced user satisfaction and loyalty. This project highlights the power of user-centered design in driving innovation and achieving business goals.
