David Kim
 
Home-Mock_large_comp.jpg
 
 
 

Project Summary

 
 

Platter is a content management system that caters to independent restaurants. The goal is to empower small businesses with an all-in-one solution for their POS needs.

Our team was tasked with designing a white-label mobile app for Platter. Businesses will be able to provide their customers with a branded mobile app with online ordering and a loyalty program.

 

My Role: Design Lead
Team: David Kim, Tanya Iniguez, Mike Brunson
Tools: Sketch, Axure, Invision, Photoshop, Whiteboard, pen and paper
Project Duration: 2 weeks

 
 
 
Solid-1-06.png
 
Platter_logo.png
 
 
 

Restaurants and customers currently rely on 3rd party apps to find each other. Businesses lose out on the opportunity to extend their brand and customers pay a premium to order through apps like UberEats or Postmates.

Platter gets rid of the middle man and provides businesses with an all-in-one solution. Businesses can now focus on directly providing their customers with a delightful, branded experience.

 
 
 
 

Discover

Competitor Research, Online Screener Surveys, 
User Interviews, Contextual Inquiry

 
 
Solid-1-03.png
 

The struggle of an independent shop

 

Running a small business is tough! Resources need to be managed well and relationships need to be cultivated with their customers. Food discovery apps like Uber Eats mean that restaurants can be found — which is great!

Food discovery apps can help businesses make a sale but they are not designed to for repeat customers. Let's see what happens when an order is placed on a food discovery app that we'll call 'Munchster'.

 
Points of contact when a customer orders food through a food discovery app called 'Munchster'

Points of contact when a customer orders food through a food discovery app called 'Munchster'

 
 

Key Insights

  • The business never gets to connect with the customer

  • The customer sends feedback through the 'Munchster' app — increasing the app's credibility

  • 'Munchster' has established an on-going relationship with the customer via emails and marketing opportunities

 
Small businesses have no way to reach out to 'Munchster' customers.

Small businesses have no way to reach out to 'Munchster' customers.

 
 
 
 
 

How do people order food online?

 
 
 
SingleBrandapp_ICONS_2.png
 

Single Branded apps

Pros

  • Rewards programs

  • Order history and item favorites

  • Allows detailed customization

Cons

  • Takes time to learn

  • Adds another app to user's phone

 
discoveryapp_ICONS.png
 

Food Discovery apps

Pros

  • Hundreds of local options

  • Convenient when looking for a new food

  • Easy to use

Cons

  • Expensive delivery charge

  • Customer connection to restaurants blocked

Solid-1-06.png
 

Identifying User Behaviors

 

I conducted user interviews and collected online surveys to understand how people used their food ordering apps. We also surveyed users on their experience with single-branded and discovery apps to gain insight on their preferences.

 
 
whiteboard 1
 
 
 
Results to the question: What drives you to use these apps?*  *showing highest results

Results to the question: What drives you to use these apps?*

*showing highest results

 
 
 

96% of users currently had a single-branded apps while 77% of users currently had a discovery app installed

 
 
 

User Interviews

 
 
User Interview with stakeholders revealed key insights into the difficulties of running a business

User Interview with stakeholders revealed key insights into the difficulties of running a business

 

“Square already takes 3% for each credit card transaction… I can't afford to have my own app.”

— S. Kim, Small business owner

 
 
 
 

“I like the rewards but I use it because I love the customization features.”

— L. Rodriguez, Cafe Customer

Field Interviews revealed how users used their apps

Field Interviews revealed how users used their apps

 
 

Contextual Inquiry

 
 
Ordering a drink through the Starbucks app

Ordering a drink through the Starbucks app

 

Observing users with their apps, while thinking out loud, gave us an opportunity to see how users actually use their apps. We learned about what they liked and wanted out of their apps. We asked users to use apps that they already had installed on their phones.

 
 
 

Key Insights

Business Owners

  • Businesses that use third party POS systems pay up to 3%* per transaction

  • Many businesses rely on punch cards and email lists to reward customers if they don’t want to use another third party service

  • Owners want more ways to connect with their customers

Customers

  • Convenience was the main reason for using food apps

  • Branded apps were used for both delivery and pick up

  • Users were drawn to apps with rewards programs

  • Users wanted to be able to customize their orders

 
 
 

Define

Personas, Customer Journey Map, Feature Prioritization

 
 
Solid-1-03.png
 

Making sense of the research

 

Affinity mapping, card sorts, and white boards.

 
Building out an affinity map to identify patterns from our research

Building out an affinity map to identify patterns from our research

Creating a persona from the results of the affinity mapping

Creating a persona from the results of the affinity mapping

 

Identifying user needs, pain points, and behaviors helped in creating personas and their scenarios.

 
 

Personas

Iris_persona-web.png
 

Iris is the proud owner/operator of Firebrand Coffee Co. She uses the highest quality beans from a boutique roaster and aims to tell a story with each cup she sells.

Iris relies on third party services like Square and 5 Star to process payments and reward her customers. These services get the job done but she is paying 3% per credit card transaction and a monthly fee to maintain her loyalty program.

 
Brian_persona-web.png
 
 

Brian is an accountant working out of downtown Los Angeles. His days are busy and he does not like wasting his time or money.

Brian is also a coffee connoisseur and is particular about where he takes his business.

He discovered Firebrand Coffee through Postmates but decided that he would pay them a visit and avoid the delivery fee.

 
Brian’s coffee journey

Brian’s coffee journey

 
 

Key Insights:

  • Brian had to wait in a line before even placing his order

  • His drink takes time to make resulting in increased wait time

  • The business doesn’t have a way to engage Brian to give him an incentive to return

 
 
 
 

