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...
-
Cappuccino
-
Latte
-
Cold brew
-
Espresso
-
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.
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.
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.
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
Menu Page
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
.jpg)
Home Page, 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.
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
_SCoffee.jpg)
Home Page, signed in
_SCoffee3.jpg)
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
_SCoffee.jpg)
_SCoffee3.jpg)
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
_SCoffee2.jpg)
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
