Mobile App Design

Food Truck Finding App

Project Overview

Completing this project helped me learn how to design a mobile application, starting with determing the problems to solve, moving into the ideation phase, creating wireframes, thinking through the app’s information architecture, and ending with a high-fidelity mockup and animated prototype. I’m proud of the outcome and truly 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:

Who are our users?

What is our product used for?

When is it used?

What specific situations is it used in?

What will be 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 Padilla

Sara is a 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 grub for herself and her coworkers late at night is an important problem she needs help solving.

Peter Anderson

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 Lewis

Jessica's looking for a healthy variety of food and loves discovering new flavors, but she's also on a budget. Filtering search results by price, distance, and genre are valuable features in her mind. Jessica follows food trucks on blogs and social media, so being able to save her favorite trucks and easily locate them at any time is also 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 address the following factors:

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:

Where do users begin?

Where should they end?

How do they navigate the app?

What's the onboarding experience?

How do users locate food trucks?

What types of filters are needed?

How do they search a menu?

How do they place an order?

What's the post order experience?

A chart of the information articheture for
PayCrave

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, 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.

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.

A number of phone displays showing mobile checkout designs