Nanoleaf Design System

Before the Nanoleaf website had an established design system, it appeared disorganized and lacked a cohesive, professional look. Each page felt disconnected, with no visual consistency across the site, which negatively impacted the brand’s identity. While we did use a consistent color palette and font family, there was no structured system in place to unify the design.

To address this, I began by thoroughly researching and studying well-established design systems to understand best practices. This foundational work guided the creation of a fully functional design system for Nanoleaf. Through this process, I not only developed a robust and scalable design solution but also gained invaluable knowledge and experience in systematizing design at scale.

My Role UX Design, Research, Visual Design, Branding, Testing

Platform Web

Process Discovery > Research > Ideation > Design > Dev Handoff

1. Problem

Our goal in creating this design system was to address several key challenges—primarily improving the user experience and streamlining development processes. The website lacked consistent font scaling and spacing, resulting in a visually unbalanced interface that hindered user navigation and discoverability. For an e-commerce platform, poor discoverability directly affects conversion rates and, ultimately, profitability.

By implementing a robust design system with reusable components, we were able to create a more cohesive and intuitive user experience. At the same time, it significantly reduced both design and development time, enabling faster and more efficient iterations across the site.

2. Design Process

Discovery

The discovery phase focused on understanding the current state of the website and uncovering pain points affecting both users and internal teams. One of the key issues identified was inconsistent font scaling and spacing, which created a visually unbalanced experience. These inconsistencies not only impacted usability but also detracted from the overall brand perception.

Research

Since this was my first time creating a design system, I spent a significant time during this phase to studying educational resources and analyzing design systems from other companies. One of the key insights I gained was understanding how a design system functions like a set of building blocks—tarting with a solid foundation and evolving into reusable components.

Ideation + Design

I began this phase by collecting and refining commonly used elements such as colors and buttons. One of the most challenging aspects was creating a scalable typography system that worked seamlessly across all screen sizes while maintaining the visual appeal of a marketing-focused e-commerce site. It took several rounds of trial and error to find the right font-size ratios and line heights that felt balanced and visually consistent. Spacing was another critical aspect as the site includes both visually-driven marketing pages and content-heavy manual pages, it was essential to develop a flexible spacing system that could adapt to a wide range of layout needs.

Testing

Once the foundations and components were in place, it was time to put the system to the test. I created mockups of the homepage and manual pages using the new design system to evaluate its effectiveness and identify any areas that needed refinement or adjustment.

Dev Handoff

I organized the design system into dedicated pages—covering typography, icons, spacing, and more—each clearly labeled with use cases to ensure clarity for both designers and developers. Once the system was complete, I synced with the developer to walk through the entire setup.

3. Conclusion

Creating this design system was a valuable learning experience. While there were challenges along the way, they were overcome through extensive research and problem-solving. The outcome is a win-win for both users and the stakeholders—users benefit from a more seamless and intuitive browsing experience, while the improved usability helps drive higher conversion rates.