Design System
/ About
Project overview
EltaMD's Design System project involved creating a cohesive and scalable design framework to unify the management of the site. By developing a comprehensive set of design guidelines & UI components we ensured consistency across all digital touchpoints, enhancing the user experience and reinforcing the EltaMD brand identity.
/ Opportunities
Identifying key issues
During the EltaMD Design System project, we identified several areas for improvement: The site exhibited inconsistencies in visual elements and lacked a unified layout structure, spacing, and sizing guidelines, particularly for mobile screens. This led to inconsistencies in outcomes from our design partners. Brand assets such as icons and claims had not been fully optimized for web use, resulting in confused messaging from a web perspective.
Additionally, there was an opportunity to enhance the understanding and application of website user-conventions. Addressing these issues was essential for developing a cohesive and scalable design system that would elevate EltaMD's digital credibility.
Additionally, there was an opportunity to enhance the understanding and application of website user-conventions. Addressing these issues was essential for developing a cohesive and scalable design system that would elevate EltaMD's digital credibility.
/ Roles
Key responsibilities
Alex D'Romero
UX / UI Designer
- Present benefits and education about design systems to stakeholders
- Build EltaMD’s design system Figma
- Develop assets in Shopify site
- Present updates and assets to stakeholders
/ Timeline
Project Milestones
Knowing we had a quick turn-around, we began by consolidating all content and web assets to build off of what we had. Next, we identified the essential elements required in their simplest form to ensure efficiency and clarity. We then built system components based on these essential needs, avoiding unnecessary complexity. Using the newly developed design system, we constructed priority pages to demonstrate its effectiveness. Finally, we launched these pages on the site, marking the successful implementation of a cohesive and scalable design system.
/ UX
Analysis & Discovery
During the Discovery & UX Analysis phase, we engaged with key stakeholders to understand their business objectives and user needs. This was complemented by a comprehensive UX heuristic evaluation, where we assessed the current digital presence against established usability principles.
/ UX
Design principles
The EltaMD Design System was built upon foundational design principles that emphasize established user-conventions. This allowed for familiarity and an overall comfortable user experience. The goal with each component was to establish an obvious purpose or call-to-action to the user. We didn’t want any ambiguous sections.
Articles
Hero Sections
Categories Section
/ UI
Component Library
The EltaMD Design System features a comprehensive component library, ensuring visual consistency and usability across all digital touchpoints.
/ Launch
Integration and training
Implementing the EltaMD Design System involved seamlessly integrating the new components into the existing digital infrastructure and ensuring consistency across all platforms. Comprehensive documentation was created for designers/developers, and team training sessions were conducted to empower the team to effectively utilize and maintain the design system, ensuring its long-term success and adaptability.
/ Next steps
Site management
With the EltaMD Design System successfully implemented, the next steps focus on ongoing site management and continuous improvement. Regular updates and maintenance will ensure the design system remains current and effective. Feedback loops and analytics will be utilized to identify areas for enhancement, ensuring the site continues to meet user needs and business objectives while maintaining a high standard of usability and design consistency.