peter changpeterchangsite.com/img/projects/workshop/chang_peter...case study workshop cafÉ 4 during...

Case Study

Peter ChangProduct Designer

CASE STUDY WORKSHOP CAFÉ

2

ProblemHMW Question 1HMW Question 2

67

ResearchInitial ResearchTarget AudienceCompetitorsContextual InquiryInsight

910111314

UI / UX DesignIdeationIA MapSketchesUser FlowsUsability Testing

1617181925

Final DesignSeat MapOrder SystemRewards ProgramDesign Decisions

30313233

Style GuideColor & TypographyLogo Design

3839

ConclusionConclusionBibliography

4142

Table of Contents

3


The Workshop Café application creates a unique reservation experience on the customer’s mobile phone. In this case study, I deeply understood the mobile experience from the consumers’ side and designed an alternative version for increasing the overall usage.

Overview


4

During my first visit at Workshop Café, the seat choosing function drove me crazy. I could not get any information on the app, such as seat numbers and seating maps. Thus, I needed to ask the staff how to use this application. It was so embarrassing!

Inspiration

5


01. Problem


6

Choosing a comfortable seat is everyone’s purpose when visiting a café. However, the existing application has not made it easy for customers. According to the ratings and reviews in App Store, the functions in the application does not meet people’s expectations.

How might we design an approachable experience?

Choose a Seat

7

CASE STUDY WORKSHOP CAFÉOrder Food & Drinks

The purpose of the online order system is to take orders efficiently. However, in the existing application, users need to either text or email the staff to complete the order. Hence, the current app didn’t save much time compared to ordering food at the counter.

How might we reduce the process?


8

02. Research

9

CASE STUDY WORKSHOP CAFÉInitial Research

I researched customers’ reviews for Workshop Café on Yelp. Overall, people like the concept of the application. However, the usability seems poor without choosing a seat. There are lots of bugs with the booking system and the order system.

Usability & Functionality

One big concern from the users is the application asks for your personal information from the beginning, such as credit card number and phone number. Without that, you can’t access this app. Also, the interface would work better if they reorganized the existing complicated elements.

Accessibility & Presentation


10

According to Alexa.com research, most of the visitors from this application are male, and over 60% of them are 25-34 years old. The majority of users have a graduate degree with income over 100k.

Gender

Male

Female

Percentage

85%

15%

Age

18 - 24

25 - 34

Percentage

23%

65%

35 - 44 12%

Ethnicity

Asian

Coucasian

Percentage

30%

70%

Education

Some College

Graduate School

Percentage

15%

60%

College 25%

Income

$0 - $60K

$60 - $100K

Percentage

28%

20%

$100K+ 52%

SummaryUnited States: 98.9%Other countries: 1.1%

Visitors by Country

Target Audience

11

CASE STUDY WORKSHOP CAFÉCompetitors 1

CanopyPros

Cons

• A quiet, comfortable, stylish space to improve your productivity

• Free coffee and guest passes• Herman Miller ergonomic furniture

• Monthly memberships range from $650 to $5,500• No application


12

Competitors 2

Peet’s CoffeePros

Cons

• City famous brand• Free seats• Multiple store locations in San Francisco• Functional reward system in the application

• No seat-booking system• Not all store locations provide online order system• Limited seating• Noisy environment

13


Based on the target audience research, I went to Workshop Café to interview three customers who use the application. I asked about their experience with the current application, and what they think are the strengths and weaknesses. I also went through the seat choosing process and order process with them.

Contextual Inquiry


14

Insight

The common result that I found through the interviewers was that they doubted about the navigations because it provides repeating features on the home page and on the sidebar. Also, most of the users have difficulties choosing a seat at the first time.

Not convinced navigations and the seat choosing process.

People in the café don’t usually order food and drinks through the application because they need to either text or email the staff to complete the order. Therefore, they decided to order food and drinks at the counter.

The existing order system is not user-friendly.

Some customers are concerned about purchasing food and drinks at the café since the prices are more expensive. When I talked about the idea of the rewards program, all customers said it will definitely enhance their visits at this café and increase their consumption.

Rewards program can increase the visit rate and the usage.


15

03. UI / UX Design


16

I started to define the problems and solutions on the whiteboard. Writing down all the possible choices and crossing out some off-subject ideas.

Ideation

17

CASE STUDY WORKSHOP CAFÉInformation Architecture


18

Sketch Wireframes

19


New UserLogin and choose a seat

The new user needs to sign up through the application, choose a seat number, and add value to the Rewards card to complete choosing the seat.

User Flow 1

01

Sign up Add creditcard info

Home page Seat page

Click choosea seat

Choose a seaton the map

Add Value toyour card

