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

PROJECT GOAL:
Create Unified Web Experience

Context
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 to help out with the Digital Strategy and Unifying the web experience.

My Role & Responsibilities
- Design Leadership
- Stakeholder management
- Design team management
- Design sprints management
- Scoping
- Backlog management
- Guiding the team and hand-on design

Secondary role
- Research and Usability testing
- Workshop facilitation
- UI/UX Design
- Hands-on Prototyping
- Validation of ideas

Project duration: 1 year

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.

As-is analysis of

- Dsm legacy websites

- Firmenich legacy websites

- Day 1 temporary website

Page types mapping

Xxxxx

As-is analysis of

- Dsm legacy websites

- Firmenich legacy websites

- Day 1 temporary website

Web Sections mapping

Xxxxx

As-is analysis of

- Dsm legacy websites

- Firmenich legacy websites

- Day 1 temporary website

Navigational UI components mapping

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

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.

Strategic Direction & Design principles

Scalable UI Navigation

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

Responsive and Sustanable for the future

Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.

Consistent for the global website and other websites.

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.

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

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

The solution
Centralised Desgin System
Online documentation and guildines
Governance framework

- 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

Phase 1:
Design Discovery

We started the project with one month Case Validation and Discovery.

  • Identified the stakeholders we had to talk to

  • Run 6 user interviews of wach profile to map out the current step by step service

  • Created User Journey with all the touch points

  • Created the Service blueprint to use the problem area and where solutions was neeed

Phase 2: Product vision and MVP

  • Through a series of workshops we identified what is the vision and mission of the GigaAnalzer app

  • We looked at the product from Business Design, Service Design and Product Design Perspective

  • Ideated the features that should be in GigaAnalyzer

  • During a workshop the client voted on the features that should be on the MVP

Phase 3: UX Design

  • User flows

  • Wireframes

  • UX Sketches

  • Validate the early prototypes with end users

Phase 4: Visual Deisgn

  • Look & feel

  • Designing the app

  • Design system

  • Typography

  • Colours / Visual langugae

  • Testing and Sprint work

Phase 4: Visual Deisgn

The goal of the app was to launch in Germany

However, as Vodafone is a gigantic company and other countires saw the solution, the app was localised to Turkey, UK and 6 oher countries

My role & team structure

Lead the Product Design Stream during Discovery

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.

Led the ideation and prioritization workshops

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.

Let the Product Design and managed junior designer during sprint

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.

“It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.”

— Squarespace