The Bloom

Redesigning a local cafe's website into a responsive design to create a more efficient ordering process for customers.

Introduction

The Bloom Coffee Roasters is a family-owned café that serves Boba tea and coffee in Killeen, Texas. The current website is structured nicely however it could use a revamp in how the overall website is organized when it comes to displaying its information on its homepage and menu. The website could also use some adjusting as it isn’t completely responsive across devices.

Role
I contributed to the overall design process and oversaw aspects related to user flows, wireframes, rapid prototyping, and usability testing.

Additionally, I conducted user research and contributed in synthesizing research findings to produce viable ideas.

Project Scope
The project was completed in 4 weeks with weekly meetings with my mentor for guidance.

Tools
Figma, Maze, Zoom, Illustrator

Problem discovery and the solution…

The current website looks very neat, however, at the moment items like the menu are hard to read, the layout of the pages lacks organization, and it will need to be modified to allow for responsiveness across various devices. We will need to research and discover why exactly customers go to their website and rearrange the content to maximize the usage of the website and provide an efficient and easy experience for all those who visit the website.

View the screenshots of the original state of The Bloom’s website below!

  • Original Homepage

  • Menu page

  • Menu page continued

  • Online ordering portal

The Process

Research

  • Competitive Analysis

  • User Research

  • Creating Personas

  • Affinity Mapping

Information Architecture

  • Creating a Sitemap

  • Sketching Designs

Interaction Design

  • User Flows

  • Task flows

  • Wireframes

  • Responsive Designs

Iteration

  • High-Fidelity Prototypes

  • Usability Testing

  • Test Interpretation

  • Priority Revisions

Research Phase

My goal throughout the research process was to:

  • Discover the main reasons customers visit websites for cafes and restaurants.

  • Discover what makes competitor websites or websites of similar natures successful and unsuccessful for customers.

  • Determine the current pain points and successes within the existing website for The Bloom.

Competitive Analysis

I researched 2 local type cafes and 2 national chain cafes to find their strengths and weaknesses and to see the types of features they offered customers on their websites. My main findings were that boba cafe's, in particular, don't offer many images of the drinks on their menu, on some of the local cafe's websites the accessibility fell a little short, and some sites were not as responsive when viewing across different devices.

Creating a persona

I merged information from various participants during the empathy research stage to create this specific persona. Victoria is a customer who likes to do research prior to visiting websites for cafes. It's important that when she views these websites, it looks like the café puts care into their website and keeps items on their page up to date.

Major pain points for her are:

  • If the websites offer features on their site that are not functional.

  • If the information offered isn’t clear or if it is outdated.

  • If the information offered is overwhelming to view.

"I'm always open to trying new cafes and different kinds of boba milk teas or coffees! For me, it's important to see that businesses care about keeping their websites up-to-date especially when it comes to new customers wanting to learn more."

-Victoria Bailey (Persona)

User Research

Interviews with 4 participants allowed me to see common pain points and motivations for customers when utilizing websites for cafes.

During my user interviews:

  • Users stated they often utilize sites like Google or Yelp to look at reviews before visiting any websites.

  • Customers generally visit websites to:

    • Find deals and current promotions happening.

    • Learn more information about the cafe and what they offer.

    • View menus before deciding to go to the cafe or prepare what they would like to order before going to the cafe.

Creating an Affinity Map

During my user interviews, I spoke with four participants who visited The Bloom in the past.

The common themes found within my research were:

  • The motivations for visiting a cafe's website.

  • A customer’s normal process for finding cafes (before viewing their website).

  • Features customers find helpful when visiting websites.

  • The current pain points users have found with The Blooms website specifically.

  • I also discovered the common drinks the four customers get when they visit The Bloom.

Information Architecture

Making a Sitemap

I focused on what could be within the navbar of the website.

  • Locations

  • About Us

  • and Events.

The current homepage of The Bloom currently only displays their various locations. Moving forward the main action I wanted to work on was better showcasing the products they offer and moving their “locations” information to a new area of their website.

Sketches

When re-designing the homepage, I wanted the customers to land on a homepage that allowed them to get useful information about what the café offered and help learn more about the café itself at a first glance. In the background, I also wanted to create a unique experience for customers, allowing there to be an interactive menu so the user can automatically order. As for my checkout page and process, I wanted it to be a standard checkout page that felt familiar and looked clean and simple.  

  • Homepage Sketch

  • Checkout Page

Interaction Design

User Flow

My user flow focused on the customer finding a drink from the homepage interactive menu followed by them completing the checkout process.

This user flow is what helped me build out my low-fidelity wireframes and helped me create scenarios that I utilized in my user testing.

Low-Fidelity Wireframes

I wanted to create an interactive menu that allowed the users to browse through all the products The Bloom has to offer and have that serve as an area to start their online order. Above that in a hero section, I wanted to have a carousel at the top of the page where the customer could learn more about current promotions, new drinks, or any information that could be helpful to new and returning customers.

Below the main desktop version of the wireframes, you may find the mobile responsive screens.

  • Landing page

  • Customize order overlay

  • Checkout page

  • Confirmation page

  • Mobile Landing Page

  • Mobile Customizing Order Page

High-Fidelity Wireframes

Above you may view the high-fidelity wireframes. I was inspired to create a unique experience for all users who come to The Bloom's website. When building out the wireframes and the prototype I wanted to create an experience that was simple and easy to learn but I also wanted build an overall delightful experience for the user every time they ordered a drink or an item from their café.

Within this prototype, you can order a drink, go through the checkout process, and receive an order confirmation.

The Prototype

Testing Objectives

During the usability test I want to:

  • Observe how users navigate through the website.

  • Discover any pain points or confusion during the ordering and checkout processes.

Summary of the Findings

  • ‍Number of participants: 6

  • Average time spent with each participant: ~20 minutes

  • Time for each participant to complete all tasks/scenarios: less than 3 minutes

Priority Revisions

Critical Revisions:

  • One main pain point found during usability testing was that it would be helpful for the user to be able to view the name of the drinks on the interactive menus at all times. During the testing phase, the drink titles only popped up when the user hovered over the product. When revising, I've added the names to constantly show on the product images, and when the user hovers it will allow them to view the descriptions of the drink and begin their order from there.

  • Another main pain point for half of the users tested was that the drink customization overlay would not scroll. This may have been an issue with Figma since it at times would sometimes scroll and other times it would not. To remove this issue, I adjusted the width of the overlay to allow the user to view more without having to scroll as much.

Mid-level Revision:

  • The placement of the tipping section felt unnatural to users. So to help with the flow I've adjusted where on the page the tip bar was as well as the information on the order. This was a mid-level revision.

View all revisions completed below.

Next Steps

With adjustments and iterations made from the last test, doing more usability testing and gathering new feedback will be helpful to see how the changes impact the customers experience on the site.

Let’s create together!

MORE CASE STUDIES

Adding a feature to Discord to help elevate the stream experience amongst friends.

Discord

Btwn the Lines

An end-to-end application to help reduce the stress around parking in big cities.

Premise Health within Dell Tech

Examples of UX Writing created during my time with Premise Health.