GOALS & OBJECTIVES
The project aimed to reduce production time for email creation and updates while empowering the internal team to build and edit eblasts directly in Figma. A focus on consistent styling, precise spacing, and strong brand alignment ensured that every campaign maintained a polished and unified look. By introducing a modular, mobile-friendly design system, Inolex gained a framework that improved performance and adaptability. The approach also provided tools and documentation to support ongoing success, with modular components functioning as reusable building blocks that could be arranged, duplicated, or hidden to create different emails quickly without the need for a full redesign each time.
Research Overview
To design a modular email system in Figma, I began by exploring the tools, workflows, and best practices that would allow the internal team to build and adapt campaigns quickly. The research focused on plugins, design standards, and real-world usage patterns to ensure the system was both efficient and easy to adopt.
Exploring Figma Plugins
I evaluated plugins like Love to Email and others that connect Figma designs to email-ready code. These tools helped bridge the gap between design and development, making it possible to preview how modular layouts would function in practice.
Studying Modular Design Systems
I researched how modular systems work in digital design, looking at parallels to component libraries in Figma. This included studying how reusable building blocks could be arranged, duplicated, or hidden to generate fresh layouts without redesigning each campaign from scratch.
Auditing Existing Emails
I reviewed Inolex’s past campaigns to identify recurring patterns, inconsistencies in spacing and typography, and opportunities for standardization. This audit informed which elements should become reusable modules in the new system.
Benchmarking Industry Standards
I studied industry benchmarks for email accessibility, brand consistency, and mobile responsiveness. This ensured the new framework would meet modern expectations for usability while aligning with best practices in digital communication.
Analyzing Workflow and Collaboration
I looked at how designers and marketers collaborate during the review process and where bottlenecks occurred. This research highlighted the need for a system that reduced back-and-forth revisions and allowed teams to visualize entire campaigns over time.
Inolex Email Design System
Overview
Inolex is transitioning from static, image-based eblasts to a flexible modular email system built in Figma. The new system is designed to empower the internal team to update and manage email content independently without relying on custom coding or developer support. Its primary goals are to reduce production time, improve brand consistency, and establish a scalable framework for future campaigns. The Figma system also includes clear documentation, accessibility checkpoints, and a library of reusable components to ensure long-term usability and alignment with brand standards.
Opportunities
Through research and user feedback, I’ve identified key opportunities to enhance the Luma product line. By improving installation processes, leveraging AI for more accurate alerts, ensuring better smart home integration, and prioritizing privacy, these insights will help differentiate Luma in a competitive market and guide the design to meet user needs and future demands.
Simplified Installation Process
There’s a strong demand for more streamlined, easy-to-install surveillance systems. Current solutions often involve complex setups, which could be addressed by Luma’s simplified installation and configuration processes.
Advanced AI for More Accurate Alerts
Competitors like Nest and Ring struggle with false alerts. Luma’s integration of AI-driven human, vehicle, and non-motor vehicle detection presents an opportunity to reduce these false alarms and offer more reliable notifications.
Seamless Integration with Smart Home Systems
While competitors provide basic integration with smart home ecosystems, Luma can provide deeper, more intuitive control, improving the overall user experience by seamlessly connecting with systems like Control4.
Enhanced Privacy and User Control
With increasing privacy concerns, Luma’s focus on giving users more control over their data and privacy settings presents a unique opportunity to stand out by ensuring clients feel confident in their system’s security and control.
Customer Journey
The B2B customer journey for Luma on the Snap One site outlines the process from discovery to purchase and support. It focuses on helping installers and business owners find, compare, and purchase surveillance solutions that meet their specific needs, ensuring a smooth and efficient experience tailored to the demands of the professional market.
.png)
Personas
To better understand the diverse users of Luma, I created detailed personas representing installers, business owners, and purchasing decision-makers. These personas highlight their unique goals, challenges, and needs, guiding the design of a more intuitive and effective surveillance solution for the professional market.
The Surveillance Installer
Mike Taylor - 38
Mike has been working in the surveillance installation field for over 10 years. He’s skilled in setting up various surveillance systems, from residential to commercial installations. Mike is tech-savvy but values simplicity in the tools he uses.
The Purchasing Manager
Sarah Nguyen - 32
Sarah is responsible for sourcing and purchasing surveillance equipment for a large AV solutions provider. She has a background in logistics and supplier management, and she’s focused on getting the best value for her company’s budget.
The Company Owner
John Harris - 42
John owns a mid-sized security system installation company. He oversees the entire business operation, including sales, customer service, and installation. He has a strong entrepreneurial background and is always looking for ways to improve his company’s competitive edge.
Card Sorting Exercise & Rapid Prototypes
To streamline content organization, I collaborated with the copywriter, product manager, and photographer on a card sorting exercise. This teamwork ensured the website structure aligned with user needs, emphasizing clarity and usability. Additionally, I explored different ideas for each section by creating hand-drawn rapid prototypes. These sketches helped us quickly visualize concepts, test layouts, and refine the structure before moving to digital wireframes.
Prototyping
.png)
Site Map
This site map highlights the key sections of the Luma website, designed for easy navigation of product details, AI features, system integration, and support resources for both installers and end-users.
Research
Competitive Insights for Smarter Solutions
I researched websites, industry magazines, and competitors to gather insights into current trends and design approaches in the surveillance market. This helped identify opportunities to enhance Luma’s user experience, ensuring the brand stood out with intuitive, competitive solutions for both dealers and end-users.
Visual Design
Wireframe & Testing
During the Luma project, I sent the wireframes to dealers for real-world testing, allowing us to gather firsthand feedback from those directly interacting with the products. This testing phase provided invaluable insights into how dealers navigated the website and engaged with the design. By observing their reactions and gathering feedback, we identified pain points, areas for improvement, and key elements that resonated well. This process helped us refine the wireframes to ensure a seamless user experience tailored to the needs of both dealers and end-users.
Design Refinement Through User Testing
I refined the high-fidelity design for the Luma brand pages through user testing and collaboration with creative managers and product marketing teams. This iterative process helped gather feedback, enabling us to fine-tune the design to meet user needs and align with the brand’s goals for a seamless user experience.
Takeaways
The Luma project successfully transformed a previously underperforming product line into one of Snap One's most sought-after offerings. Through strategic UX design, collaboration with product managers and marketing teams, the Luma brand now stands as a top choice for dealers. The redesigned Luma brand pages, with clear, engaging product details and an intuitive interface, have contributed to a significant increase in sales and product discovery.
Accessibility Testing
To ensure my designs align with UX principles and accessibility standards, I use a comprehensive review process in collaboration with the development team. This approach helps verify that the pages I design for Snap One meet accessibility requirements. However, due to the technical nature of our products, longer paragraphs are often necessary to communicate detailed information. While this can present challenges for accessibility, it’s an expected part of working with technical content, and we make efforts to ensure clarity and usability despite the length.
Conclusion
High-Fidelity Design and Brand Alignment
I explored high-fidelity design options for the Luma brand pages, aligning with Snap One’s design system and brand colors. I experimented with various design ideas, animations, and product layouts to ensure visual appeal and seamless functionality across devices, refining the user experience while maintaining the brand’s identity.
Complex and Time-Consuming Installation
Many surveillance systems require a lengthy and complicated setup, often involving multiple configurations, technical expertise, and manual troubleshooting. AV professionals may emphasize the need for a more streamlined, user-friendly installation process that reduces setup time and simplifies system integration.
Limited Integration with Other Systems
AV and surveillance companies often face challenges when surveillance systems do not integrate well with other smart home or building management systems. Companies may highlight the need for more seamless integration with control systems like Control4, ensuring easy management of security systems alongside other smart devices.
False Alerts and Ineffective Notifications
Many traditional surveillance systems struggle with false alarms caused by non-relevant movements, like animals or environmental factors. AV professionals may note a strong demand for smarter, AI-driven detection that reduces these false notifications, helping users focus on real threats and improving system reliability.
User Interface Complexity and Usability
Surveillance systems can be difficult for end-users to navigate, especially when it comes to managing recordings, reviewing footage, or adjusting settings. Companies may point out that a more intuitive user interface—one that simplifies tasks like searching video footage or adjusting camera settings—would make systems more accessible to both installers and users, reducing the need for frequent technical support.
User Interviews
To better understand the audience, I conducted interviews and made direct calls to dealers and installers, uncovering valuable insights. These discussions focused on identifying pain points, learning what features users need and value, and observing how they interact with surveillance systems. This firsthand feedback offered a deeper understanding of the challenges and needs of professionals, guiding improvements to enhance the overall product experience.
CE Pro Mag. 2024
Positive Feedback
Dealer feedback has been overwhelmingly positive, with many citing the user-friendly design and easily accessible information as major factors in their purchasing decisions. The success of the project has also made it easier to expand the Luma experience, allowing for seamless additions to the brand's portfolio, driving both growth and customer satisfaction.