Mode Swithcher

Role

UX/UI Designer

Platform

Mobile App

About

Designing for light and dark modes for a more personalised & accessible user experience.

Case Study

My Approach

To kick start, I set up primitive variables as a source of truth,
I focused on key primary, secondary and grey colours.

Semantic aliasing

Referencing primitives token, I gave each colour an identity, and a unique meaning, ensuring:

• Consistency in the interface
• Makes variables easier to use for devs & Designers
• Leads to better collaboration & handoff

Accessibility & Contrast checking

Before adapting the UI using semantic tokens,

I ensured the tokens passed at least

AA accessibility guidelines set by WCAG.

With the insight I gathered from the competitors analysis and audits, I designed a onboarding flow thats easy to use and decreases barrier to entry.

Collaboration

With my progress so far, I put together a deck sharing my key finding with different

departments & stakeholder,

main focus was to highlight:

• Suggest improved user flow

• Gather feedback & insight from stakeholders

• Review competitors user flows
• Discuss possibilities & scope project

Application

All was left was to apply the tokens

to the rest of the screens :)

Handover

After testing and making sure all components and UI are accessible,

I then collaborated with devs, PM and the Product team for handover.

For this sprint, I used the agile method to iterate quickly and effectively on a few ideas I had in mind.

Results & Reflection

Results

More personalised experience
A reusable pattern for design systems

Learnings

Looking back, I could of communicated & collaborated with devs better
Documentation and naming of tokens could really effect the development process of a poject