Case study type: Mobile application for small independent food vendors

Scope: Solo UX/UI Design project for my apprenticeship. Overseen by Senior UX Design Mentor

Role: UX Designer, UI Designer

Tools: Figma, Photoshop, Illustrator, After Effects

Project Summary

Collaborated with a small independent food vendor to create a mobile application that assists with displaying a food menu and keeping track of orders.

What's the Problem?

Maria, a small independent food vendor, currently uses a mix of note taking methods and mobile applications to run her food selling business. There is no separation between her personal and business files. As a result, she spends too much time looking for food images to send to clients; she also wastes time trying to revisit order notes on post-it or scrolling through her messages/contacts to find a specific client.

As a small independent food vendor, Maria needs a solution that:

01

Showcases the type of food she sells

02

Helps her keep track of her orders

03

Allows for quick communication with her clients

The Solution

Provide a mobile application that includes:

01

A digital food menu so customers can see the type of food she sells

02

An “Orders” screen that helps her keep track of new and completed orders

03

A messaging screen to enable quick communication between vendor and customer about order updates, pick up/delivery coordinations, or any other questions

But, how did I get here?

This is the research method is used to empathize with the users and understand their frustrations from different angles.

User Interviews

User Flows

How Might We Exercise

Prototype testing

Persona

Key research takeaways

Sending images via text message is no longer efficient

At first, sending images of the food she sold via text was feasible because she had few customers and knew most of them; they were part of her existing network.

With her current clientele growth, sending pictures is becoming cumbersome; it's time-consuming and her business pictures are mixing with her personal photos. She wants to elevate her level of professionalism when presenting her menu.

Writing orders on pieces of paper or keeping them in her text message inbox inevitably leads to misplaced orders

Similarly, communicating with her clients via call or text messages was easy at first. However, keeping her orders within her text messages became inefficient; her business messages are mixing up with her personal messages.

She sometimes wrote the orders on pieces of paper and would later lose them. She wants a solution that helps her keep track of her orders while also enabling quick communication with her clients where she can provide any updates.

Low-fidelity prototype testing

Input Payment Information

01

Part of tracking orders is inputting the customer’s form of payment. Through the app, vendors have the option to type in the customer’s form of payment. After testing, I learned that users expected to click on the gray box and expected a drop down menu to appear. Having users type their responses was interrupting the flow of clicking through the screens.

02

Instead of having users type, I decided to implement a drop down menu so users can navigate the app more smoothly. Selling food is already a busy process and I want my solution to speed up the vendor's experience instead of bogging them down. Now, they simply select an option and hit complete.

Order Complete

01

When tasked with following the instructions on the screen, users read the final screen in the flow and didn't know how to proceed. They expressed feeling lost and unfulfilled as they scanned the screen trying to select where to go next. 

02

To make the users feel fulfilled, I added a complete button that takes them back to their orders. Users responded with feeling like they had completed the task assigned to them.

Total Earnings

01

When asked to find the total earnings they made for the day, users tried navigating to the profile screen. They missed the icon and text that was in the “orders” screen that showed their total earnings. When asked why they clicked on the profile tab, the common response was any information about their linked bank accounts or previously inputted credit cards are usually in the settings.

02

I decided to move the total earnings option into the profile tab. After speaking with my client, she confirmed that seeing the total earnings for the day was a helpful feature, but not a priority. Although I still believe that the original display of the total earnings is effective, the user tests prove otherwise.

The Visual Design

The visual design is meant to communicate friendliness in order to establish trust between the customer and vendor. As explained by my client, selling homemade food can be tricky, thus using rounded shapes and light colors-like orange and green-evokes a professional and inviting tone.

High-fidelity screens

Creating a digital menu

A digital menu feature that allows vendors to display the food they sell.

Keeping track of orders

The orders feature that helps her keep track of new and completed orders. The status bar allows the vendor to visually keep track of the order they’re preparing.

Messaging Customers

Vendors can communicate with the customers via the messaging feature; vendors can provide order updates, coordinate pick up/delivery, or answer any other questions related to their services/food.

Final thoughts

As a new UI/UX designer, it's easy to want to add a lot of features when designing a mobile application. Being my first project with a real client and having full control of the process, I had to learn how to reference my research to ensure that my solution was answering the original problem.

Something I would do differently is contacting some of the client's customers and conduct interviews/surveys to understand their perspective when they're ordering food from the vendor.