Jago Coffee is a new mobile convenience cart company serving food and coffee beverages to the Indonesian market through fully electric carts that are owned and operated by micro-business owners.Jago Coffee website
1. Office workers who consume coffee
2. Specialty coffee enthusiasts
Inconsistent look and feel between Jago's brand marketing collaterals and its mobile app.
The mobile app looked more utilitarian and sleek, while the brand guidelines is more expressive and warm. We wanted to bridge this gap so the visual language across Jago's platform is cohesive.
Strengthening the Jago brand by providing consistent experience across Jago's touchpoints.
Adding design elements to elevate the interface.
Initiate design system to reduce design and development debt.
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:
Unify the look with consistent typography styles.
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.Jago on App Store
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.
View this live:Jago Coffee website
Rave reviews from customers
"The interface is nice, the order flow is seamless, perfect."
"The UI/UX of the app is swag!"
"It's easy to use & interface looks clean and nice.”
Designed a web application that matches patients to trials in minutes
Aware is a tool to help patients learn more about clinical trials.