Save and spend your time at the coffee shops just as you planned.

the final product

Time is a reservation mobile app for millennial coffee shop customers. Time provides advanced search for specific needs and suggests best suited coffee shops to the users with reservation options.

Fast forward to FINAL PROTOTYPE >>

Project overview

Project overview

Project Type

Academic

Constraints

10 Weeks

Mobile Device

Role

UX/UI Designer

Product Designer

tools

Figma, Sketch

Invision

discover

Project Goal

To create a digital solution for coffee shop customers to improve their experience while keeping the two points below in mind.

Technical feasibility

Utilization of existing technology in the current world

Business viability

Should be beneficial to both customers AND business owners to have potential in the real market

Methodology

The double-Diamond Model

I decided to utilize the double-diamond model for this design challenge. The double diamond model takes problem to its solution through four steps;  Discover & Define through research and Design & Deliver.

The double-Diamond model

The Four Steps

How I was drawn

How I was drawn

Motivation

As a coffee lover, to be specific, a coffee shop lover, I wanted to find ways to improve coffee shop experiences and enhance satisfaction rates for the customers.

Realization

I’ve conducted 10 preliminary surveys with coffee shop customers (5 regular and 5 irregular) asking about their recent experiences at the cafe. Dissatisfactions were mostly related to long waits or not getting in due to zero available seats rather than the quality of products or their services, which narrowed down things to a common theme of ‘lack of seatings’ at coffee shops.

Problem

Problem Space

Coffee shops nowadays have became much more than just a place to grab a coffee. They serve a purpose to not only provide a location for a casual social gatherings, but also a workspace for study, work, business or school meetings, interviews and more which often require longer seating hours.

Regardless of the expansion and shift of the target consumer, unlike restaurants, where reservations and waitlists are commonly made to guarantee seatings at a specific time and day, coffee shops do not have the same efficiency and solutions for issues based on lack of seatings and yet 10 out of 10 participants in surveys identified as having a disappointing coffee shop experience based on lack of seating.

How might we

HMW Question

“HMW help coffee shop customers avoid disappointing experiences based on lack of seatings?”

the Double-Diamond Model

Discover

-

Define

-

Design

-

Deliver

the Double-Diamond Model

Discover

-

Define

-

Design

-

Deliver

Discover

Research

- Survey

As briefly mentioned in the overview, I've conducted 10 preliminary surveys with coffee shop customers (5 regular and 5 irregular) asking their recent experience at the cafe. This assisted in defining the problem space and gave me confidence to move ahead with the secondary research.

Lack of seatings

100%

Lack of seating was the most frequently identified issues when asked about disappointing experience at the coffee shop by all ten participants.

- Secondary Research

The trend of coffee shop being more than simple ‘place to get a coffee’ is likely to grow

50%

Those worked outside the office were 50% better at attrition rate, 13.5% more efficient and 9% more engaging than those worked at the office.

75%

More and more people drink coffee at home or office, but still 75% of coffee consumption rate has steadily increased even during pandemic

Beneficial to both

120%

The online booking services for restaurants are beneficial to both customers and business owners. It increases customer satisfaction and increase revenue up to 120%

MEet the priority value

Value

Whether it is the taste, price, brand or the atmosphere, if customers’ top psychological consumption value is made, the experience was described satisfied.

discover

Assumption

Based on the insights discovered through reseach, various assumptions are made about users needs, market and the design solution.

discover

Hypothesis

I believe that implementing a solution that helps customers to no longer be uncertain about available seats to minimize wait time will lead to improved satisfaction in the coffee shop experience.

I will know this hypothesis is true when 2 out of 3 interviewees indicate long line up as cause of their disappointing experience at coffee shops

discover

Primary Research

Then it was time for the hypothesis needed to be tested with qualitative data which will provide further insights on the topic. 30 minutes interviews were conducted through zoom calls.

Demographic

  • Millennial from 23-28
  • Female
  • Student or full time worker
  • Located in North America
  • Regular or irregular coffee shop customers

