Yelp iOS Application - envelopepusher.com · yelp mobile payment case study | 4 what i’m going to cover: n the project details n the team, our backgrounds and points of view n my

Yelp iOS Application Mobile Payment | 10.03.14

Yelp Mobile Payment Case Study | 2

WELCOME TO OUR PROJECT

THIS IS NOT A CASE STUDY FOR A REAL LIFE PROJECT

... AND THAT’S OKAY

It’s the actual story of how my team was given a problem to solve with constraints and collaborated to solve that problem.

Some background information before you read any further:

n This was a project for a 10 week UX Design Immersive Program at General Assembly in New York

n The course provided us with tools and an overview of the UX design process

n We adapted what we learned to fit the constraints we were given and ensured we were on target for our deliverables and that our deliverables were tested with users

n Team members had different backgrounds and skillsets and needed to most effectively divide the work

Final Yelp Pay Screen CONFIRMATION THAT YELP PAY

CHARGE WENT THROUGH

Introduction


WHAT I’M GOING TO COVER:

n THE PROJECT DETAILS

n THE TEAM, OUR BACKGROUNDS

AND POINTS OF VIEW

n MY ROLE

n OUR PROCESS, DAY BY DAY

n THE SOLUTION

n NEXT STEPS FOR IMPROVING

THE SOLUTION

The project details

“Yelp is looking to increase the level of engagement with their users and merchants by adding a mobile payment component to check-ins.

With the popularity of mobile payment apps, like Square, Yelp realizes there is a huge

market opportunity they are missing out on. Yelp wants to start with an MVP — the smallest feature set that is valuable to users.

Understanding how people use Yelp currently, and how people make payments in physical locations, design the key screens using the current look and feel of Yelp.”

SOME THINGS TO CONSIDER:

nYelp’s reward system and how that may relate to payments

nFocus on the customer experience, and don’t worry about the business-facing side of this new feature

TARGET DEVICES:

n Tablet or Mobile App.

TIMELINE:

n Project was due in 11.5 days

INTRODUCTION




n THE TEAM, OUR BACKGROUNDS AND POINTS OF VIEW

n MY ROLE


n THE SOLUTION


THE SOLUTION

The team

INTRODUCTION

MICHAEL MALIK JONES-ROBINSON

Educator and Youth Development Specialist, 8 years professional experience in NYC

“ I help people use the tools they already have to navigate their environment.“

ANDY SIMPSON

Director at Stamford Web Design, eCommerce Developer, Social Media Adviser and Search Engine Optimisation Consultant, 23 years professional experience in UK and US

“ To be a UX designer is to obsess about how people interact with things and with each other, to enable the sweetest and most rewarding interactions in any given context.“

KIM FRIEDMAN (ME)

Lead at Kimberly Friedman UX, Design, and Marketing 15 years professional experience in NYC

“ Solving a user experience problem is like writing a choose-your-own-adventure story and solving for every possible ending. ”




n THE TEAM, OUR BACKGROUNDS

AND POINTS OF VIEW

n MY ROLE


n THE SOLUTION


OUR SOLUTION

My role

SINCE I HAD PREVIOUS EXPERIENCE IN THE FOLLOWING AREAS, I LEAD THE DISCUSSION FOR THE FOLLOWING:

nMentoring Malik with the project management piece and helping set up tasks in Basecamp — it was his first project management experience

nSetting up surveys and gathering responses, teaching the team how to organize all the Survey / Interview feedback into an Affinity Diagram

nKeeping us aligned with the MVP when we started to go in different directions (we started imagining complex bill-splitting scenarios)

nResearching security protocols for apps and how we could give customers peace of mind in using mobile payment

nPutting a face to the names in the Personas

nRolling Yelp Pay into the existing scenario for Yelp app

nMaintaining the Yelp look /feel through visual design for the mock-ups, Yelp Pay icon and presentation to our class

nFormatting the wireframes into full Photoshop mock-ups, but also teaching Malik and Andy Photoshop tricks and tips

INTRODUCTION


Our process, day-by-day1 Mon, 22 Sept

2 Tues, 23 Sept

3 Wed, 24 Sept

4 Thurs, 25 Sept

5 Fri, 26 Sept

6 Sat, 27 Sept

7 Sun, 28 Sept

8 Mon, 29 Sept

9 Tues, 30 Sept

10 Wed, 1 Oct

11 Thurs, 2 Oct

At

Gen

eral

Ass

