Android Mobile App Design

MobileEATS is an Android based consumer app that simplifies how you eat take out by making it easy for users like you to search and locate local food trucks, view menus and customer reviews, order and customize your food, and prepay for your order!

Collaborators

  • Kristen Stevens
  • Sharron Torres (mentor)

My Role

  • User Researcher
  • UX Designer
  • Usability Tester

Duration

  • 6 weeks beginning Nov 2016

Problem

Do you have a favorite food truck? Perhaps you have eaten a delicious meal from a food truck at an outdoor event you attended and have you been craving that delicious meal lately but don’t know how to find that food truck you stumbled upon?

Food truck owners want to to grow their customer base with people like you, but it can be difficult when their business changes location.

User Research

User research was conducted to learn how to bridge the gap between customers wanting convenient tasty food and food truck owners wants to grow their customer base. 15 participants responded to a user survey exploring users' experience with food trucks and how they order takeout food.

Key Findings

1. Top 5 factors that influence where people order take out:

5FACTORS

2. Food trucks are becoming a staple in communities.

FOODTRUCKPRESENCE

3. People enjoy what food trucks offer over traditional restaurants.

FOODTRUCKPOSITIVECOMMENTS

4. ... but it’s difficult to order take out from them.

61.5PERCENT

5. The majority of takeout orders occur over phone.

53.5PERCENT

6. People crave a better takeout ordering experience.

ORDERINGTAKEOUTOPNIONS

User Personas

DAVID
CLAIRE
SAM

Solution

I designed workflows to fulfill the following user stories for MobileEATS users:

    • As a MobileEATS user, I want to view food trucks near me so that I can find which food truck I want to order takeout.
    • As a MobileEATS user, I want to select a truck, view details, and see a menu so I can lern more about the business.
    • As a MobileEATS user, I want to create an account and view recent transactions so I can keep track of my orders.
    • As a MobileEATS user, I want to choose items to purchase and pay for them using my phone so I can easily create and prepay for my orders.
    • As a MobileEATS user, I want to rate and review a food truck and view other ratings and reviews so I can view others' feedback of the business and share my own feedback with other users.

Site-Mapping and User Flows

SITEMAPUSERFLOWS

Lo-Fidelity Screens

LOFISCREENS

Hi-Fidelity Screens

Search and Food Truck Profile

SEARCHPROFILE

Menu and Ordering

MENUORDERING

Customer Reviews

REVIEWS

User Onboarding

ONBOARDING
COLOR

Results

Moderated user testing was conducted to validate the designed workflows satisfied MobileEATS user stories. Four participants participated in usability testing that volunteered from the pool of my user survey respondents. Users were given access to an InVision prototype and were asked to complete the main user workflows using a preset scenario. The goal of the usability test was to ensure that the core user stories were satisfied and to identify gaps in the current design.

Positive feedback was received as well as constructive feedback that was used to iterate on the designs to strengthen the value of MobileEATS to users compared to other food ordering apps. Some of the feedback received is shown below:

USERTESTINGFEEDBACK

User Workflow

1 New user creates account with payment information.

New user creates an account using social media sign-in integration or email. After creating an account, the new user is prompted to add their credit card or PayPal information to make future ordering faster.

STEP1

2 User searches for nearby local foodtrucks.

User types in their search terms to surface results. They can toggle between map and list views to view all results, or filter to decrease their number of results.

STEP2

3 User selects a foodtruck to explore menu and reviews.

User browses the foodtruck's profile and discovers which menu items they want to try for lunch based on other MobileEATS user reviews.

STEP3

4 User creates their custom food order.

User add menu items to their cart and customizes their order as they wish. During their checkout process, the user can add extra items, such as sides and drinks, to their cart before submitting their order.

STEP4

5 User picks up their tasty food order to enjoy!

User gets their order confirmation and gets directions through the MobileEATS app.. They view their transaction in their account, and add a review of their foodtruck experience after eating their meal.

STEP5

Conclusion

The project was a rewarding learning experience to focus on mobile design and the importance of scaling up design based on the primary device your users use. As a designer, it’s important to understand how to meet the core needs of your users with limited screen space.