categorization

Interviews were recorded with consents to be scripted afterward. Then important quotes were noted down in order to be categorized into Pain Point, Motivation and Behaviour.

Sorted by Theme

Once categorized, each are sorted in terms of their unique themes, in order to draw interview insights from.

Most often mentioned cause

uncertainty

Uncertainty was the most often mentioned causes of customers’ unsatisfied experience at the coffee shop.

motivation

Motivation for coffee shop visits varied a lot, from simply grabbing a coffee to just study, to work and more.

needs

Whichever the motivation is, when the customer’s needs are met, the experience was rated satisfied.

real time

Customers also wanted to be able to track how busy each coffee shop was in prior to their visit.

discover

Persona

Please meet Jen! Based on the theme and interview insights, persona Jen is created in order to better visualize potential target users and their frustrations and goals within the problem space.

define

Experience Map

Experience map allows chances to investigate persona’s every stage, emotional flow and channels within the problem space to find the best opportunity for an UX designer to step in.

define

User Story and Epic

User stories are required for development of product’s functionalities. Listing what the persona needs for what purpose allows opportunity to prioritize the most needed functionality.

define

Task Flow

Once a user story is chosen, it is illustrated into a task flow where user’s action needed in every step for completing a task is indicated.

task

To find a work friendly cafe and make a reservation for a quick business meeting

Pre-condition

Signed in to the app and location service is enabled

Design

UI Inspiration Board

Keeping main flow in mind, UI inspiration for each components required for main pages are researched and collaged into a board along with positive or criticizing annotations.

design

Sketch

Time for pen and paper! Utilizing components from UI inspiration board, sketches are drawn to start gathering ideas and researched components for each screen. Utilize initial exploratory sketches to finalize into solution sketch.

Exploratory Sketch

Solution Sketch

design

Lo-Fi Wireframe

The final solution sketch is now turned into a low-fidelity wireframe using Figma. Design components are at the simplest stage in order to be user-tested.

Low Fidelity Wireframe

define

Usability Testing

User testing at this stage is very helpful too to obtain feedback on the user flow as well as any UI components on the wireframe in prior to any detailed prototyping.

Test and Iteration Planning

2 sets of user testings with 5 participants each, 10 in total, were conducted. Each session took 15-30 minutes and iterations for issues were made in accordance to the prioritization matrix after each round of user testing.

- First Round Usability

Evaluation task

1. Onboarding

Select persona’s interest for coffee shop on the onboarding page

2. Search

Able to select with the given reservation information (time/date/number of people) using the search bar

3. Scroll

On search bar, recognize ‘scroll to down’ message and enter all information

4. Select

Select cafe that best matches persona, Jen's, needs

5. Reservation Confirmation

Make a reservation with correct information and get to the confirmation page

Overall Testing Result

All five tasks are evaluated and sorted to a testing result table.

major issues

Record commonly found problems, then evaluate how major they are according to the number of times repeated and screens affected by the issue.

major issues

Record commonly found problems, then evaluate how major they are according to the number of times repeated and screens affected by the issue.

Design Prioritization Matrix

Then all issues are put into a design prioritization matrix where it's priority level and how much effort it requires to fix or improve are determined.

Design

Iteration

Iterations were made starting with elements that are in high prioxity x low effort sections on the design prioritization matrix.

First Iteration

Onboarding page

Users weren’t sure if multiple selections are available or not, so guided message is added for clarification

Homepage

Users weren’t sure what exactly to search for in the search bar. ‘Any coffee shop in mind?’ is added as a guidance to what to search for, and the date/time/ppl icons are added below to show what information is searchable.

Photos seem to be a distraction, so instead wrote ‘coffee shop’ to remind users what they are in this app for.

Available time slots appear on search results page. Therefore, got rid of it to avoid repetition.

One user went to ‘Reservation’ to make reservation. Label changed to ‘My booking’ to avoid any misinterpretation.

Search page