emb

ly C

o-w

orki

ng S

pac

e 9a

m -

9:3

0pm

At

hom

e

Setup Basecamp & Google Hangout

Assigned PM Role to Malik Defined MVP

Payment User Flow v1

Payment Task Analysis v1User Flow v2 Restaurant

Developed Survey 1

Payment Task Analysis/Sketches v2

Paper Prototype Testing: Rob

User Interview Aaron

Yelp Analysis

Contextual Inquiry: Starbucks App at Starbucks

Presentation Script/Timing PresentationSurvey 2

QuestionsiPhone 5 Yelp Screenshots

Wireframes Existing Yelp v2


Assigned to Yelp team

Reviewed Survey 1 Results v1

Reviewed Survey 2 Results

Paper Prototype Testing: Mike

Paper Prototype Testing: Dom

Organizational Model

Sign Up Scheme User Flow v1

Wireframes Sign Up Scheme v2

Reviewed all wireframes Mockup v3

Affinity Diagram on Wall with notes from surveys

Paper Prototype Testing: Jess

Paper Prototype Testing: Danielle

Persona Development

Organizational ModelAnalyzed brief Presentation

DesignSign Up Scheme Wireframe v1

Wireframes Payment v1

Updated Prototype (iOs)

Digitized Persona Development

Meetup with Luke Miller RevisionsYelp / Directory

Analysis

Named and found photos for Personas

Formatted Personas

Translated Wireframes to Mockup v1


Test Prototype in Flinto

Mockup v2 Updated Documents



User testing with Malik’s Mom

Survey 1 DeploySecurity Research (App privacy policy)

Formatted Org Chart

Mobile Payment Analysis

Set Up and Deployed Survey 2

User testing with Aaron W.


Set Up Final Prototype in Flinto (Android)

User Interview Stef

Paper Prototype Testing: Stef

Paper Prototype Testing: Kevin

Started Competitive Analysis

Contextual Inquiry: Toby’s Estate Coffee using PayPal

Presentation Script/Timing


Sketches Payment v2


Practiced Presentation

TEAMWORK

ALL

KIM

MALIK

ANDY

WE WORKED ON THE ORANGE TASKS TOGETHER I WAS RESPONSIBLE FOR THE BLUE TASKS

User Flow v1 Restaurant

Existing Yelp User FlowAssigned Tasks

Schedule and To-dos on Basecamp

User Interview Questions

User Interview Nadia

Individual Concept Map, Storyboard

Survey 1 Results v1 on Post-its

Survey 2 Questions

Task Analysis v1

New Yelp Pay Icon Design

Reviewed Concept Map, Storyboard

DAY-BY-DAY


Day 1: Monday – full speed ahead with researchTODAY’S TASKS LEARNING ABOUT YELP MOBILE

TEAMWORK

ALL

KIM

MALIK

ANDY

Assigned to Yelp team

Analyzed Project Brief

Started Competitive Analysis

Setup Basecamp & Google Hangout

Developed Survey 1

Assigned PM Role to Malik

Yelp Analysis

Survey 1 Deployment + Security Research

Mobile Payment Analysis

Yelp / Directory Analysis

SOURCES: HTTPS://WWW.QUANTCAST.COM/YELP.COM SOURCE: HTTPS://WWW.BASECAMP.COM

SURVEY 1HTTPS://WWW.SURVEYMONKEY.COM/S/

ZN8BN9G

PROJECT MANAGEMENT

DAY-BY-DAY

YELP

CUSTOMERS

MOBILE PAYMENT MARKET

n SAVE TIME

n SAVE MONEY

n SECURE

n EASY

n INCREASE LOCAL

ADVERTISING REVENUE

n QUALITY REVIEWS

n SOCIAL INTERACTION

GOALS


Day 1: spotlight on comparative/competitive analysisLEARNING ABOUT MOBILE PAYMENT

LEARNING ABOUT DIRECTORY SERVICES AND CHECK INS

TODAY’S TAKEAWAYS

We should focus on iOs first

We should consider focusing on using Yelp mobile app for dining /restaurant-based scenario

In order to write a good survey we should have a hypothesis in mind and not use multiple choice as it might steer a user – better to leave open-ended

It’s really hard to write a good survey without question logic, if you’re using SurveyMonkey upgrade to Premium

Check Basecamp often

Grab screenshots of all your comparative/competitive apps, analyze their user flows

DAY-BY-DAY


