Case Study

By Jamie Giannini

Project Overview

Completing this personal project led to a deep examination of the process involved in creating an entire mobile application from idea to functioning prototype. I started with determining the problems to solve, developed user personas, thought through the app’s information architecture, iterated through multiple wireframes, and ended with a high-fidelity mockup and animated prototype. I’m proud of the outcome and enjoyed every second of this project; I hope it shows. Please read on to see more of my process and view the final product.

User Research

I approach every project with a user-centered mindset and a deep interest in understanding my target population. It helps to observe and develop empathy with users before starting the first wireframe or user flow. This type of thinking also helps me with the process of questioning: questioning the problems, questioning the assumptions, and questioning the implications. Ideally trying to answer questions like:

What is our objective with this product?

Who are our users?

When is it used?

What specific situations is it used in?

What’s the most important functionality?

What problems are users currently experiencing?

How are they solving these problems?

Creating personas helps put a face to this information and provide important design guidance. Here are a few sample personas I created for potential Paycrave users:

Sara is a busy nurse and needs a quick solution to locate food trucks near her work. She often works odd hours, so stopping by food trucks to grab some food for herself and her coworkers late at night or early in the morning is an important problem she needs help solving.

Peter is an office worker who hates the daily grind of figuring out where to go for lunch and what to eat. He enjoys getting out of the office, but also wants to avoid long lines. He wants to have his food ready for pickup, preferably without having to call ahead.

Jessica's looking for a healthy variety of food and loves discovering new flavors. Filtering search results by price, distance, and genre are valuable features. Jessica follows food trucks on social media, so being able to save trucks and locate them are important to her.

After learning about our target users and empathizing with their needs and problems, it’s helpful to begin thinking about how our solutions can be:

Useful

Paycrave connects users with local food trucks and easily order food for pickup. It’s useful for both users and food truck owners.

Valuable

Delivers value to users and food truck owners, at its core making the process of connecting the two a simple and delightful experience.

Findable

Easy to find and complete top three core actions within the app: locate trucks, view menu, and order food.

Credible

Ratings let users enhance credibility factor.

Desirable

Branding, aesthetics, emotional design all contribute to enhancing desirability.

Accessible

Colors and design are inclusive and non-prohibitive–a tutorial teaches the major interactions, buttons contrast with backgrounds and are large enough to see and press.

Information Architecture and Wireframes

Next, I start to build out the information architecture and wireframes. My goal with this process is to carefully think through and answer questions like:

Start screen – app splash and first time experience (FTE). Note: subsequent sessions bypass the FTE. 

After completing order, viewing the order status, and picking up the food, the last step is to close the feedback loop by rating the delivery experience.

Users may swipe through the map, add filters to narrow their search, change their location, tap on a food truck to view details and start an order, or navigate to settings.

Before entering app, users should understand how to: navigate, add a favorite food truck, view food truck details, filter results, and confirm location.

Primarily through utilizing the map to view real-time truck locations near them, or through setting the search filters to view popular trucks, highest rated trucks, favorite trucks, and more. Filters are expandable as app’s scope increases.

Each food truck card should contain: image of truck and additional optional gallery of images, distance from user, business description, address, rating, price, genre, favorite (or not). 

Users should be able to edit account information (avatar, contact information, location, payments), view all past orders, view favorite food trucks, access alerts or updates, and sign out of their account. 

Initial search filters should include: cuisine styles, distance, price, operating hours, rating, popular, favorites.

After locating a truck of their choice, the user may tap on the truck to view details. The menu must be the top priority CTA within the details view given this is the primary action users want to take when viewing a truck.

After selecting the menu, the user may view items, make selections, add to cart, checkout (edit cart, edit payment details, then sign in or create an account to complete the order. After successful order submission, an order status screen provides the user with real-time order updates.

The order status screen lets the user know when their order is ready for pickup. After pickup, the user is prompted to provide a rating of the experience. This feedback loop is an important piece of the app’s rating and ranking algorithm to help users find the best trucks near them.

Onboarding

After reading Samuel Hulick’s book, The Elements of User Onboarding, and spending a lot of time thinking through and developing onboarding experiences at Match.com and HealthMine, I wanted to ensure I got this process right. As a good designer, my job is to guide the user up the side of a seemingly treacherous mountain. I want to get them there safely (and happily) to the top, meaning they understand and enjoy using our application AND ideally tell their friends. This initial hurdle is solved via a relatively straightforward introduction to the major interactions. Fun, hand-drawn illustrations keep it light-hearted and simple. Clear and concise copy keeps users quickly moving through. By the end, I use priming to explain the importance of getting a user’s location authorization instead of just going straight to the standard location opt in/out modal.

This could be a sufficient onboarding flow, but we should always consider testing other methods. For example, after the user lands on home, we’d give clear next steps and ideally let them complete a very simple first task to help them get oriented and feel accomplished. This task should tie back to their goals for using the app in the first place. After completing the task, we’d finish off the feedback loop with some positive reinforcement like a badge, points, or sometimes it’s as simple as congratulatory copy–anything to positively acknowledge the interaction completion. In a real-world situation, I would A/B test different onboarding solutions via usability testing. Otherwise, we’re just making assumptions and taking our best guess based on experience. Every major decision should ideally be driven by quantitative and/or qualitative data.

User Home

This is where our users first land after onboarding. From here they can begin to tap on or swipe through nearby food trucks to view the menu and order, filter what appears on the map, favorite trucks, and easily change location to search a new area. Users tap pins on the map to change food trucks or use a familiar “Tinder” card-swipe interaction. I think it’s important to give users as much control as possible, and ideally offer more than one method to accommodate users with different preferences. Controls should be intuitive and easy to utilize. Once users tap on a food truck card, it opens a detailed view and leads into viewing the menu and completing an order.

Demo

Ordering

The menu system is based on researching some of the most popular food delivery apps. A dominant pattern places sub-categories along the top and enforces downwards scrolling. It’s intuitive and mimics how users typically look through a real-life menu–top to bottom and then left to right for pages. By tapping on an item, it’s instantly added to a checkout cart. The user may remove it, modify it or increase the number. From there, it’s on to checkout, or back to the menu to add more items.

Checkout and Post-Order

I wanted to make the checkout process quick and straightforward. By adding the ability to create an account, we can ideally bypass this entire process the next time a user logs in and decides to place an order. I felt it was important to hold off on asking a user to create an account until they’re already invested by adding items to their cart and continuing on to checkout.

 

After placing an order, users should be able to easily view progress so they understand when their order is ready for pickup. From this screen, users also have access to the map in case they need help locating the truck. We’d pair this with a notification when their order is ready, since it’s not realistic to expect them to keep the app open for the duration of the order prep.

 

Lastly, users need to have the ability to provide feedback and leave a review. Not only does it help add to the app’s credibility, but it also generates valuable data we can surface and utilize to enhance the member experience. Most restaurant ecosystems rely on this system to also boost their SEM rankings.

© 2022 Jamie Giannini