Cindy Francies | Design & Code

yummeats logo

The Design Problem:

Bring the Sharing Economy of Airbnb and Uber to Takeout

I was asked to develop the design for and iOS application that would not just look good, but be usable, engender trust, and promote the growth of a virtually unknown business model for takeout food.

Roles:

Research, Branding, Design, Copy, UI, Prototyping

Case Background

The sharing economy is estimated to grow from $14 billion in 2014 to $335 billion by 2025.”1 The digital technology that created platforms to get a cheaper ride or a place to stay is ready to be adopted by other segments of the economy. In 2016, 52% of Americans ordered take-out from several times a month or more.2

A robust meal-sharing application is the ideal platform to bring busy consumers a variety of cuisines prepared by home-based chefs.

mock up of application
YummEats
Baltimore, Maryland

Methodology

User research was developed to learn the following:

After completing this research, personas were developed to drive empathetic design and understanding of the typical potential user’s needs.

Competivite analysis was undertaken to understand the approach and focus of business that represent early entries to the market.

The design and branding was then developed and tested.

Research Results

49 partipants responded to an online survey.

Critical findings that describe the prospective YummEats customer include:

Our design will need to accomodate a tech-friendly user that is extremely comfortable completing purchases from their mobile device.

Additionally, since most people are unfamiliar with mealsharing, it is important to create a realistic design that features real people that use and cook for YummEats, as well as attractive food is prepared by YummEats chefs.

Design

Approach

Create a design that is friendly and engenders trust. YummEats will be portrayed as a solution for a problem that many busy consumers face: "What's for dinner?"  Emotionally, it will appeal to wamth, comfort, and safety.

Branding

Red was selected as a prominent logo color for its traditional association with food and emotion.

logo

Photography

A conscious effort was made to portray the YummEats customer, as well as portraying a chef in a profile, in order to build human connections and community. In addition, quality food photography is featured.

photos from app

Fonts

Helvetica Neue was selected as a the primary text font for readability and familiarity. Bariol was selected for the logo for its mix of a professional yet friendly feel.

picture of fonts in app

User Testing

Modifications

Testing is critical throughout the project life-cycle. Working in agile sprints means modifications are smaller in scope and can be managed more quickly.

UX

An early attempt to portray more information about a chef’s menu before entering the order workflow created unnecessary clicks. The flow was revised to speed-up ordering.

menu

Logo Development

A/B testing was used to identify improvements to the logo; as a result, an attempt to portray a hot bowl of food with steam was simplified.

first version of bowl

Chopsticks?

Squiggly lines?

Yummy!

Buttons

The initial button color for food options, black, was judged too harsh next to the food. A more harmonious color with adequate contrast was selected.

CTA button

Prototyping

Beginning the project

Initial project protoypes contained interface elements and images that were too small.

Final Prototype

Higher-fidelity designs were refined to take advantage of iOS design principles such larger buttons, full-width images and simpler user flows.

Lessons Learned

This project highlighted the difference between UI and UX. I designed screens that looked good-but a customer would abandon because I was asking them to take too many steps to complete a task. This has encouraged me to think about user-flows more deeply.

Additionally, this project gave me the opportunity to appreciate the importance of researching throughout the project life-cycle. A/B testing and prototype testing was utilized to create a better design.

I identified working with 8-pixel grids as a consideration for future projects to improve the vertical rhythm in my designs.