Day 2: Tuesday, early stages of ideationTODAY’S TASKS ARTIFACT FROM THE DAY

TEAMWORK

ALL

KIM

MALIK

ANDY

Wrote User Interview Questions

User Interview: Nadia

Task Analysis v1

User Flow v1, Restaurant

Individual Concept Map

Individual Storyboard

Survey 1 Results v1 convert to Post-its

Survey 2 Questions

Schedule and To-dos on Basecamp


MY USER FLOW V1, RESTAURANT

GROUP CONCEPT MAP, V1MY V1 STORYBOARD

DAY-BY-DAY


Day 2: spotlight on surveysGAINING INSIGHT ON OUR USERS TODAY’S TAKEAWAYS

Carefully crafting the second survey was necessary in order to have enough data to develop personas

Putting everything into Basecamp made us all visualize our work for the time-frame, was very helpful

We each had a different way of thinking and were bickering a bit, so Malik suggested we all put our own ideas on paper first, then review as team and make every major decision together so that we all had buy in.

This is what kept us on track the entire project — it was crucial.

SURVEY 1: OUT MON., RESPONSES TUES. + WED.

HTTPS://WWW.SURVEYMONKEY.COM/S/ZN8BN9GSURVEY 2: OUT WED., RESPONSES WED. AND THURS.

HTTPS://WWW.SURVEYMONKEY.COM/S/H5PHRQS

WE ASKED ABOUT

n Demographic / psycho-graphic info (Age, Living Situation, Brands, Hobbies, Travel, Business)

n Technology used and acceptance of new

n Favorite and most used apps

n Dining / bar habits

n Yelp usage: Where / Why / How

n Check-in habits and benefits

n Mobile payment usage and rationale

KEY FINDINGS

n Fewer people responded but answers were more useful

n Concerns with mobile payment were almost purely about security and privacy

n Offer-driven check-in was important

9 responses

Sent to our Facebook friends, + personally sent to select respondents of Survey 1

WE ASKED ABOUT

n Use of Review Services: Y/N and Which

n Use of Mobile Payment Services: Y/N and Why

n Check-in Habits: Y/N and Where

KEY FINDINGS

n Survey didn’t have enough qualitative data, nor background information

n Content was useful to screen participants

n Provided us a list of brands and services to review during comparative and competitive analysis

n A second survey was definitely necessary for digging deeper on habits and behavior with regard to background info

Sent to our Facebook friends, emailed, and sent to other UXDI classmates

36 responses

DAY-BY-DAY


Day 3: Wednesday, using mobile paymentTODAY’S TASKS FIELD TRIP: TOBY’S ESTATE COFFEE

TEAMWORK

ALL

KIM

MALIK

ANDY

Reviewed Survey 1 results

Affinity Diagram on the wall with notes from survey responses

Contextual Inquiry: Using PayPal at Toby’s Estate Coffee

User Flow v2, Restaurant

Meetup with Luke Miller

Reviewed Storyboards

Set up and deployed Survey 2

Survey 2 Questions


The number 1 mobile payment application used and trusted by our survey respondents and interviewees is PayPal.

We went to Toby’s Estate Coffee to observe PayPal in action, where we learned that a photo was required so the business could tie the customer with the tab.

To the left is the photo on the app and their P.O.S. system, which led us to keep the system in mind when developing our solution, as well as implementing a Photo ID as an additional security measure.

DAY-BY-DAY


Day 3: spotlight on affinityWE TOOK THE DATA FROM THE SURVEY RESPONSES AND TURNED IT INTO REQUIREMENTS FOR THE MVP

TODAY’S TAKEAWAYS

There was confusion about whether to build the categories top down or bottom up. I believe it should be bottom up because it’s based directly on the data, not your ideas.

It’s difficult to assume how mobile payment works until you go into the field and use it. This is where we first observed how the business P.O.S. system could work.

The second survey was a priority because we didn’t have enough data.

DAY-BY-DAY


Day 4: Thursday, organizing the survey response data TODAY’S TASKS BREAKTHROUGHS IN PERSONA DEVELOPMENT: SURVEY 2 DATA

TEAMWORK

ALL

KIM

MALIK

ANDY

Reviewed Survey 2 results

Persona Development

User Interview: Aaron P.

User Interview: Stef K.

Defined MVP

Payment Task Analysis /Sketches v2

Digitized Personas


SURVEY 2 AND USER INTERVIEWS FINALLY GAVE US THE DETAILS WE NEEDED TO CREATE PERSONAS

