The Pain point

System Problem: The design system is hard to use due to the need for a source of truth. The design system has yet to be maintained and updated correctly for years. The inconsistency components crossed designs. 

Design Problem: It hasn't been honoured iOS human interface design guidelines or material guidelines, creating friction between devs and designers. Some of the fonts need to improve readability and accessibility. 

Opportunities 

1. It's the chance to create the appropriate design process and simultaneously clean up random design components. It is also an opportunity to create consistency and efficiency in the design system and improve the accessibility and readability of some of the details.

2. It would be a perfect opportunity to converse with the Dev team and rebuild the relationship if it weren't there. Sharing the design expertise and knowledge with the rest of the group informed the design decisions with stakeholders, ensuring the continued growth and maintenance of the design system.   

Typography

The most challenging part of the design system, and there are a few things I need to consider when designing this typography. 

1. Need to improve readability and accessibility. However, not too much distribution from the current design.

2. Need to meet Human interface and material design guidelines.

3. Build efficiencies for both designers and developers when refining reusable components. 

4. Allow fonts to scale to leverage platform accessibility functions. 

5. Builds consistency across products. 

What's my approach:

1. Assessed the Victoria government's design system, Ripple, to ensure we aligned with their typography approach.  

2. Aligned with iOS and Material structures to ensure our set would work across the platform. 

3. Reviewed and cleaned up our current typography styles, honouring previous design decisions and improving accessibility where possible. 

What's the process:

1. Get internal approval to update the new type styles. 

2. Replace existing design system typography styles.

3. Create typography guidelines by illustrating the intended usage.

4. Communicate changes to designers through teams and release notes. 

5. Update design system components, screens, and documentation.

6. Make sure styles are linked across the latest design files. 

7. Support developers with setting up a token approach to typography styles (i.e. make one change, and it changes across all instances of the app).  

8. Collaborate with developers and stakeholders as we update

9. Continuously evaluate, test and refine, addressing any issues that may arise during implementation.

Icons (Glyphs)

Some original icons were designed to look like Google material icons, and some were downloads from Material Library. However, the size and weight are different for each icon. Based on this client's budget and staffing, I suggested them to have an adaptive approach. Use free resources like Google Material Symbols: 

• It has 2,891 accessible glyphs.

• It supports Figma and also provides developer guides. 

• Easy plug-in variety of options to match design needs.

• Google allows using their icons across the ios platform and has cross-platform adaptation documentation. 

What's my approach:

1. Assessed the government's design system, Ripple, to ensure we aligned with their icon approach. 

2. Aligned with ATMO web design system.

3. Build icons suitable for both ios and Android (Quick and coast cost-effective).

What's the process:

1. Define which icons are currently used, and archive those not used for the past six months. 

2. Set up design considerations and rules.

3. Set up image formatting documentation for devs.

4. Resize all the icons to the correct size and weight. 

5. Work with the dev team.

Colour & Contrast

The original colour plate choice is acceptable. The core brand colour is Orange #FA9100, which is cool because many brands use orange as their Primary colour, like Bank ING, Bank West and Everyday rewards card. However, if the orange button with a small font will cause accessibility issues, I have seen orange buttons with 16px font everywhere throughout the app.

What's my approach:

• The solution is to increase the font size on some of the components so it will pass the AAA standards.

• Rework the colour combination before changing too much in the original design system.

• Archive the colours hasn’t been used.

What's the process:

• Define which component needs to increase the font size and which must change the colour combination.

• Set up Colour contrast accessibility charts.

• Achieve the colours haven't been used in any components.

• Set up an example of how to use this colour.

• Test with customers who are orderly or have Visual impairment.

• Set up tokens with the dev team.

As you can see, the colour has mostly stayed the same to pass AAA standards. We only increased some font sizes and tweaked the colour combination, giving the layout more visual hierarchy and breathing space.