Sephora SEA
As part of the UX strategic plans for 2022/2023, the design team in Sephora SEA aims to focus on three key pillars - Design Ops, Research Ops and Workshopping. As the lead (myself) under this Design Ops initiative, I am responsible to collaborate with a team of designers and engineers to revamp design system for all platforms.
Team
• UX Design System Lead (myself)
• UX Designers
• Front-end Engineers
• Back-end Engineers
• QA Testers
Objective
The objective of this project is to revamp Sephora SEA's existing design system to streamline internal design and development processes, and ensure a cohesive user experience across all digital touchpoints.
Establishing this will help the product teams to:
1. Achieve clear design guidelines for all platforms
2. Designers and engineers can readily extract, refer and make easy changes to the overall UI retrieving from Figma and Storybook
3. Improve the overall efficiency of design operations across squads.
The revamp plan consisted of 4 key components - project scope, key deliverables, communication and collaboration, and success evaluation.
1. Each phase have its specific goals and timelines:
P1 - Kick-off and Team Alignment
• Organize a kick-off meeting with the design and engineering teams to communicate the project's objectives, scope, and expected outcomes.
• Define roles and responsibilities within the project team.
• Align the project with the broader strategic plan for 2022/2023.
P2 - Research and Discovery
• Gather insights and feedback from designers, engineers, and key stakeholders about the current design system's pain points and areas of improvement.
• Conduct a competitive analysis to identify best practices in design systems within the beauty and e-commerce industry.
• Create user personas for designers and engineers to understand their needs and challenges.
P3 - Define Design Principles and Guidelines
• Establish clear design principles and brand guidelines that reflect Sephora SEA's unique identity and align with the strategic objectives.
• Collaborate with senior UX and UI designers to create wireframes, mockups, and prototypes based on the new design principles.
• Create a design philosophy document outlining the vision and principles behind the design system.
P4 - Component Library Development
• Work closely with front-end engineers to build a comprehensive component library that includes UI elements for web and app platforms.
• Ensure that components are modular, reusable, and well-documented to support design and development efficiency.
• Implement responsive design considerations to accommodate various device screen sizes.
P5 - Usability Testing and Iteration
• Conduct usability testing with designers and engineers to gather feedback on the new components and design principles.
• Iteratively refine the components based on user feedback and usability testing results.
• Ensure that the design system is user-friendly and intuitive for both design and development teams.
P6 - Documentation and Training
• Create comprehensive documentation for the design system, including guidelines, patterns, and component usage.
• Provide training sessions and resources to designers, engineers, and other stakeholders on how to effectively use the new design system.
P7 - Implementation and Rollout
• Collaborate with the engineering team to implement the design system into existing and upcoming projects.
• Monitor the implementation process and provide support to resolve any integration issues.
• Communicate the availability of the new design system and support its adoption.
P8 - Ongoing Maintenance and Improvement
• Appoint a Design System Manager responsible for maintaining and evolving the design system.
• Establish a feedback loop for continuous improvement, ensuring that the design system remains up to date and aligned with user and business needs.
P9 - Evaluation and KPIs
• Define key performance indicators (KPIs) to measure the success of the design system revamp, such as increased design and development efficiency, consistency across platforms, and user satisfaction.
• Regularly assess progress and make adjustments as necessary to achieve the set goals.
2. Key Deliverables:
• Research findings report with user feedback and competitive analysis.
• New design system guidelines and principles.
• Wireframes, mockups, and prototypes for key components.
• Interactive component library.
• Usability testing report with feedback and improvements.
• Comprehensive documentation for the design system.
• Training materials and sessions for team members.
• Launch plan and communication strategy.
3. How do we want to communicate and collaborate?
Regular meetings will be held with the team to ensure alignment and progress tracking. Collaboration tools such as Slack, Figma, JIRA, and Confluence will be used for efficient communication and documentation.
4. What do we evaluate success? What are the business success metrics?
The success of the design system revamp will be measured based on its adoption by designers and engineers, improved user experiences, and the ability to maintain design consistency across all Sephora SEA digital platforms.
Let's deep dive into some discovery and challenges met.
Challenges with Poor Documentation
• Designers and engineers across different squads struggle to understand the rationale and correct usage of components, often leading to assumptions during new design work.
• The absence of a centralized repository and clear ownership hinders the product team's ability to align on areas for improvement within the design system.
• Naming conventions for components were inconsistent between the engineers and designers.
Inefficient Design Processes
• Using web/app screenshots as templates, leading to inaccuracies in final outputs.
• Relying on visual comparisons between the live site and working design files.
• Design files and components being created in separate tools, such as Sketch and Figma.
The success of the design system revamp brought improved adoption of design library by product team, impressive 70% efficiency gain from design output to frontend development and a consistent user experience across web to app.
Visual designer with a passion to create great experiences.