Made the scroll down instruction  into another pop up page to improve intuitivity, making it almost impossible to miss.

Search Result page

Made the selected time be highlighted so that the users don’t need to click it again

coffee shop profile page

Avoided repitition of the time buttons. Otherwise users feel like it is only making them repeat the action. Added 'Reserve Now' to avoid time having to be re-tapped.

Initially only indicated reservable seats. Accessiblility options are now added to better meet users specific needs whether it is looking for wheelchair friendly seats or a work-friendly environment with charging station.

Design

Repeat

Once first round iteration was completed, another round of usability test and iteration took place.

Overall Testing Result

All five tasks are evaluated and sorted to a testing result table.

major issues

Record commonly found problems, then evaluate how major they are according to the number of times repeated and screens affected by the issue.

Design Proritization Matrix

Then all issues are put into a design prioritization matrix where it's priority level and how much effort it requires to fix or improve are determined.

design

Final Lo-Fi Wireframe

This is the final low fidelity wireframe after both rounds of usability test and iteration.

Final Low Fidelity Wireframe

deliver

Moodboard

Moodboard creation begins with brainstorming using keywords that describe my application and more A than B list.

During the process, I continued to remind myself about the future users using persona and what purpose it serves for the users. Since my digital solution will be displaying various coffee shop and high number of images, I also tried avoiding too vibrant colours so that the users can focus on the content, not mere aesthetic layout design.

keyword

busy

rustic

urban

but not chaotic

more a than b list

moodboard

deliver

Brand Name

Brand name was decided after long exploration. I first started listing words that are related to my app. Started with coffee, coffee shop, seats, table line, wait, time and many more. Then I tried writing phrases or sentences that are related to the words until I came up with these two sentences which basically summed up my app’s entire concept. Then the word ‘Time’ from earlier note came to my attention realizing that it is also an abbreviation for both key sentences.

As much as I was excited, I made sure to seek feedbacks from peers and instructors. All of them were positive with the idea and it was a simple name to be easily remembered. I was glad to finalize and move ahead with the brand name 'TIME'.

The challenge from this point was to effectively deliver the brand identity with the word, since it is such a common word.

deliver

Wordmark

Typography inspiration and Wordmark inspirations were searched in prior to starting brainstorming for my wordmark.

typography inspiration

wordmark inspiration

wordmark design process after inspiration search

Final Wordmark

deliver

Neumorphism and Accessibility

The final solution sketch is now turned into a low-fidelity wireframe using Figma. Design components are at the simplest stage in order to be user-tested.

Neumorphism style, also known as neo-Skeumorphism, is a modern iteration of the Skeumorphism design. It uses shadow and light to differentiate an element (button or block) as shown below.

why bother to use it? (Pros)

  • Visual freshness
  • Futuristic design
  • Technical feasibility
  • Unique experience

what should you consider? (cons)

  • Accessibility issue (visually impaired users)
  • Less intuitiveness
  • Inconveniency

Tackle the cons

To minimize the accessibility issue of subtlety for users with visual impairment, I made selective use of the neumorphism design. The design was avoided especially on pages where texts and context are heavy.

I've also combined other elements with the neumorphism design. On the onboarding page (picture below) I added a borderline for selected buttons, so that buttons in different stage are more distinguishable and the subtlety of neumorphism does not become a problem for user with visual impairments.

deliver

Final Prototype

The final solution sketch is now turned into a low-fidelity wireframe using Figma. Design components are at the simplest stage in order to be user-tested.

High Fidelity Wireframe

Final Prototype

Design Impact and Future Thinking

Expanding Across Decives

Design Impact and Future Thinking

Key Learning

I learned so much during the process. Two of my most valuable learnings through this project are that; 1. design thinking is more about the process than coming up with a "brilliant solution" and that 2. staying unbiased can be challenging

Rather than coming up with a remarkable solution that “I” believe is great, it’s more about being a better researcher, oberserver and listerner for the users.

^ Back to Top

< Back to Work

Next>