General 3 — Demi Design

New M3 colours

Cash efficiency

This new feature ROI was high for both the company and it clients. By giving more clarity on how efficient a clients money is this enables the client to use their money to make them money and also gave the business an opportunity to advise them on how to invest this money.

Background

Visualize dynamic color in your UI

The Material 3 Design Kit is built to work with the Material Theme Builder Figma plugin. Select an image or color to visualize dynamic color in your UI. Questions or comments about the theme builder should be directed here (not to design kit feedback channels).

The Challenge

There was also some backend limitations that had to be considered in the project.

- All users would have bespoke targets for their cash health
- Visual complexity - It is easy to make UI complex for explain cash health I wanted to make the UI as accessible as possible as this is customer facing.
- It is very hard to define parameters as User could be over 300% or even more above or below there cash efficiency so UI needed to be flexible for this.
- Development graphic limitations

Solution

Deliverables are completed so far as the application is still being worked on.
- Using RAG status: colour gives user fast context on if a action is required
- Arrow indicator give additional detail on how extreme the status is i.e if they are just under / above or significantly under / above
- Amount over/under stated to add context - the statement gives added context to this of possible actions to give reassurance.
- Further detail available for users wanting more context

Process to updating the design system

below the process I took to update our old colour in the deisgn sysatme to new M3 deisgn systems

The Process

1 - Documentation

Before updating the colours I needed to update the fundamentals of the new M3 colours system.
Key points
- Hue affects colours
- Colours are generated using them builder.
- Opacity has been removed in some aspects
2 - Understanding M3 colour kit

understanding the structure of the colours in M3 and how they will affect the app and how the developers will structure there colours I also discussed this with the developers to get a deeper understanding
3 - Using the theme builder

This required some trial and error to understand how be to use this plugin to work for our colours. Once I understood hue controlled the way colours were generated it made it easier to play with
4 - Brand vs Native plugin - Manual customisation

After discussing the colours with developer, designer and key stakeholders in the business we agreed that some colours needed updating to make them more accessible however there was a few colours that were adjusted
5 - Implementation audit

Description goes here
6 - Accessibility checks

Accessibility was chekc thorughout the process but a final check was once the colour were privisional chekced
7 - Sign off from key stackholders

Description goes here
8 - Tokenisation and final documentation

Description goes here