Problem Statement

Brian enjoyed the coffee Firebrand Coffee Co. but was frustrated that his visit took so long. They offered great customer service but the wait can get really long. How might we streamline this process so that Brian can order his coffee with confidence?

 
Solid-1-06.png
 

Feature Prioritization

 

With the problem statement identified, I was able to define which features would be most valuable for the Platter App.

 
 
 
Platter Features.png
 
 
 

My Process

 
 
 
Task analysis identified user needs and pain points

Task analysis identified user needs and pain points

 
 

Analyze the task and put a story to it

  • Stories put the user and product in context

  • Context puts constraints on the product… which is good!

  • I decided to use the Kano method to categorize all the features into 3 categories: Exciters, Expected, Wants.

 
 
Kano model to help us determine the right features to implement first

Kano model to help us determine the right features to implement first

 
 

The Kano Method

  • Exciters - Features that are “nice to have” (non-essential)

  • Expected - Features that are expected by users based on common convention

  • Wants - Features that our users expressed that they wanted

We wanted to make sure that the app would give users a sense of confidence while using the app.

 
 

Navigation

 

We conducted open and closed card sorting exercises with 10 participants to ensure that our navigation and menu categories were intuitive.

 
 
Card sorting helped me organize the navigation schema and information architecture

Card sorting helped me organize the navigation schema and information architecture

Platter sitemap template

Platter sitemap template

 
 

Key Insights

  • Many single branded apps do not rely on a traditional navigation schema

  • Users expect to be able to locate the item they want within a few taps

  • Users expressed that pictures often influence their purchases

 
 
 

Design

Wireframes, Usability Testing, Prototype

 
 
Solid-1-03.png

User flows and wireframes

Brian’s new journey demonstrates how a the platter app improves the overall experience for the customer and the business.

 
Platter app lets Brian order ahead and eliminates the chance that Brian will have to wait at the coffee shop.

Platter app lets Brian order ahead and eliminates the chance that Brian will have to wait at the coffee shop.

 
 
 

Brian’s new user flow

 
 
Brian’s “happy path” with ideal conditions.

Brian’s “happy path” with ideal conditions.

 
 
 

Design Studio

The purpose of this exercise was to rapidly iterate on screen designs while making sure that the designs aligned with research findings.

 
Whiteboard sketches from our design studio

Whiteboard sketches from our design studio

 
 
 

Round 1

  • (10 min) - Sketch out 3+ versions of the screen

  • (5 min) - Present each screen

Round 2

  • (10 min) - Steal and Combine; Sketch out 3+ versions of the screen

  • (5 min) - Present each screen and Vote as a team

Round 3

  • (10 min) Design Together

 
 
 

Mid-Fidelity Wireframes

I took the results of the design studios and created mid-fidelity wireframes so that we could conduct usability tests.

Mid-fi prototype of the Platter app

Mid-fi prototype of the Platter app

 
 
 

Usability Testing

Usability tests were conducted to gain insight on how users were understanding the UI and copy. Some screens were brought to a higher fidelity to give a more realistic feel to the wireframes. Users were prompted with a scenario and task.

 

Scenario: You are placing an order at your local coffee shop

Task: Order a Caramel Latte for Pickup

 
 
 
Usability test of a medium fidelity wireframe

Usability test of a medium fidelity wireframe

 

Listening to Feedback

Usability tests revealed that setting a pickup time and indicating the type of order (pickup/delivery) was introduced too early in the user flow.

 

“The problem wasn’t as much about the form’s layout as it was where the form lived...It came before they could actually enter the information to pay for the product.”

— Jared Spool, UX Researcher, Writer, Educator, source

 

Asking users to select when they wanted to pick up their order before they even placed an order was too big of an ask. By moving this screen to the checkout flow, users were able to freely navigate the app without committing to a time.

 

Key Insights

  • Users showed hesitation when trying to set a pickup time before picking what they wanted

  • Users voiced that they wanted to see more details about the product over seeing customization options

  • Customization options created too much scrolling

  • Users were delighted by the rewards points and the prospect of free items

 
 
 

Hi-Fi Prototype

Sketch & InVision

 
 
Solid-1-03.png
 

Platter App

The result of 2 weeks of research and design. Designs were made on Sketch, Photoshop and InVision.

Mockup_SquareSpace.png
 

Styleguide

 
Styleguide_darker.png
 
Platter-Prototype_Main-menu_comp.gif
 
 

A completely branded experience

  • Colors and images can be added from the Platter CMS to allow for a branded experience

  • Clear labels and pricing help guide users through the app

 
 
Platter-Prototype_customize_comp.gif
 
 

Customize your order how you like it

  • Items can be added to your bag as is or after customization

  • Floating Action Button makes adding items to your cart easier

 
 
Platter-Prototype_Set-Time_comp.gif
 
 

Set a pick up time

  • Customers can set their desired time in 15 minute increments

  • A large CTA at the bottom of the screen makes it easy to proceed to the checkout screens

 
 
Platter-Prototype_Checkout_comp.gif
 
 

Add a cookie, checkout and get a reward!

  • Users are presented with suggestions to add to their order before continuing to a review screen

  • Restaurants have the option to add a rewards program to their business. Firebrand has chosen to give back to their customers with every purchase

  • You can even tip your barista!

 
 
 
 
 

Next Steps

 

Platter is currently being developed for a small business chain in Los Angeles and Santa Monica. The next challenge is building out a CMS that will allow businesses to customize and manage the content shown on their mobile apps.

The Platter POS is being designed for use at Silverlake Ramen in Los Angeles, CA.

 
 
 
 
Solid-1-03.png