Info
Role
Product Designer
Timeline
3 weeks
Tools
Figma
Miro
(A)
How Might We?
"How can we revise the application of Deloitte's branding colour palette for web use while ensuring all platforms remain consistent with the brand's visual language?
Outcome
The update decreased implementation time by 70%.
It ensured scalable products across all departments and reduced design decisions by all the company's designers, enhancing colour usage, flexibility, and consistency.
(B)
(D)
I led the assessment of the existing colour system and collaborated with cross-departments.
This project aimed to identify inconsistencies within the use of colours in the Ventures applications, improve accessibility standards, and ensure a cohesive visual identity that aligns with Deloitte’s brand guidelines and user experience goals.
01
I initiated the project by analysing the current guidelines to evaluate their accessibility and the roles that we currently assign.
Also, I interviewed about 10 designers and 5 developers about the implementation and criteria for the colour choice, how the colour palette was being implemented, and any pain points they encountered regarding keeping consistency.
02
After collecting the findings from the user interview and identifying the main opportunities, my second task was to collaborate with Deloitte’s Branding team on how to adapt the current colour palette for web use.
The existing colour palette was first thought for a printing perspective and lacked the flexibility for web applications.
03
Once the overall basic designs were set, I ran 5 usability testing sessions to test if the features were usable and useful. Any insights and feedback on them considered and if needed changed before development and delivery.
(C)
Creating a baseline colour theme for the product was driven by the need for versatility and consistency across diverse user interfaces.
Moreover, by incorporating multiple built-in themes, we allowed users to personalise their experience. This adaptability not only enhances accessibility and engagement but also allows users to select a colour scheme that resonates with their individual preferences, making their interaction with the product more enjoyable.
This approach simplified the creation process for designers by offering a flexible yet cohesive foundation, reducing the time spent on manual colour adjustments, and allowing them to focus on enhancing user experience.
(E)
I conducted user interviews with designers and developers to uncover the challenges they face when using the current color palette.
100%
of Developers face challenges when implementing an extensive, unstructured colour system and maintaining it across themes or platforms.
A structured, well-documented colour system that integrates seamlessly with design systems and front-end frameworks.`
95%
of Designers and Developers struggled with the overwhelming number of colours, inconsistent visual hierarchy, and difficulty maintaining brand consistency across platforms.
A simplified, cohesive, and scalable colour palette that balances both marketing and web design needs.
80%
of Designers and Developers mention the lack of accessible colour pairings and difficulty adhering to WCAG standards for user impairments, such as colour blindness.
Clear, accessible colour options that work across all digital products and meet accessibility requirements.
(F)
Creating a baseline colour theme for the product was driven by the need for versatility and consistency across diverse user interfaces.
Moreover, by incorporating multiple built-in themes, we allowed users to personalise their experience. This adaptability not only enhances accessibility and engagement but also allows users to select a colour scheme that resonates with their individual preferences, making their interaction with the product more enjoyable.
This approach simplified the creation process for designers by offering a flexible yet cohesive foundation, reducing the time spent on manual colour adjustments, and allowing them to focus on enhancing user experience.
(G)
Guideline #1
Variables
To strengthen the colour system implementation, I suggested reorganising the styles into variables that designers could access. The aim was to introduce new categories:
Brand: List of all the colours on the colour palette.
Alias: Grouping colours that make it easier to understand what the colour represents
Mapped: Defining the baseline colour themes.
The colour tokens would support a complex and scalable token structure that allowed for the creation of individual themes for elements in the design system, making updates and management easier.
Guideline #2
Baseline Colour Palette
Creating a baseline colour theme for the product was driven by the need for versatility and consistency across diverse user interfaces.
Moreover, by incorporating multiple built-in themes, we allowed users to personalise their experience. This adaptability not only enhances accessibility and engagement but also allows users to select a colour scheme that resonates with their individual preferences, making their interaction with the product more enjoyable.
This approach simplified the creation process for designers by offering a flexible yet cohesive foundation, reducing the time spent on manual colour adjustments, and allowing them to focus on enhancing user experience.
Guideline #3
Visual Impairment testing
Testing the colour system across various visual impairments, such as protanopia, deuteranopia, and tritanopia, revealed key insights on contrast effectiveness, ensuring the palette remained distinguishable and accessible to users with colour vision deficiencies.
Upon testing the initial set of graph colours, I realised that the bright colours had the same hue, and to avoid confusion and possibly confuse users, those colours were removed from the colour palette.
Guideline #4
Graph colours
Testing the colour system across various visual impairments, such as protanopia, deuteranopia, and tritanopia, revealed key insights on contrast effectiveness, ensuring the palette remained distinguishable and accessible to users with colour vision deficiencies.
Upon testing the initial set of graph colours, I realised that the bright colours had the same hue, and to avoid confusion and possibly confuse users, those colours were removed from the colour palette.
(H)
Insights
Implementing the colour system as a theme greatly impacted the deployment across products.
My collaboration with the Developers on the new colour system implementation allowed for easier re-work when auditing the current platforms.
The assignment of roles on the colour system allowed Developers to easily identify buttons, icons, notifications, and messaging elements and apply the new token naming convention.
(I)
Lessons Learnt
01
Adapting Graphic colours for Digital use
During the initial investigation, it was noticed that the primary colour palette often didn’t translate well for web environments.
Iterative testing, a process in which the team played a crucial role, allowed me to fine-tune the palette. This made it more flexible, taking into account web accessibility, contrast ratios, and user interaction.
Expanding the colour palette to include shades, tints, and other hues allowed us to create a versatile system that could adapt to different UI components, improve hierarchy, set up variables and guidance on their correct use, and ensure consistency while applying common and best practices in the design system.
02
Need for Accessibility and Colour Misuse
The initial palette didn’t provide enough guidance on accessibility, and some platforms had issues meeting contrast requirements, such as inconsistency and misuse of brand colours in digital products.
This reinforced the need to prioritise accessibility from the start, ensuring that every colour placement has the necessary contrast for text readability, that colour has specific roles, and that visual cues should be integrated into UI elements to quickly identify any actions or messages the user needs to take action.
Streamlining the palette into distinct categories (Primary, Semantic, Neutrals, and Graphs) helped designers apply colours more consistently and purposefully, reducing decision fatigue, error in the implementation of element’s styles and consistent colour theme across each department’s products meanwhile keeping the brand identity.
You may also like
Work with me
Recommendations
“Dedicated and detail-oriented designer with a strong growth mindset, always striving to improve and enhance user experiences.”
Ivana D.
Senior Product Designer at Deloitte UK
“Highly creative, hard-working designer with strong project management and communication skills. He excels at meeting deadlines, presenting ideas, and solving design challenges.”
Katherine M.
Marketing Manager at South Bank Colleges
“Proactive and insightful designer who quickly delivers quality work. At Helsa, his clickable prototype played a key role in securing VC-backed accelerator funding.”
Rob C.
Entrepreneur & Fintech Leader
Let's talk
drigofernando@gmail.com