Creating a unified digital experience for a global brand

PROJECT GOAL:
Create Unified Web Experience

Context
dsm-firmenich is a company with four businesses that dominate the world of Beauty & Perfumery, Taste & Texture, Healthcare and Animal Nutrition.

Dsm and Firmenich, two companies merged into one dsm-firmenich
The merger brought with itself a dozen of challenges. After the merger the company was rebranded, with not much guidance on digital. Dsm-firmenich reached out to Accenture Song to help out with the Digital Strategy and unification of the web experience.

Project duration:
June 2023 - June 2024

For this project we won a prestigious iF Design Award in the category of User Interface Design.

My Role & Responsibilities
- Stakeholder management
- Design team leading & management
- Scoping
- Design sprints & backlog management

Guiding the team with
- Research and Usability testing
- Workshop facilitation
- UI/UX Design
- Prototyping
- Validation of ideas

Internal Team
Business analyst
5x Designers
Developers
Design Lead 🙋🏻‍♀️
Delivery lead
Design strategists

  • Interviews with designers, marketeers, content creators, BU leads to identify business goals and needs

  • Mapping of pain points, wants and challenges

  • Mapping & analysis of existing Information architectures, website navigations and UI components

Phase 1:
As-is assessment of current situation

Information Architecture mapping

First we had to dive deep to understand the entire landscape of existing websites.
We found out that there are approximately 60 legacy websites, that later had to come under one umbrella.

Component & sections & templates analysis

  • Information structure analysis of the key business units

  • Interviews with 6 different Units (Content Creators/Marketing Agents/Designers/ Developers)

  • As-is assessment of the landscape

  • As-is assessment of the Information structure

  • As is assessment of components and sections

As-is Information architecture of

- Dsm legacy websites

- Firmenich legacy websites

- Day 1 temporary website

Page types mapping

We mapped out the existing page types used by all websites, to categorize the content and the specific need for page types and structures.

As-is analysis of

- Dsm legacy websites

- Firmenich legacy websites

- Day 1 temporary website

Web Sections mapping

We did the same analysis for web sections, so we could create design and layouts that would work for the new design system.

As-is analysis of

- Dsm legacy websites

- Firmenich legacy websites

- Day 1 temporary website

Navigational UI components mapping

We have analyzed the UI components from the legacy website, to scope and design the new set of UI elements needed. The reason for this was to avoid the situation with unnecessary chaotic number of uncategorized UI elements when creating the new Design System.

Findings

Business Challenges

  • Fragmented Websites
    The merger resulted in 68 legacy websites, creating inconsistencies in branding and user experience.

  • Inefficient Processes
    Design and development workflows were slow, leading to delays in launching new pages and websites to market.

  • High Costs
    Heavy reliance on external agencies to design and development of pages and websites.

  • Poor User Experience & Information Architecture
    Users encountered inconsistent designs and information architecture, leading to a disjointed experience across platforms navigation issues and broken workflows.

  • Governance issues
    No central documentation or guidlines what to create and what not, resulted in all the agencies and individual teams doing whatever they wanted.

Scalable UI Navigation

XXXXX

Responsive and Sustainable for the future

Xxxxxx

Consistent for the global website and other websites.

Xxxxxx

Phase 2:

Strategic Direction & Design principles + Concept validations

To-be Levels of UI Navigation exploration

  • Co-creation of the new Information Architecture with 4 Business Units

  • Providing a framework for Business Units to Coordination of the newly formed business units & teams to co-create the information in the same framework

  • Exploration of different navigation systems that would work for all businesses and departments

Qualitative & quantitative Usability testing of the new IA

  • Interview prep

  • Script prep

  • Defining goals and purpose of the test

  • Aligning on the method with the stakeholders

Project vision board + Roadmap

  • Alignment of Objectives and Key results, to ensure focus on the project for further difficult discussions

  • Scope proposal and alignments

  • Project vision board with key stakeholders and POs

  • Product vision

  • Scoping of elements

  • Agreement of timelines

  • Alignment of delierables

  • Communication ad organisation of technical things
    Foundations / Components / Sections / Templates

  • Alignment of Sprint rituals with AM development team

Components

  • Stakeholder reviews

  • Weekly refinements

Xxxxxxx

Phase 3:
Design & Development

Design System Creation

  • Components

  • Page sections

  • Page templates

Design System Documentation

  • Benchmark the Google Material

The team structure

Our team

Account Lead

Project Lead

Design Lead

Junior Visual Designer

Medior Product Designer

Client

Product Owner

Development tam

Scrum master

Outcomes &
Key success metrics

Consistency Across Platforms

  • UI Consistency Score: Percentage of components and design patterns reused across products and platforms.

  • Brand Compliance: Degree to which new designs align with the brand guidelines (e.g., visual elements, tone of voice).

2. Efficiency and Speed

  • Time to Market: Reduction in time taken to launch new features or pages due to reusable design components.

  • Design and Development Velocity: Time saved in both design and development by using predefined elements from the design system.

  • Design Debt: Reduction in design debt by minimizing ad-hoc or inconsistent designs over time.

3. Adoption and Usage

  • Component Reuse Rate: Percentage of product teams using the design system’s components versus creating custom elements.

  • Number of Contributors: Growth in the number of designers, developers, and stakeholders actively contributing to or maintaining the system.

  • Adoption Rate: Number of products or teams that have integrated the design system into their workflows.

4. Collaboration and Alignment

  • Feedback Cycles: Number of feedback loops or iterations reduced due to shared understanding and clear documentation within the design system.

  • Cross-Team Collaboration: Improvement in collaboration between design, development, and product teams, tracked via feedback or project success rates.

5. User Experience

  • Usability Improvements: User satisfaction scores (e.g., through surveys) before and after the design system implementation.

  • Accessibility Compliance: Degree of adherence to accessibility standards, such as WCAG, achieved through the design system.

  • Error Rate: Reduction in user error due to consistent interaction patterns and familiar UI elements.

6. Cost and Resource Savings

  • Reduced Design Costs: Decrease in external agency or freelance design work as more elements are created in-house using the design system.

  • Maintenance Efficiency: Reduction in time and effort spent maintaining multiple versions of components across different platforms.

The real challenges

- Translating a complex brand to Digital
- Taking Web Accessibility Guidlines and applying to the brand
- Facilitating 30 different stakeholders who never worked together to agree on one single navigation. that will unify all businesses into one.

-Meta Commutation
- Explicit scope alignment
- Exact deliverables

Stakeholder management
Project management
Scope & Team management
Unification of companies, and cultures
Managing expectations