Designed a modular, scalable notification system to enhance VersaHub’s email and SMS communication, boosting user engagement and reducing support queries.
Role
Director of Product Design
Date
2021–2024
Type
Web Design
Tools
Figma
Overview
The project focused on designing a scalable, user-centric email and SMS notification system that aligns with VersaHub’s brand guidelines, communicates critical information effectively, and fosters customer trust. The solution targeted onboarding, alerts, and digest notifications, addressing both user and business needs.
Problem
The legacy notification system presented several key challenges and issues that undermined user trust, brand alignment, and overall usability. These challenges spanned branding, design, content clarity, and accessibility.
Branding Issues
The notification design failed to represent VersaHub’s brand effectively. Misaligned logos and inconsistent branding created a disconnected and unprofessional appearance. The use of the WebstaurantStore domain caused confusion, misleading users into believing there was a co-branding relationship with KitchenDash, diluting VersaHub’s identity.
Visual Hierarchy
Poor design organization made it difficult for users to focus on critical information such as alert types, equipment names, and issue severity. Important details were crammed together, reducing clarity and the ability to prioritize actions.
Context and Actionability
Notifications lacked key information like timestamps, specific temperature values, and actionable next steps. For example, alerts did not specify how high the temperature was or when the issue occurred, leaving users unsure about urgency. Missing CTAs, such as “View Unit Details” or “Contact Support,” left users without a clear path forward to resolve issues.
Redundancy and Inefficient Messaging
Repeated information, such as listing the same equipment name multiple times, created unnecessary clutter. Permissions language implied user consent even when recipients were added by admins, leading to potential confusion and frustration.
Accessibility Limitations
Low contrast between text and background colors failed to meet accessibility standards, particularly for smaller elements like footers. This hindered readability for a significant portion of users.
Goals
The primary goal of this project was to redesign VersaHub’s outdated email system to enhance user comprehension and improve the onboarding experience. The initiative focused on creating a scalable framework while addressing specific business objectives:
Improve user onboarding: Enhance communication clarity to better guide users through the platform setup.
Enable scalability: Design a modular system that supports various notification types and reduces development time.
Drive engagement: Increase equipment registration rates and encourage users to upgrade to premium membership plans.
Empower users: Replace ambiguous messaging with actionable data points to help users make informed decisions.
Reduce support interactions: Provide clear, concise information to minimize contact center queries and improve user self-sufficiency.
My Role
I led the development of a modular component system for emails and SMS notifications, creating a scalable framework that streamlined workflows and reduced developer effort. I established dynamic content formulas to maintain consistency and adaptability across varied messaging needs. Throughout the project, I collaborated closely with Product Owners, Business Analysts, Engineers, and R&D teams to ensure alignment on requirements and seamless execution.
Design Process
Research
Conducted a comprehensive audit of the existing notification system, identifying key issues with branding, accessibility, and usability.
Analyzed best practices for email design, exploring the use of emojis to add value without diluting professionalism. After careful evaluation, emojis were included selectively where they enhanced clarity and relevance.
Collaborated across Product, Engineering, and R&D teams to document all existing and future notification types, ensuring the framework could accommodate diverse requirements.
Framework Development
Designed modular components in Figma with a mobile-first approach, ensuring updates to mobile designs automatically reflected in desktop variants for efficiency. Structured components hierarchically, marking individual elements as unpublished while only the final template molecule was made library-ready.
Published a reusable library of templates organized into Alerts, Onboarding, and Digests, enabling consistent messaging across all campaigns.
Integrated dynamic properties, such as boolean toggles and select options, to allow for quick customization and streamlined content generation.
Ensured subject lines were consistent and delivered value when possible.
Wireframes and Prototypes
Created individual components for each notification type, leveraging existing design systems where applicable and introducing unique designs for specialized use cases.
Leveraged Figma plugins like “Text Counts” to validate SMS character limits and accommodate variable data such as equipment names and locations within the 160-character constraint.
Stitched components into a root template, which served as the master framework for notifications. This ensured flexibility while maintaining structural integrity.
Content Formulas
Developed standardized content formulas tailored to specific use cases, including Alerts and Resolved emails. These templates used dynamic placeholders for details like timestamps, thresholds, and actionable steps.
Visual Design
Employed an F-pattern layout to prioritize critical information while maintaining a professional, clean appearance. Adjusted layout elements to draw attention to critical areas, such as actionable CTAs and urgent details, improving the user’s ability to make informed decisions.
Optimized color contrast, line heights, and font sizes to meet AA accessibility standards, ensuring readability for all users. I also utilized the existing icon library for consistency, enabling users to quickly distinguish between multiple notifications.
Technical Details
Proposed a domain change to no-reply@versahub.com, enhancing brand identity and trust.
Recommended BIMI certification to boost credibility and signal authenticity to users.
Added a footer message clarifying that the inbox was not monitored, setting clear user expectations and minimizing potential frustration.
Iterations
Revisited the notification strategy to address user concerns around repeated alerts. While hourly alerts were initially considered for persistent issues, the final solution included a user toggle to control notification frequency.
For SMS, evaluated the inclusion of OpenGraph images to enhance engagement but opted for text-only alerts to avoid redundant or excessive information. Iteratively refined SMS content, balancing brevity with clarity, and stripped redundant information to ensure essential details stood out.
Incorporated timestamps, affected unit details, and room fields in equipment alerts to improve context and actionability.
Collaboration
Advocated for the use of Microsoft Loop to align cross-functional teams (Product, Engineering, R&D), enabling seamless collaboration and tracking of requirements. Organized Figma files with clear statuses, marking components as “Ready for Development” or “Resolved” to maintain clarity during handoffs.
Measuring Success
The redesigned notification system delivered impactful results across user experience, scalability, and stakeholder confidence:
Enhanced User Experience: Clear, actionable notifications improved user trust, reduced contact center queries, and boosted equipment registration rates.
Improved Scalability: The modular framework reduced development time, enabling faster feature rollouts for future campaigns.
Positive Stakeholder Feedback: Teams praised the system’s adaptability, with stress tests validating its flexibility and long-term value.
Learnings and Feedback
The project provided valuable learnings and insights, addressing technical, brand, and collaboration challenges while highlighting opportunities for growth:
Technical Constraints: Navigated challenges like email character limits and the lack of interactivity inherent to email design.
Brand and UX Alignment: Struck a balance between maintaining brand identity and delivering clear, action-oriented messaging.
Cross-Team Collaboration: Fostered alignment across product, design, and engineering teams, ensuring efficiency and shared understanding.
Personal Growth: Gained significant experience in designing modular systems and managing cross-functional collaboration.
Team Feedback: Iterative feedback helped refine the notification strategy, leading to a user-friendly approach that reduced confusion.
Actionable Insights: Users emphasized the importance of timestamped, concise notifications, driving a focus on context-driven and clear messaging.
Next Steps
Looking ahead, the focus is on enhancing features, gathering insights, and optimizing the framework to meet evolving user and business needs. Introducing UI options for toggling repeat notifications will give users greater control over alert frequency, improving their overall experience.
Analyzing notification performance will help identify trends in user engagement, refine messaging strategies, and drive premium plan conversions. Continuous optimization of the framework will ensure it remains adaptable to emerging user needs while maintaining alignment with VersaHub’s evolving brand identity. Additionally, expanding onboarding efforts will target dormant customers, encouraging them to complete equipment setup and fully engage with the platform.
Conclusion
The redesigned notification system for VersaHub successfully addressed critical challenges, enhancing user experience, improving scalability, and aligning with the brand’s evolving identity. By delivering clear, actionable, and accessible notifications, the system empowered users to make informed decisions while reducing support queries.
The modular framework not only streamlined development processes but also ensured adaptability for future campaigns. With positive feedback from stakeholders and actionable insights from user engagement, the project sets a strong foundation for continued growth and innovation. Looking ahead, ongoing enhancements and expanded onboarding efforts will further strengthen VersaHub’s ability to serve its users effectively and foster deeper engagement.
