1.5 months
Website/Mobile/UIUX/Brand
UI/UX Designer
Adobe XD, Adobe Illustrator, Adobe Photoshop
1. Difficult-to-read menus
2. Customer’s endless waiting
3. Coffee-novice unfriendly
1. Increase product awareness with one menu
2. Implement online ordering
3. Provide information about coffee beans
King Kong Coffee customers
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
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
I used the double diamond method to conceptualize, develop, and design King Kong Coffee’s website from start to finish.
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.
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.
After affinity mapping and grouping user research into themes, I focused on 3 main pain points that were commonly mentioned amongst customers.
Messy and disorganized menus are hard to read, making it difficult for customers to know what is being offered.
Waiting times are long during peak hours, often leading to canceling orders if customers are in a hurry.
King Kong Coffee offers a variety of coffee bean selections, but what are the differences? No explanation = confusing to coffee novices.
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.
Based on current insights on customer pain points and personas, I wanted to focus and solve two large questions.
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.
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.
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).
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. 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.
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?
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. 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.
1. Age: 18-65 with a fair distribution of gender
2. English/Korean/English-Korean bilingual participants
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?
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?
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.
Here are some key learnings from participants after testing. They were extremely helpful in iterating on designs and guiding my final prototype version.
time on task (order an iced lemon peach tea)
conversion rate (success in ordering an iced lemon peach tea)
Users want to order coffee grounds directly from the coffee grounds page because the online ordering page doesn’t list the characteristics.
Users are unfamiliar with “body” of coffee.
Users want to see a best sellers category in the ordering page (currently only indicated on the menu)
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.
Before
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.
Before
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.
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.
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.
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.
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.
