.png){kind=small}
KOOMI - Helping A Local Yogurt Franchise Improve Its Online Presence With A Hassle-Free Ordering Process
My Role
Sole UX Researcher &
UX/UI Designer
Timeline
November 2021
100+ hours in 5 weeks
Tools
​Figma, Photoshop
Miro, Notion, Airtable
Project overview
01
​What is Koomi selling?
Originating from Australia, Koomi - a franchise system with 30 stores in the Philippines, features a natural drinking yogurt with probiotics & fresh ingredients.
​Background
​What is its business goal?
According to Koomi's official announcement, its primary goal is to maximize the brand recognition both online and offline for every franchisee.
Problems
Outdated content on website
Although Koomi actively engages with customers on Social Media and has its own responsive website, the website provides outdated information about products and price.
Uncategorized menu causing mental load
Featuring more than 20 cups of different flavors without a global search or filter features causes more than 20 times of scrolling down to find the options on mobile device.
No online ordering experience on its own website
Cannot make sales from its own website. Totally depends on delivery apps with 30% profit-sharing.
Offer offline membership card only, hence users cannot redeem perks through any online purchases.
CONSTRAINTS & CONSIDERATIONS
Redesign the website by my own project (not an affiliate of the brand)
Photos are 100% from the Philippines franchise system.
​Solutions
Redesign a responsive website for Philippines franchise system
Revamp the responsive website by adding spices to the original UI.
​
​Update the content to date & set UX writing tone which matches the brand concept.
Categorize menu items with real-time tracking on availability by each location
Show menu of the specific branch once a user location is known.
​
Categorize items & create filter chips by needs for faster browsing.​
Create online ordering experience
Build up a hassle-free and seamless experience from scratch.
Generate Paws & Perks system to retain loyal customers.
solution breakdown
02
Redesign
Goal: Capture attention & easily navigate
​Visuals
Clean & Conceptually matching
Layout
Clearly presented with key page content & appealing CTA buttons
​
Eg: Testimonials featured from Social Media are presented to instill the trustworthy.
Content
Succinct to lessen excess navigation
Adorable writing tone is consistently used to reflect the brand's image & create unique experience
​
Eg: We are Kooming to you!
Locations
Locate to the nearest branch once location is set
​
​Estimate delivery fees & time
​
Update the availability of each item to skip a follow-up step if items sold out
Menu
​Show a promo carousel from the top to intrigue user's interest
​
Categorize items & set filter chips for a quick shop
Item Cards
Display nutrition facts & ingredients​
​
Effortlessly customize options
Eg: Slide to choose honey level
NEW FEATURE 1 - ORDERING
Goal: Minimize mental load & Quickly match the needs
NEW FEATURE 2 - checkout
Goal: Offer a quick & simple process
Checkout
Offer one-page checkout with variety of payment methods for flexibility
​
Not require to input billing information because the data is saved once sign-up/sign-in. Instead, users can make adjustments on any information
​
Display progress time & rider's locations
Paws
Paws are accumulated through both online/offline purchases
​Perks
Offer merchandises as perks with specified paws to exchange
Obtain merchandises by exact number of chosen paws via delivery after adding them to cart
NEW FEATURE 3 -paws & perks system
Goal: Automatically collect Paws & Redeem Perks
DESIGN PROCESS
DESIGN THINKING FRAMEWORK
03
​A - Business & Market
​Secondary Research
​Stakeholder Research
Market Research
Competitor Analysis
1. To understand F&B industry before, during the Covid-19 & market predictions after the pandemic
2. To learn from the direct and indirect competitors' strengths & weaknesses in building a responsive website
1. The demand for F&B online-ordering has been surged due to the pandemic & expected to keep increasing
2. The demand for healthy F&B sectors has been increased recently, especially during COVID-19
3. F&B competitors in the Philippines have strong online presence and seamless food ordering experiences across all platforms
step 1
EMPATHIZE
​WHOM?
HOW?
WHY?
(Research Goals)
WHAT?
(Assumptions)
Users - B
Primary Research
User Survey
User Interview
1. To understand what are users' pain points, needs & motivations in choosing what to drink & thru which distribution channels
2. To understand what are users' pain points, needs & motivations in online F&B ordering
3. To Identify key components necessary for online F&B ordering
1. People have switched from going to on-site ordering to online platforms with an increase in number of orders since the pandemic hit
2. Among online platforms, people prefer logistics app/web over a brand's web/app because of the accessibility and familiarity. Thus they expect a brand's online platforms to feature the same.
3. People expect to have a streamlined ordering process and similar key components with logistics platforms
​A
BUSINESS/MARKET
Market Research Findings
$308M
is the online food delivery revenue in the Philippines in 2021.
Expected to grow gradually at 12% to reach $481M in 2025.
​Source: Statista 2021
85%
of Filipino consumers (especially those aged 18–34) have claimed that they will keep ordering food delivery in future.
​Source: Grab Report 2021
65%
of food delivery users in the Philippines are Millennials & Gen X. Of which, 52% are young families with kids who find food delivery save them from meal prep & cleaning up.
​Source: Grab Report 2021
400%
is the grow in number orders from healthy F&B businesses on GrabFood Philippines by 2020 vs that of 2019. Trending are the use of organic ingredients, immunity boosters, those with less salt or sugar, and those with less oil and/or calories.
​Source: Grab Report 2021
Competitor Analysis Findings
The analysis compares the weaknesses and strengths of 03 direct competitors from different types of beverages & 01 indirect competitor which is the Top delivery app in the Philippines to have a broader view of the market. Please find the detail of competitor analysis here.
KEY TAKEAWAYS
01
The pandemic has boosted the demand for online F&B delivery and this trend is expected to grow in the new normal.
This is an opportunity for KOOMI to boost more sale by increasing their online presence across platforms.
​b
users
User Survey & Interview Findings
The survey conducted offline with 10 participants includes 09 Questions which require both verbal and written answers. By doing so, I can garner quantitative & qualitative data thru both numbers & observations to ensure a deep understanding of how is their online food & drink ordering experience. Please find the detail of Survey synthesis here.
assumption validation
01
People have switched from going to on-site ordering to online platforms with an increase in number of orders since the pandemic hit.
✔ 10/10 participants opted for online ordering instead of offline purchase at physical stores since covid hit. Also, the frequency of online ordering has accelerated from 2-3 times before COVID to 7+ times during COVID.
user pain points
Speed & Distance
​Since COVID hit, customers have been getting busier & lazier which has limited them from going directly to their favorite shops.
​Health Consciousness
​Customers are worried about COVID infection.
Also, they need information about ingredients and nutrition facts of an item.
​Updates & Accuracy
Lack of an update on item availability makes customer frustrated. Especially, ​wrong orders/Add-ins could make the case even worse.
step 2
define
​User Persona & User Journey Map
Let's meet Karina Kim - the one was created to represent key audience segments. Forming a user persona did help focus on addressing the most critical pain points that the most important user group are facing.
​In order to visualize how Karina Kim feels & interacts with the brand's website during the process of online ordering, the user journey map was also created.
.png)
.png)
.png)
Problem Statements
​Let's frame the problems thru a series of Karina's Need Statements. Once the challenges had been known, the correspondingly innovative solutions, How Might We statements, were constructed for later-on-brainstorming session.
The two statements could be formed thanks to the insights from User Research Findings followed by the formula. Please find the details here.
​User Need Statements:
​
Karina + needs (something/to do something) + because (insights)
​
How Might We Statements:
​
How might we + do something + to (solve/meet Karina's challenges/needs)
​
 How might we categorize menu into different tabs to suit Karina's expectation? |  How might we design a description section in each product card with all details Karina wants to know but not too crowded with text? |
|---|---|
 How might we create a tracking status that lightens her mood while waiting for a drink? |  How might we create a seamless checkout process which offers different modes of payment? |
 How might we create an auto and simple guidance of the most frequent concerns? |  How might we design a streamlined ordering process that helps Karina order drink at ease across varied devices? |
​Brainstorming
Feature Roadmap
The roadmap of the potential features was constructed to have a big picture of which components should be built first given the priority & user's needs thru out the product lifecycle.
step3
ideate
​Sitemap
​It's time to connect the dots! The features built from Step 2 were structured into the most important page content. The goal of the sitemap is to provide a shortcut across the entire website.
Task Flow
Next, let's see how Karina would interact with Koomi's website under the specific task which was identified by her own goals.
.jpg)
User Flow
By taking Karina's thoughts & decisions into account through out the process, the user flow was mapped out.
​Wireframe
Sketch
​The overall layout on different devices was sketched while the prioritization of addressing user pain points was kept in mind.
UI Guide
The sketch version and findings from user research & competitor analysis did help construct the wireframes digitally with Figma.
Indeed, a UI Guideline is the first step when it comes to creating high-fidelity wireframes. The UI kit aims to not only maintain the original which brings up the light-hearted & sweetness vibes but also revamp its look with some outstanding add-ons.
-
Logo: Including 02 parts, the brand's name was redesigned to create some soft curves which interestingly matches the shape of cow spots. Meanwhile, the mascot was remained unchanged to be consistent with product images.
​
-
Neumorphism effects: Setting of 02 shadows, one at positive value and the other at negative could achieve a soft extruded-like surface. This effect applied on white card can give a sense of a creamy & thick texture similar to yogurt's.
​
-
Glassmorphism effects: Adding a background blur in a low-opacity fill can reach the frosted-glass effects.
.png)
​High-Fidelity Wireframes
Usability Testing
Considering these 02 aspects, Hi-fi prototype was opted for usability testing rather than low or medium fidelity wireframes:
-
Realistic Interface: as participants could interact with the almost-final product, their behaviors and feedback on colors, content, images, etc are likely to be more accurate and meaningful.
-
​Lower human error rate: as clickable buttons, interactive frames built in, participants are likely to solve the problems to complete the task.
​test objectives
✓ Grasp what challenges users face with when they try to finish the tasks: web navigation, adding items, ordering.
✓ Explore what would be the barriers for any challenges.
✓ Obtain insights from testing for essential improvements.
methodology
1-on-1 & in-person usability testing.
Participants:
-
05 participants
-
26-44 yrs old (target group)
-
​Habit: Order food/ drink online 4 times per month
Scenario
You are craving for sweetness but also on a diet. Thus you cannot have sugar intake and high calories food or drink.
While browsing Facebook, you got hooked by an ads then click the button to land to Koomi's website.
Could you show me how you order the low price and low cal drink named "Waterberry wonder" for delivery?
test result
-
Completion rate: 100%​
-
​Error-free rate: 80% (01 user clicked Pickup button instead of Delivery to proceed to Order page)
​Affinity Map
There were 02 sources of input to form an affinity map in which the similarities are grouped into corresponding note cards:
✓ Interview transcript
✓ The behaviors and actions of all participants were noted down into the observation sheet
​
​From that, the issues from the high-fidelity prototype were uncovered, holding some constraints which might affect user testing experiences:
-
Being put into a scenario.
-
Participants were equipped with a MacBook but 2/5 are not MacBook users. Thus they found confused with a touch pad.
-
Familiarity formed after the 1st test might affect their experience on the other device.
KEY TAKEAWAYS
​Ordering Process: Promo Display
01
3/5 could not recognize promotions offered until they read bill details. One is confused how to select the favorite promotion. One indicate the pop-up display issues in mobile when scrolling horizontally.
​Area for improvements:
-
Change promo box fill
-
Add "Apply button" on pop-up and once applied, the promotion box turns to a different shade
-
In mobile, replace the existing pop-up by the one pushed in from the bottom of the phone
-
Show the price deduction on product card to inform customers about discount promo
​Revise The Design
​01 - Promotion Box
-
Change Glassmorphism to Neumorphism card to give content more contrast
-
​Add "Apply button" on pop-up and once applied, the card turns to pink with checked icon. Otherwise, cards remain purple with plus icon
-
In mobile, replace the existing pop-up by the one pushed in from the bottom of the phone
.png)
​02 - Product Card
-
Show the price deduction on product card to inform customers about discount promo
-
​Apply light shade on the one unavailable
​03 - Customization Card
-
​Remove "If Sold Out" section because only the available ones can be navigated to the customization
-
Add number (%) marked into Honey level slider
-
Add navigation to get back to customization section from view cart section
.png)
​04 - Checkout Process
-
Add an input of phone number required in sign-up form to help save billing information for later checkout
conclusion
04
What I have learned
-
Engaging with real customers to ask questions, observe, listen & take notes during interview session did help me gain a great deal of information which then served as insights for generating practical solutions.
​
-
Testing with high-fidelity prototype was such a game-changing step. With a couple of adjustments on colors, effects, the size of buttons, the new interface had been improved considerably which would been hard to achieve with low or medium-fidelity prototype.
​
-
Last but not least, I have accumulated the following qualifications through out the project:
-
​Problem-solving skills was observed all times. Whenever an issue was found, I tried to list out as many solutions as possible
-
Design-thinking mindset was improved thru each step
-
Self-study from all available materials by engaging design community group on social media, tutorial videos on Youtube, etc
-
Self-discipline to commit myself to spend at least 3 hours per day to complete the project
-
Multitasking and working under the pressure ​since I worked as a solely designer in the project
-
-
Due to the time constraints, only 01 round of usability test was conducted.
→ I expect to conduct another round to test whether all the user pain points have been effectively solved.
​
-
The current outcome incorporated most prioritized features. Some at the lower levels should be employed to bring the user experience to the next level.
→ Revise feature roadmap & prioritization matrix to come up with new solutions with new added features.
​
-
This is the non-commercial project for Koomi - a franchisee of a parent company in Australia. Thus the project was not validated by the stakeholder and no handoff process was involved.
→ I will try my best to reach the stakeholder to get validation and hope the solutions can add some values to their organization.
​​​
​next steps
Thanks for reading!