Kim's Dragon UX App Design
1
Overview
In Fall 2023, as part of Drexel's class UX Design 1, students were assigned groups and chose a local food truck on campus to design a mobile app for. All design choices made in the app had to be supported by evidence that it would better the experience for the user. My group chose a Chinese food truck, Kim's Dragon, that was located in the heart of Drexel's campus and already sported some iconic Drexel logos and symbology on it's physical truck with heavy use of the colors blue and gold.
The Challenge
The main challenge for this project was to deliver an effective method for users of all kinds to order from Kim's Dragon food truck in a mobile environment. Our team had 11 weeks to deliver a final prototyped deliverable.
Kim's Dragon, along with many other food trucks in and around college campuses in Philadelphia, is late to the game of offering a digital solution to ordering food ahead and skipping the line. Our main challenge was to offer a solution for the long, sometimes insufferable lines that often exist at Kim's Dragon food truck as well as to help Kim's Dragon adjust to the unavoidable digital age.
Process
Our process consisted of a few different steps and was not a very linear process with steps being taken forward and backward at certain points to reevaluate certain objectives. In the beginning, we planned our initial objectives, when we would plan to complete certain phases of research and design, and how we would accomplish this. Then, in the following week we began our research phase which was comprised of Fly on the Wall-style observations of customers at Kim's dragon and user interviews with food truck customers.
The design, test, and iterate cycle would be next, with each cycle improving on the last iteration, until finally the project would be completed and our results presented on and shared.
2
Research
Research was a vital step in this project. Before initiating the design step, it was important to understand who we were designing for, specifically users and the truck owners. Some methods of research included fly on the wall observations, competitive analysis, interviews, and creating user personas.
Fly on the Wall Observations
One of the first research methods done was the fly on the wall observation method, team members would each go to Kim's Dragon to observe customers during different hours to identify any important points of data. One interesting piece of data was watching customer's payment preference and record how many were using cash, credit card, or Venmo.
Compeition Research and Analysis
Our team also did competitive research on businesses with apps nearby to the direct area Kim's Dragon was in. These businesses and Kim's Dragon all largely served the same consumers and offered quickly made food and/or drinks. Kung fu tea, an asian inspired bubble tea cafe/casual restaurant, Starbucks, a popular coffeehouse chain, and Shake Shack, a fast food chain known for sandwiches and milkshakes were all examined based on their app's experience design.
Interviews
Interviews were also conducted with customers of local food trucks. To understand potential users better, interviewees were asked about their thoughts on prices, convenience, and food quality.
I definitely would prefer the food I get to be delicious even if it's a little more expensive.
I usually don't buy from a truck that doesn't have prices on some or all of the menu.
In Winter, I usually buy from food trucks way less because I don't want to wait in the cold.
User Personas
Three main user personas were created to represent the three main demographics that ordered from Kim's Dragon. While students, faculty, and parents weren't the only groups that bought from Kim's, they made up a significant majority of it's customers.
3
Ideating
The ideation phase was shorter than most phases but significantly helped to set up the initial design stage and that ongoing cycle of designing, testing, and iterating.
Mood Board
Our team worked to create an initial mood board that helped start our overall design until we crafted a more specific style guide.
Initial Sketches
These initial sketches also helped to narrow down a first lo-fi design. After selecting and tweaking sketches, we tested them on users and asked for feedback.
4
Testing & Prototyping
Our team would test prototypes after each design was designed and finalized. We designed and tested a low, mid, and high fidelity prototypes. After each round of testing, we would use the feedback to direct our design for the next cycle.
Lo-Fi Prototype
Our first round of testing helped validate that we were heading in the right direction with our prototyping. While most of this prototype was not interactive, and barely functional, we managed to get valuable feedback in our testing.
Lo-Fi Testing Feedback
1. Many of our users' first reactions were that the general feel of our prototype was familiar to other food-ordering apps they had used.
2. The “View All” button to view the menu confused multiple users, the copy needed to be updated to be clearer so that it would lead the user to the menu.
3. Users were confused by what “busy” exactly meant under Current Queue Status, each Queue Status option needed better descriptors.
4. One user suggested we include an option to ask for napkins and utensils.
Mid-Fi Prototype
With our second round of testing, we upgraded our prototype to mid-fidelity, including images, more detailed copy, and color. This broadened the amount of valuable feedback we were able to get from our testers.
We also addressed vital feedback from the low-fi testing conducted before including, adding context to the "busy" status for the queue and changing "View All" to "Veiw Menu" to aovid confusion.
Mid-Fi Testing Feedback
1. When on the homepage, users felt that they were inside a restaurant page of a larger food ordering app. We needed to ensure that it was clear to users they were in Kim's Dragon's app and not a more general app like Uber Eats or Doordash.
2. The contrast between the yellow and blue of our new menu category iconography wasn't great enough, we needed to reassess the color selection to bring more clarity to our icons.
3. Users struggled to identify where they were in the process of checking out (we have it split up across multiple pages to refrain from overwhelming the user), we saw a good opportunity here to add a progress bar at the top of the checkout pages to inform the user where they are in the process and allow them to easily navigate between pages as needed.
4. We noticed confusion in certain information hierarchies as users completed their tasks within our prototype, this was a good opportunity to incorporate another, louder color into our design that could indicate functions of importance that could guide the user in their journey.
5. Users found that once they had ordered their item and returned to the menu, there was no indication that they had ordered anything. This was an opportunity to add an anchored banner to the top of the home page that updated the user on their order's status and provided a place to easily return to the order confirmation page.
High-Fi Prototype
Much of our final round of testing lay in validation more than anything else, but we still managed to squeeze out a few more hiccups in our designs from our user testers.
Our hi-fi prototype was a much larger change in comparison to the last two prototypes. We updated the dimensions to be more accurate to modern smart phone dimensions and addressed vital points of feedback such as: incorporating the bright pink as an accent color and changing the category icons to be bright pink on white for better contrast.
High-Fi Testing Feedback
1. We received resoundingly positive feedback from all of our users that completing key tasks, such as ordering a food item, was intuitive and familiar. None of our users struggled to find their way around our prototype.
2. We noted that users struggled to navigate pages of the checkout process and identify what page they were on, from the new progress bar we designed. We needed to update the colors so that there is a clearer past, present, and future state.
IDM216 Final Update
As a part of the continuation of this class, our team worked in IDM216 to further design, test, and now develop the webapp.
A large critique that our team received at the end of our inital class, IDM215, was that our final app design didn't stand out against other food ordering apps and felt forgetable. In this final, functional, webapp design, we prioritized usability, consistency, and embraced Kim's Dragon's bold branding style.
5
Final Design
The Solution
As a result of the multiple rounds of design, iteration, and testing, the final Kim's Dragon prototype was designed. It includes a quick and simple loading screen animation upon opening the app, a homepage with recent orders and best sellers, and a button to navigate to the full menu. From the full menu page, there is a sticky search bar to search for exactly what the user wants as well as sticky auto scroll buttons that efficiently scroll users to any category of the menu. Users can customize their order and add it to the cart and access their cart from any page. Upon going to checkout, users are presented with a progress bar along that top that sets the expectation of how many pages and what those pages will consist of. Finally, users are given an order tracker to keep track of when their order will be ready, as well as directions to the truck and an option to rate their order on the basis of food quality, service, and experience using the app.
Results
The project was an overall success. Throughout the testing process, when asking user testers if this app would be easier than ordering in person, participants answered much more confidently with affirmatives as the weeks went by. Key features that were added to the app also seemed to stick out as particularly helpful to Kim's Dragon customers such as the current and estimated queue that informed customers of current or expected wait times based on the time of their order. The other option that helped fulfill our goal was the addition of the order ahead feature. This served users who had tight schedules and little time to waste. This app effectively accomplished its core objective of making the process of ordering great food more enjoyable and easier.
6
Key Takeaways
Over two classes spanning six months, I gained valuable experience in leading a team toward clear, organized goals. I learned how to manage scope, emphasize crucial details, and build effective workflows to keep everyone aligned and focused. This hands-on practice taught me how to guide a team in achieving well-defined outcomes.
Scope Creep
Defining what features and tasks were essential and what could be added if time allowed was crucial to prioritizing and scheduling. We found that features like the checkout process and menu navigation were way more critical to complete and focus on than the rating system. Assigning different priority levels to different tasks was very helpful to fight scope creep.
Details
Another important aspect to focus on was details. If details were neglected, users would be distracted by odd mistakes and have a much less positive experience. Spending time on details helped iron out any potential problem areas.
Organization
Keeping organized was difficult at first, but eventually our team created a system that helped us record meeting times and vital tasks to keep on track. We were able to divide up tasks and play off eachother's strengths as well.