DAY-BY-DAY


Day 4: Breakthrough, the first full task analysisWE TOOK OVER AN ENTIRE WALL TO WORK OUT THE EXISTING PROCESS FOR PAYING AT A RESTAURANT, THEN DETERMINED WHERE YELP MOBILE PAYMENT WOULD FIT IN.

DAY-BY-DAY

PAYMENT PROCESS BEFORE MOBILE PAYMENT

PAYMENT PROCESS WITH YELP


Day 4: Breakthrough, the first full task analysisUSING YELP APP, THEN PAYING WITH CASH /CREDIT

YELP PAY USER FLOW, V1

TODAY’S TAKEAWAYS

We initially had the idea of allowing the user to transfer a set amount of money into a “bucket” a-la Starbucks / EZPass to mitigate security risk, but abandoned that idea after completing the user flowWe eventually implemented a 2-step process to provide reinforcement and peace of mind

At this point, we explored and analyzed the “linking with the merchant” aspect of checking in

The MVP Yelp Pay had to allow the user to check in and pay for their meal, be secure, save the user time and save the user money / provide some sort of offer for checking in

It was also apparent at this point that the project could break cleanly to 3 parts so each of us could focus: Existing Yelp App, Paying with Yelp Pay, Setting up Yelp Pay

DAY-BY-DAY


Day 5: Friday, prepping for wireframesTODAY’S TASKS FORMALIZING THE PERSONAS (see p. 14 for details)

TEAMWORK

ALL

KIM

MALIK

ANDY

Organizational Model v2

Sketches: Payment v2


Named and found photos for personas

Yelp Mobile Payment Case Study | 16DAY-BY-DAY

PRIMARY

SECONDARY


Nearby(no edits)PT: Scene 2User: Tap More Categories

Nav1. Add Yelp Pay Account to buttonsPT: Scene 1 Act 1

Nearby More CategoriesAdd Yelp Pay above DealsPT: Scene 2bUser: Tap Yelp Pay

Search Listview With Check-in offersPT: Scene 2fUser: Tap Restaurant Name

Search Listview With DealsPT: Not Needed

Search Listview UnfilteredPT: Scene 2d

Restaurant Full ViewAdd Check in and use Yelp PayPT: Scene 2gUser: Tap Check In and Pay with YP

Restaurant Full View Check in and CommentSwap with Almond Add Check in and use Yelp PayPT: Scene 2hUser:

Restaurant Full View Check in and CommentAdd Check in and use Yelp PayPT: Scene 2hUser: Tap Check In and Pay with YP

Restaurant Full ViewShowing a place with all Deals, Check in offers, Announcements

Restaurant Full View Checked In

Add Checked in and use Yelp PayAdd Notify Your WaiterPT: Scene 2hUser: Tap Check In and Pay with YP

Restaurant Full View Checked In

Add Notify Your WaiterPT: Scene 2hUser: Tap Check In and Pay with YP

iOs Notification of LInking

Add Notify Your WaiterPT: User:

Order Page


Review Order Page

PT: User:

Close Order


Confirmation

PT: User:

Search FilterAdd Pay by Yelp PayPT: Scene 2eUser: turn on Yelp Pay

interimPT: Scene 2cUser: nothing

Days 6-7: Integration with existing Yelp wireframesTASKS FIRST LOOK AT INTEGRATION: OVERVIEW

TEAMWORK

ALL

KIM

MALIK

ANDY


Reviewed all wireframes

Revised all wireframes




User testing with Aaron W. at dinner

Sign Up Scheme User Flow v1

Sign Up Scheme Wireframes v1


THE ABOVE REPRESENTS ALL THE WIREFRAMES WE THOUGHT WE NEEDED FOR THE YELP PAY IN-USE FLOW, BLANK FRAMES REPRESENTED THE NEW PAGES MALIK WAS GOING TO CREATE FOR PAYMENT.

IN THE MEANTIME, ANDY WAS WORKING ON THE SIGN UP PROCESS.

SO FAR, YELP PAY SEEMS TO FIT IN

Nearby(no edits)PT: Scene 2User: Tap More Categories

Nav1. Add Yelp Pay Account to buttonsPT: Scene 1 Act 1

Pay

Nearby More CategoriesAdd Yelp Pay above DealsPT: Scene 2bUser: Tap Yelp Pay

Yelp Pay

