Identify missed opportunities for the brand guidelines to be implemented in the UI

Overall, the brand looks more quirky and expressive, while the mobile app is more utilitarian.

I identified 3 missed opportunities that could bridge the visual language gap:
1. Typography
Unify the look with consistent typography styles.
‍
2. Colors
Use more muted colors that's present in the brand guide so the app can look more expressive, less utilitarian.
‍
3. Graphic elements
Incorporate graphic elements in parts of the app to add quirkiness.

Explore possible visual directions for the new UI

Next, I created moodboards of possible visual directions because there were numerous ways to translate this. I wanted to get alignment from the team first before I proceeded to high-fidelity mocks. With a small budget, I also made sure that I selected free fonts that would adhere to the budget, and simplify things for the engineers. I made sure to articulate the reason and my rationale for each of the direction, so they understood the intent I had behind each of them – opening up a conversation.

Experiment visual directions with existing flow

After getting aligned, wanted to see how it would work with the current flow and what needs to be changed, and which colors would align more with the brand guidelines.

Implement selected visual direction to rest of the screens

When we've settled on a visual direction, I went on to implement it on the rest of the screens. This is now live on the Jago app.

Establish design system

To promote consistency and reduce design/dev debt, I created a design system. This has also proved to be useful for non-designers who are interested in testing out their ideas for the app.