Chose the seat


20

User Flow 1

21

CASE STUDY WORKSHOP CAFÉUser Flow 2

Frequent UserOrder food and pay

After opening the application, the user goes to Order page. He orders a friend chicken sandwich and a latte. Then, he earns 2 points from paying with the Workshop Card in the application.

02

Home page Click cart

Confirm the orderand continue

Sent theorder

Menu page Add food tothe cart


22

User Flow 2

23


Frequent UserGet a Reward and use

After earning 15 points, it can be redeemed for a Reward. The user goes to Card page and pays with the QR code. He uses the Reward to get a free drink.

03

Home page Use the Rewardwith QR Code

Click to Continue

CompletedTask

User Flow 3

Get a Reward Card Page


24

User Flow 3

25


I ran a usability testing with three target users because both of them have been Workshop Café. They did the testing with low-fidelity wireframes and gave me some valuable feedback.

Usability Testing


26

Improvement 1

Some testers asked about how the Rewards Program works. They were confused that they can get rewards with purchasing hours or ordering food. Therefore, on the new version, users can check the Rewards details to learn more.

Rewards Program

27

CASE STUDY WORKSHOP CAFÉImprovement 2

For the previous version, “Add to Cart” action was not clear enough for the testers. Thus, users can see the Add to Cart alert before they complete the order.

Add to Cart


28

Improvement 3

One of the testers said she would like to know if she has successful redeem a reward. The alert page will appear after users get food or drinks with Rewards.

Pay with Rewards


29

04. Final Design


30

When users are going to choose a seat, the Seat Map will show the 3D floor plan and seat details to let them decide on their preference. After choosing a seat, users can easily check the current status or leave the seat.

Seat Map

Final Design

31


Now, users can order food easily through the application. After users add items to the cart, what they have to do next is pay for the bill with their credit cards to complete the order.

Order System

Final Design


32

Bringing in the rewards program is an effective strategy to help retain customers and attract new customers to the cafe. It can also increase the usage of the application.

Rewards Program

Final Design

33


Action: Bringing the 3D floor plan in the seat choosing process.

Testers: “This is clear and easy to understand what seats I can choose. Seating map can definitely improve the choosing process.”

Design Decision - Seat Map


34

Action: Reducing the order process. Users no longer need to text or email to complete the order.

Testers: “Great idea! I don’t like to text or email the staff to order food. It should be completed on the application.”

Design Decision - Order System

35


Action: Earning points on every $3 spent in the application.

Testers: “The overpriced food is my fear to stay a long time at this café. With the Rewards Program, I will stay more hours there and get some free food and drinks.”

Design Decision - Rewards Program


36

Prototype & Video

Prototype Link

https://invis.io/T8Q54Y4ZPHM

05. Style Guide


38

Color & Typography

Primary

#3E220CRGB (62, 34, 12)

Secondary

#D6AF7DRGB (214, 175, 125)

#99999RGB (153, 153, 153)

#FCCEADRGB (252, 206, 173)

#474747RGB (71, 71, 71)

Header / Title Body / Paragraph

Nunito Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdef-ghijklmnopqrstuvwxyz1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

Lato Bold


Lato Regular


39


Workshop Café

Logo with color

Logo in B&W

Final Logo Design

Workshop CaféWorkshop Café

06. Conclusion

41

CASE STUDY WORKSHOP CAFÉCASE STUDY WORKSHOP CAFÉ

41

Having an experience to redesign an existing application is a challenge. To design an approachable experience to fit user needs is my goal for this project. To reach that, I did a lot of researches, interviewed real customers, and received feedback from user testing to make reasonable design decisions. I overcame the difficulties by bringing in the intuitive features. The design process was enjoyable, and I will bring these valuable learnings and skills on to the next project.

Reflection


4242


Contributor, Guest. “6 Tips for Becoming a UX Designer.” How, 23 Feb. 2017,<http://www.howdesign.com/web-design-resources-technology/6-tips-becoming-a-ux-designer/>

Lanoue, Spencer. “7 Gestalt principles of visual perception.” User Testing Blog, 24 Feb. 2016,<https://www.usertesting.com/blog/2016/02/24/gestalt-principles/>

Pun, Heidi. “Here Are 10 Fascinating A/B Testing Examples That Will Blow Your Mind.” Design for founders, <https://www.designforfounders.com/ab-testing-examples/>

Mobbin: <https://mobbin.design/>

Collect UI: <http://collectui.com/>

Mobile Patterns: <http://www.mobile-patterns.com/>

Bibligraphy


THANK YOU

peter changpeterchangsite.com/img/projects/workshop/chang_peter...case study workshop cafÉ 4 during...

Documents