S’bastians Coffee 

 Desktop Website 

How can we streamline the experience of ordering online from a local café during the pandemic?

Introduction

Background

S’bastians Coffee is a local Bay Area café popular for its quaint atmosphere, friendly service, and exquisitely delicious coffee. However, many of their selling points have become less relevant in light of the pandemic. As a personal project, I revamped their website to reflect a higher focus on pickup and drive-through services, while staying true to the essence of their original brand.

Personal Capstone Project

Tasks: User Research, Information Architecture, Visual Design

Timeline: 2 Weeks

Tools: Figma, Procreate, Miro, InDesign

Project Goals

1. Design a website geared towards efficient online ordering

  • users can quickly browse through menu options and order for pickup with ease

2. Express the cafe’s original selling points through the visual design

  • relaxing environment with natural wooden furniture

  • cheerful, genuine service

  • high quality drinks and pastries

Research & Synthesis

Market Analysis

I first conducted some general research to understand the market, demographics, and consumer habits. Some highlights:

  • Pre-pandemic, almost 50% of Americans who bought coffee outside already did so at a drive-through 

  • The most popular espresso-based drinks are as follows...

    1. Cappuccino

    2. Latte

    3. Cold brew

    4. Espresso 

    5. Mocha 

  • 32% of millennials consume an espresso-based beverage every day, which is higher than among any other demographic

1-on-1 Interviews

I interviewed 3 different participants in their 20s to understand how their coffee buying habits have been affected by the coronavirus pandemic, as well as their motivations and frustrations when buying coffee online.

Findings:

  • The most prominent motivation for buying from a specific store is simply the convenience of location, and most participants did not want to order out for pickup unless they were already going out for a different purpose

  • All participants have a coffee machine in their household, although they don’t necessarily use it

    • This makes buying coffee online feel more inconvenient and unnecessary, unless they’re ordering drinks that they can’t make at home

  • Participants often buy coffee as an add-on along with other items, rather than ordering purely for the coffee itself

Persona

I synthesized my research into a persona reflecting the café's target audience, with a focus on the desire for convenience within a busy work schedule.

KatherineShan_persona.jpg

Define

Deciding the Features

I noted down the various features that already existed on the current website, then consolidated them into smaller groups. With Kayla's top priority being convenience,  she wouldn’t want to sift through a lot of content before getting to ordering. I also added a feature for a user's order history, so that users could quickly buy a past order with the same customizations again.

1. Featured/Popular Items

2. Drinks & Pastries Menu

3. Order History (sorted by most commonly ordered or by most recent)

4. Cart & Checkout

5. Pickup Hours & Location

6. Gift Card Purchase

7. Order Form for Large Groups

8. About (the café and the 3 different brands it sells) 

9. Employment Information

The site's existing homepage and menu page.

SCoffee1_original.jpg.png
SCoffee2_original.png
Sitemap

Keeping efficiency in mind as the main priority, I moved on to decide the website's structure. There originally was no separate menu page, as I planned to display the menu on the homepage for convenience. But after compiling the complete list of available items, I realized there were too many to display comfortably and created another page to accommodate them.

KatherineShan_sitemap.jpg

Design

Sketches

I sketched out wireframes for the main pages of the site, as well as the cart function and customization options shown upon clicking on an item.

Home Page

KatherineShan_WireframeSketches_Homepage

Menu Page

KatherineShan_WireframeSketches_Menu.jpg
KatherineShan_WireframeSketches_CartAndP

Shopping Cart & Product Details

Low Fidelity Wireframes

After the sketches, I dove right into creating wireframes digitally.

 

On the home page, I featured popular items at the top when the user is signed out, and switched it to previously ordered items when the user is signed in, so as to provide both types of users the opportunity to quickly order items that look appealing to them. 

Home Page, signed out

SCoffee_Homepage (Signed Out).jpg

Home Page, signed in

SCoffee_Homepage (Signed In).jpg

For the shopping cart, I decided to keep it sticky on the right side (much like on Amazon's website) so the user can see a full overview of the items in their cart as they scroll.

The product details open in a pop-up rather than a separate page, to allow for faster loading time.

Shopping Cart & Menu

Product Details & Customization

Moodboard

I gathered imagery on Pinterest to express the visual direction of the site. The only branding S'bastians Coffee had was their logo, so I decided to feature similar colors in the website's color palette to keep the look and feel consistent. The café is well known for its uplifting ambience and wooden décor, so I also incorporated natural textures and light, neutral browns. 

KatherineShan_MoodBoard.jpg
Hi Fidelity Wireframes

I applied the colors and textures to the wireframes, and assembled everything into a prototype for testing. I removed the featured item section in the signed out page and moved it into the header carousel instead, as I realized that is usually where featured items are placed.

Home Page, signed out

Home Page, signed in

The shopping cart's empty state was an opportunity to add in a dash of fun, so I placed an illustration inside along with a coffee pun. For the product details, I kept the focus on the item itself instead of adding anything extra.

Empty Shopping Cart

Filled Shopping Cart

Product Details

Iteration

Testing

I tested the high fidelity prototype with 3 different users, all of whom which have ordered online from a cafe before. The main goals for the test were:

1. To test the intuitiveness and likeability of the cart as sticky on the right side. 
2. To test the users’ understanding of the site’s structure and how to navigate it.

Summary of Findings:​​

  • Cart felt too large; users wanted to be able to open/close it

  • The arrow pointing to the cart gave the impression that it could be minimized

  • Users preferred the convenience of skimming many menu items at once, over the ability to quickly view items already added to their cart

Revision

I revised the cart details to be displayed in an overlay, that would drop down from the cart upon adding a new item or clicking on the cart icon itself. This opened up space on the page to display more items at once.

The revised shopping cart overlay

Reflection

Test, Test, and Test Some More

My idea of having a shopping cart that sticks to the right of the site as you scroll is not a novel concept, but is unfamiliar to many in the context of buying from a café online. Testing it out with users helped me realize that even if users are familiar with a certain feature, their expectations for it will change depending on the circumstances. What I thought would be an improvement for convenience actually detracted from their main priority, which was scanning quickly through the menu items.

Previous Project

Back to Top

Next Project