King Kong Coffee

Increasing product awareness and implementing the first online ordering service.

Timeline

1.5 months

Project Type

Website/Mobile/UIUX/Brand

Role

UI/UX Designer

Tools

Adobe XD, Adobe Illustrator, Adobe Photoshop

King kong coffee thumbnail

Bite Sized Summary

Problem

1. Difficult-to-read menus
2. Customer’s endless waiting
3. Coffee-novice unfriendly

Solution

1. Increase product awareness with one menu
2. Implement online ordering
3. Provide information about coffee beans

Users

King Kong Coffee customers

My Role/Responsibilities

1. User research & discovery
2. Conceptualize & develop solutions to pain points
3. Produce lo & hi-fi wireframes and prototypes
4. Conduct usability testing
5. Produce final designs based on user feedback

Constraints/Challenges

1. Limitations in delivery service (due to understaffing)
2. Expanding site in different language translations
3. Creating a design system & considering information architecture for mobile version

Design Process

I used the double diamond method to conceptualize, develop, and design King Kong Coffee’s website from start to finish.

double diamond design process

Personally, going from the general problem and narrowing it down to more specific problems is always challenging to me as a designer. This is why initial discovery/user research is so important- to really get down to the core of user pain points and solve what is really imperative.

User Research: Empathy Maps

I first interviewed some of the locals who visit King Kong Coffee often to gauge their experiences and opinions about buying coffee. This helped me understand:

1. What is King Kong Coffee doing well?  
2. What are customer pain points?

These insights later helped me develop personas and really narrow down my scope.

empathy map

User Research: Pain Points

After affinity mapping and grouping user research into themes, I focused on 3 main pain points that were commonly mentioned amongst customers.

1
Hard-to-read menus

Messy and disorganized menus are hard to read, making it difficult for customers to know what is being offered.

2
Endless waiting

Waiting times are long during peak hours, often leading to canceling orders if customers are in a hurry.

3
Coffee-novice unfriendly

King Kong Coffee offers a variety of coffee bean selections, but what are the differences? No explanation = confusing to coffee novices.

Personas

With these pain points, I then created 2 personas with different characteristics: Greg, who is a busy but coffee lover- and Susan, who is a coffee novice.

greg k personasusan b persona

How Might We?

Based on current insights on customer pain points and personas, I wanted to focus and solve two large questions.

How might we…
increase awareness of product offerings and make coffee ordering easy for everyone?

User flow

Mapping Greg K. and Susan B.’s user journeys revealed a need for a landing website for King Kong Coffee, with a feature of online ordering so that customers don’t have to wait in line.

user flow

Lo-fi Wireframes & Prototype

I went ahead and converted my paper wireframes into digital low-fidelity wireframes so that I could use them for my first usability study. The low-fidelity prototype connected the main user flow of placing an online order, which is the most important feature of the website.

Design System

design system

Hi-fi Wireframes & Prototype

Using the design system and the feedback received from the first usability study, I created my high-fidelity wireframes. The high-fidelity prototype connected the main user flow of placing an online order, as well as included all aspects of navigation within the site (learning about coffee grounds, about page).

hifi mockups

Usability Testing

Using the high-fidelity prototype, I conducted usability testing. Writing a research plan made my goals clearer for what I wanted to learn through testing, and it also ensured an unbiased process for all participants.  

1
Research goals

1. Figure out if ordering process is easier with added category system.
2. Figure out if adding a filtering and sorting system for the coffee grounds page increases readability and makes ordering easier.

2
Research questions

1. How long does it take for users to order a drink?
2. For coffee-novices, how well did they understand the different types of coffee grounds?
3. How easy is it to navigate around the site?

3
KPIs

1. Time on task: how much time users spend ordering a drink
2. Conversion rate: % of users who successfully ordered a drink
3. System Usability Scale: questionnaire to evaluate customer feedback

1
Methodology

1. Moderated usability study (through zoom)
2. Location: Korea, US (remote)
3. 4 participants will order a drink through the website, then complete a questionnaire on their experience.
4. Each session will last for 15-20 minutes.

2
Participants

1. Age: 18-65 with a fair distribution of gender
2. English/Korean/English-Korean bilingual participants

3
Script

I wrote a script beforehand so that I don’t miss out on anything.

Tasks

1. Please try to order an iced lemon peach tea.
2. What are some coffee grounds that have low acidity?
3. From the home page, how would you search for the location of King Kong coffee?

Follow-up Questions

1. How can the online ordering be easier, if you had any suggestions?
2. Is there anything you found confusing on the coffee grounds page?

System Usability Scale

system usability scale

1. I found the information on the coffee grounds page to be overwhelming.
2. I thought the navigation around the website was self-explanatory.
3. I thought the ordering process was complicated.  
4. I was able to find the drink I wanted to order without difficulty.
5. The menu was easy to read.

Usability Testing: Insights

Here are some key learnings from participants after testing. They were extremely helpful in iterating on designs and guiding my final prototype version.

avg 2 min 07 sec

time on task (order an iced lemon peach tea)

100%

conversion rate (success in ordering an iced lemon peach tea)

Common feedback from participants...

Design Iteration

Considering user feedback from the usability study, here are some noticeable changes I’ve made to the design.

Added a “best selling” category at the very top, so that customers can easily order popular drinks.

Before

After (added best selling category)

Added a “best selling” category at the very top, so that customers can easily order popular drinks.

home version 1

Before

home added cart

After (added cart page)

Added “cart” page so that customers can directly see what items they want to buy.
Previously, the cart was hidden inside the “order online” popup page.

coffee grounds v1

Before

coffee grounds version 2

After (added cart page)

Customers can now directly add coffee grounds to their order as they are browsing through the
different grounds. This makes ordering easier because they don’t have to memorize the characteristics.
I also added blurbs about body, acidity, flavor, and aroma for coffee newcomers.

Final Prototype

Some notable features:
1. micro interactions customized towards King Kong Coffee during the ordering process.

2. Information about coffee beans and filtering system according to body, acidity, flavor, and aroma.

Conclusion

Thanks for reading this far! I learned a lot during the design process, and there are definitely areas for improvement that can be achieved with future design iterations.

Main takeaways:

1. Always make convenience a priority for users, so that they can achieve their goals in the fastest way possible.
2.  Simplicity is favored over complexity, but don’t strip away too much information that would potentially lead to confusion.

Next steps in project, if further developed…

1. Expand King Kong Coffee’s ordering system with a delivery service, if feasible on their end.
2. Implement site translation to different languages to expand King Kong Coffee’s customer base.

Other Works