K-Bop - Responsive Website

Challenge: Adults don’t have the time or energy to cook after work and/or school and need a way to order food ahead of time remotely

The product: K-Bop is a Korean-inspired restaurant located in St. Louis, MO. Their focus is to provide fast and tasty street bowls

Target audience: Consumers who don’t have the time to cook dinner after work or school - the age range is pretty wide, 18+

Project goal: Create a user friendly website for K-Bop customers to place orders.

My role & responsibilities: UX researcher and designer for the app and website from conception to delivery. This included user research and interviews, digital wireframing, low and high fidelity prototyping, and usability testing.

Research

I conducted interviews to better understand my user base, their problems and needs. The four major pain points I identified were:

1. busy schedules

2. lack of customization

3. inaccurate wait times

4. order mistakes

One of the major user groups identified during my research were young adults who have busy schedules and are too tired to cook after work and/or school, which is shown in the user persona below.

I also completed a user journey map for the persona, Tory. The biggest takeaway from this user journey map is to create an app that makes the ordering and pick-up/delivery process as efficient and accurate as possible.

Site Map

Initial Designs & Prototype - desktop wireframes

For the menu choices, I wanted to make sure users had the same opportunities to customize their bowl as they would when placing an order in person and on the app.

The prototype focuses on the user flow of placing a customized order through the website and addresses user pain points from my initial research. It's here.

Initial Designs - digital wireframes screen size variations

This screen size variation of the order customization process is for a mobile device. I made sure to resize fonts and imagery so that users can click what they need without it being too big or small.

Usability Study Results

I completed an unmoderated, remote usability study to test my lo-fi designs and prototype. The findings were as follows:

1. Users expect the ‘Order Now’ button to be one of the first things they see.

2. Reviews should be showcased on the homepage to encourage users to place an order.

To address finding #1, I moved the ‘Order Now’ button to the top of the Homepage with one major hero image. This quickly encourages users to place an order and gives them the opportunity to do so without having to scroll.

To address finding #2, I added ‘Reviews’ to the Homepage instead of having its own page. This increases users chance of actually seeing the reviews and potentially placing an order. The usability study showed they did not actually navigate to the standalone ‘Reviews’ page.

Final Mockups & Prototype - desktop

The final hi-fi prototype follows the same user flow as the lo-fi prototype, but addresses the user findings from my usability study. View it here.

Final Mockups - screen size variations

Users have a range of devices from desktop to mobile phone and even tablet. For this project, I included screen sizes for a mobile phone to correspond with the desktop version. The experience is the same overall, just optimized for a smaller screen.

Conclusion

Impact: This website gives users a way to place orders remotely and makes it clear that user needs are important to K-Bop. One of the usability study participants said: “I felt like I was really placing an order.”

What I learned: Throughout this project, I realized how important it was to focus on user needs and not just the app design. As a graphic designer, it's easy to want to make decisions based on looks, but the user need is the whole intention behind the app.