Central_Nav Nearby Nearby_MoreCategories


Days 6-8: Finding the right solutions for complex conceptsSATURDAY NIGHT TESTING:

STOPPED SHORT AT CHECKING IN

Aaron W. is a Yelp Mobile app user and was hanging out at a dinner party I attended. He started to test the wireframes for existing Yelp App with my integration of Yelp Pay.

We never got any further than the below wireframe after a 20 minute discussion over whether checking in and using Yelp Pay were mutually exclusive. Back to the drawing board!

SUNDAY, ITERATION 2. CHECK IN FIRST.

THEN ASK IF THEY WANT TO USE YELP PAY.

Two new options to test on Sunday night/Monday:

1. (Left) Check in, turn Yelp Pay on, then complete check in 2. (Right) Check in, then choose either Regular or with Yelp Pay


search_fullview option 1: Check in and use YP

Check In and Use Yelp Pay

search_fullview option 2: claiming a YP offer

Check in here + use Yelp Pay to unlock this offer

Yelp Pay Offer: 1 free Chef’s Snack -OR- Sweet Treat

search_fullview_checkin option 1: First, turn Yelp Pay on, Next, check in.

search_fullview_checkin option 2: You can Check in or Check in with Yelp Pay

Too many choices What’s going on here?

Only representation of Yelp Pay here is Check in with Offer?

WINNER!

Better than Saturday but still confusing.


Days 9-10: Finding the right solutions for complex conceptsIS THIS A BUTTON? NO, IT’S AN ALERT TELLING YOU TO INFORM THE BUSINESS YOU’RE THERE.

search_fullview_checkedin_un-linked

PT: Scene 2kUser: Tell their waiter

search_fullview_checkedin_linked

PT: Scene 2lUser: Start using Yelp Pay (go to orders)

My Account My Account

Please tell Almond you are using Yelp Pay.

You are now using Yelp Pay. Don’t forget to ask about the check-in offer. OFF

search_fullview_checkin_offer

PT: Scene 2jUser: Tap Close

Add Offer to your OrderPlease tell Almond you are using Yelp Pay.

search_fullview_checkedin_un-linked

PT: Scene 2kUser: Tell their waiter

search_fullview_checkedin_linked

PT: Scene 2lUser: Start using Yelp Pay (go to orders)

My Account My Account

Please tell Almond you are using Yelp Pay.

You are now using Yelp Pay. Don’t forget to ask about the check-in offer. OFF

search_fullview_checkin_offer

PT: Scene 2jUser: Tap Close

Add Offer to your OrderPlease tell Almond you are using Yelp Pay.

search_fullview_checkedin_unlinked search_fullview_checkedin_unlinkedsearch_fullview_checkedin_linked search_fullview_checkedin_linked

Is this a button? Is this a button?

Yelp Style Guidelines for Alerts: http://www.yelp.com/styleguide

BEFORE: IS THIS A BUTTON? AFTER: MESSAGE AT THE TOP OF YOUR SCREEN

On Monday and Tuesday (Day 8-9), our wireframes were tested with several people, and at least 3 of them tried to push the below alert messages as if they were buttons.

DAY-BY-DAY


Day 11. Proving it works

I simultaneously demonstrated the Prototype while Andy and Malik acted it out real time

http://invis.io/8G1ONENE7

I’d like to use Yelp Pay

Welcome to Almond Restaurant

Yelp Mobile Payment Case Study | 20THE SOLUTION


Next steps

NEXT STEPS AND CONTACT INFORMATION

WE ACCOMPLISHED A LOT AND FULFILLED THE CUSTOMER, MOBILE PAYMENT, AND BUSINESS GOALS, BUT THERE’S STILL MORE TO DO:

nDevelop for the Android platform

nDevelop the business-side P.O.S. integrated solution

nSolve complex bill-splitting scenarios and checking in with friends who wanted to pay with a combination of Yelp Pay and cash

nPut the prototype in front of Yelp Mobile App power users (anyone that already uses the check in features and has Elite status), continue to iterate

THANK YOU!


n MY TEAM, OUR BACKGROUNDS

AND POINTS OF VIEW

n MY ROLE


n THE SOLUTION

n NEXT STEPS FOR IMPROVING THE SOLUTION

GET IN TOUCH

+1.917.697.0751 [email protected]

envelopepusher.com

twitter + Instagram: @designer_kim

www.linkedin.com/in/kimberlydfriedman/

http://www.envelopepusher.com