Vanilla Aether Design System: Ensuring Design Consistency

Origins

Vanilla's Design System Aether was developed to ensure consistency, efficiency, and a seamless user experience across all of Vanilla's products and brand design. Because of our studio background, our brand identity and UI design system were the first two things we built. The first iteration of Aether was to establish a cohesive and efficient design language to help accelerate product development and maintain a strong connection between brand identity and user experience.

From the beginning, Aether played a pivotal role in Vanilla's development. The design system enabled rapid development, especially when working with offshore engineers. By providing a clear and consistent set of design guidelines, Aether ensured that all team members, regardless of location, could produce work that adhered to Vanilla's high design and usability standards.

In the early days of Vanilla, we committed to maintaining a seamless connection between brand and product design. This commitment was essential in creating a unified user experience, reinforcing Vanilla's brand values through every interaction. As the design system grew, it became a central tool in Vanilla's strategy to simplify complex estate planning, setting the stage for the company's future growth and success.

Scaling Challenges and Solutions

As Vanilla grew, maintaining the Aether design system with a small, dedicated team presented opportunities and challenges. The small team size initially allowed for quick decision-making and iterations. However, as we grew, the complexity of maintaining a unified design system across a rapidly expanding product became clear.

Challenges

• Design and Technical Debt: New features and evolving products led to inconsistencies and inefficiencies.
• Rapid Growth: The fast pace often left little time for thorough documentation and refactoring.
• Tool Evolution: Managing the growing complexity required advancements in design tools.

Solutions

• Figma Advancements: Utilizing component libraries and version control to better organize and maintain the design system.
• Continuous Improvement: Balancing day-to-day design tasks with the need to update and refine the design system.

Despite these challenges, the team’s dedication to maintaining Aether's integrity was crucial in supporting Vanilla's expansion and ensuring a consistent user experience.

Major Overhaul and Updates

By late 2022, it became clear that Aether needed a significant overhaul to align with our new branding and address accumulated design and technical debt.

Audit and Assessment

The first step was a comprehensive audit of the existing product by myself and our Principal Product Designer, Joel Speasmaker. This audit involved examining all UI components and identifying inconsistencies, redundancies, and areas needing improvement. The goal was to create a more cohesive and efficient design system to scale with the company's growth.

Creation of the New Aether

The team set out to create a robust design system in Figma that accounted for all UI components. This new system was designed to be flexible yet consistent, ensuring that every aspect of Vanilla's design adhered to the updated brand guidelines. Collaboration with Kei Yasui, VP of Engineering, was crucial in this phase. Kei worked on implementing the new design system as a side project to avoid impacting the product roadmap. This approach allowed us to make significant improvements without disrupting ongoing product development.

Wireframe Design Kit

We built a wireframe design kit to help disambiguate ideas and prototypes that are further from production. This initiative empowered other departments to create their own wireframes and ideas, enhancing cross-functional collaboration and innovation.

Implementation and Impact

Although not fully built out, the updated system was developed enough to tackle existing design debt and address accessibility concerns. The implementation of this new system led to notable improvements in user experience. Metrics tracked in FullStory showed a 30% decrease in errors and dead clicks, highlighting the positive impact of the overhaul.

More importantly, the updated design system maintained a strong connection between brand and product design. Every element, from typography to color schemes, was designed to encapsulate Vanilla's values and mission. This approach ensured that the design system met functional requirements and resonated emotionally with users, reinforcing Vanilla's brand identity.

Future Directions

As Vanilla continues to grow and evolve, so does the Aether design system. Recognizing that a design system is a living entity, the team is committed to continuous improvement and adaptation to meet emerging needs and challenges.

Key Focus Areas

• Accessibility and Responsiveness: Ensuring a fully responsive design to enhance user experience across all devices.
• Enhancing Interactivity with Animations: Integrating thoughtfully designed animations to improve interactivity and user engagement.
• Analytical Tracking of Components: Developing analytical capabilities to optimize the design system for efficiency and effectiveness based on actual user needs and behaviors.
• Dedicated Engineering Support: Collaborating with a dedicated engineer to maintain comprehensive documentation and train individual product pods, ensuring consistent and effective implementation across all products.

Maintaining Brand Integrity

Maintaining a strong connection between brand and product design remains a core priority throughout all these developments. Every update to the design system will reflect Vanilla's values and mission, ensuring that the user experience continues to resonate emotionally and functionally with its audience.