KOI THE

UI Design for Khmer Lang

Role

UI Designer • QA

Timeline

October 1, 2022

Tools

Figma

Adobe Illustrator

Adobe Photoshop

Project Overview

KOI THE offers premium bubble tea with consistently high quality and standardized preparation processes, which has gained immense popularity among Cambodian youth and adults alike. With the intention of leveraging technology to enhance their customers' experience, KOI aims to introduce a mobile application that allows users to place orders, earn rewards, and access various features. Although KOI has its own team dedicated to designing and developing the app, there are certain areas that require improvement, such as incorporating Khmer language functionality. By doing so, KOI hopes to provide a more inclusive and user-friendly experience for their diverse customer base.

Challenges

I am honored that I have been recognized and trusted by KOI's team and allowed to audit the UI and adjust it accordingly to make it more consistent and user-centric. Additionally, I added Khmer language support; however, there were some challenges along the way since the app was already deployed in production. Nevertheless, I was determined to overcome these obstacles and ensure a successful implementation.

At first glance, I'll conduct an audit of the app's UI and some UX aspects as well, to spot any issues and suggest improvements. It took several days to complete the audit and required extensive discussion with KOI's team, their actual users, and our internal team to ensure that we identified all the major problems.

Working with the KOI team has taken a long time to distinguish between the serious issues and the subsequent ones that we need to address immediately. Brainstorming, discussing, and team activities in the large meeting room have been a bit challenging for me, as I am accustomed to working in a more relaxed environment, such as a coffee shop.

Everything exists within the internal system, making it challenging to alter the system once it's been established. What I mean by this is that when myself and KOI's team identify a specific issue, it's difficult to implement changes since the system has already been set up. For instance, the Design System, UI Kit, Typography, and other elements are all interconnected and deeply ingrained, making it arduous to modify them without causing unforeseen consequences.

Innovative Solutions

There is a large projector in the meeting room, and I have taken screenshots of every mobile app screen and imported them into Figma. I then connected my MacBook to the projector and we sat around the table in the meeting room to review the UI issues together and comment on them in Figma, allowing both myself and the KOI team to collaborate and find better solutions for the future.

There are many sticky notes on the table, after we defined the serious issues on the UIs, we wrote down the solutions and presented them around the table in the meeting room with a cold temperature. I guess someone turned on and decreased the temperature of the air conditioner. It was cold, but everyone didn't notice it because of the great solutions on the sticky notes that we were presenting to each other one by one.

A4 Paper with a pen and pencil, some grabbed a piece of paper and pencil for me! Thank you so much, we are now starting to apply the solution that we spent a long day defining. Ahh, I'm so happy with this solution, I'm holding a pencil and sketching a wireframe for a new screen, and everyone else is doing the same thing, but with different solutions.

Hey! We've solved the issue and I've also designed a Khmer version of the KOI mobile app. Check out the image below and let me know if you're interested in learning more about my design process. Cheers!

Special Thank

I would like to extend a special thanks to the KOI team for their proactive work and support throughout this project. It was a great and fantastic experience working with such a dedicated team.