Los Gatos Coffee Roasting Company

About Los Gatos Coffee Roasting Company

Based in the San Francisco Bay Area, Los Gatos Coffee Roasting Company was established in 1982 by the founder Terri Hope and offers a wide selection of Gourmet Coffee varietals for both online delivery and in store pickup. Los Gatos Coffee Roasting Company has been specializing in sourcing and roasting the finest coffees of the world since its inception, along with their sister store Palo Alto Coffee Roasting Company. As an family-owned craft roaster specializing in the premium coffee industry, the Los Gatos Coffee Roasting Company and Palo Alto Coffee Roasting Company products are recognized for setting the high quality standards with its award winning coffee.

Original Premise of Project

The original premise of our project consisted of 3 components:

  1. Redesign Los Gatos Coffee Roasting Company’s online website and reconstruct layout

  2. Revamp their online purchasing and checkout process

  3. Construct responsive screens for mobile layout of the Los Gatos Coffee Roasting Company

Role in Design Process

UX/UI Designer and Researcher

Oct. - Nov. 2022

Tools Used

Figma, Miro, Whimsical, Google/Microsoft Suite Applications

Research and Synthesis

7 user interviews

I began by reaching out to individuals who were particularly passionate about coffee consumption for interviews on their purchasing process. Interviewed users via Zoom and Slack to get an insight on their coffee habits as well as their background; specifically the reasons why they enjoy coffee consumption and their daily routines

I concluded by obtaining:

7 user Interviews

Concluded that most users found that because of their busy schedules with work as well as other commitments, ordering coffee during the days/weeks can be reconstructed to offer a more streamlined experience.

Main Points of Concern Included: Ordering Online, Ordering pickup, Home Navigation Organization, Ease of Use

Affinity Mapping

The Affinity Mapping Process presented valuable information for the research process - most participants felt that the online website felt antiquated and outdated, and also voiced their opinions on their purchasing preferences regarding coffee purchases.

Some points the interviewees noted:

“This is not the functionality I am looking for when purchasing something”

“I think it is not the ideal navigation bar”

“I see tons of text on the page which I am not going to read”

“Simplifying and minimalizing the page would be great”

This information provided me with a basis on which to reconstruct the home page layout as well as the PDP and Cart Checkout process to streamline the user experience on the website.

Personas

Arthur

Age: 30

SF Bay Area

UXDI Student and Former U.S. Military

Goals:

  • Wants to cut down on coffee wait times

  • Would like the application to memorize his order for future purchases

  • Wants a simple and easy to navigate website

  • Wants to drink more coffee

Vivian

Age: 25

SF Bay Area

UXDI Student and Former Medical Professional

Goals:

  • Wants to find a better website for coffee variety

  • Would like to explore more coffee roasts and blends

  • Wants to order and have subscription deliveries ready bi-weekly or monthly

Problem Statement

Arthur, a full time UXDI student and former U.S. Military Serviceman, wants to order coffee from businesses, but finds that he does not like waiting in line to purchase his drink as he feels like it impedes on his time. Additionally, he finds that he often consumes multiple coffees in his day, which helps him retain his focus throughout his busy schedule. Because of this, he wants an application or website that allows him to quickly order/reorder coffee that he can pick up at the local cafe, while also remembering his order for future purchases and transactions.

Vivian, a current full time UXDI student and former healthcare professional, finds that she wants to explore more varieties of coffee (beans and espresso) but despises subscription services that includes certain coffees she does not enjoy. Additionally, she wants to find an online coffee business that removes complexity and is simple to purchase from and implement into her daily life. Because of this, Vivian is seeking a coffee business that allows a single selection of coffee for purchases/subscriptions, while also providing auto-purchase features that removes the delivery and transit times when ordering coffee online.

Los Gato Coffee’s Solution

Los Gatos Coffee Roasting Company provides an online coffee purchasing service that aids in promptly delivering and/or ordering coffee to pick up for busy individuals each day/month. It implements an efficient solution to discover and purchase coffee while also recalling previous orders; allowing the user to enable subscription services for their monthly coffee needs.

Taskflows and Sitemap

Arthurs’s Taskflow

Vivian’s Taskflow

Site Map

Competitive Analysis Features List

Report/Summary:

  • My report found that most companies had very similar designs, that focused on creating a home page and home navigation bar that reflected the users needs and wants

  • All pages have home bar, but not all pages have filtering that allowed for finding specific items or pages

  • Noticed that many of the websites had search bars as well as home category pages for their selection of coffee and other items

  • All websites however, had items for sale, whether that was coffee or other merchandise

  • A minority of the websites had a contact us page, most of the websites did not have that feature

  • Only one website had the menu page, the other did not representing that the competition did not focus on brick and mortar coffee items (like starbucks) but rather more ingredients and items for coffee creation

  • All websites did in fact have a shopping cart that allowed the users to place the items they wanted to purchase into

  • All websites also had a checkout and payment page, despite being in various different formats and variations

  • Almost all websites aside from Highwire had a visible social media banner, whereby they were linked to their social media pages within their website

  • 2 out of 5 websites included an Account page, leading me to believe that the account page is not necessary in the ordering process all of the time

  • From the research, most websites obtained a working Home navigation page as well as a relatively streamlined process when ordering certain items from their website

  • Most of the items were categorized in an order that allowed them to be efficiently found/purchased through the website, unlike Los Gatos Coffee Roasting Company

Ideation and Sketches for Home Page

  • Original Website

  • Sketch 1

  • Sketch 2

Finalized High Fidelity Version

Iterations made to Final Version

  • Constructed High Fidelity Mockup with refreshed Los Gatos Coffee Roasting Company color palette

  • Implemented PLP Images and created coffee images that correlated to specific varieties of coffee

  • Included Landing Page Background Image as well as adapted text styles and layout constraints

  • Incorporated legitimate reviews and events from Los Gatos Coffee Roasting Company’s Yelp and social media platforms

Ideation and Sketches for PLP Page

  • Original Website

  • Sketch 1

  • Sketch 2

Usability Testing Feedback

I conducted 1 round of usability testing, in which 3 participants voiced and provided feedback for the page layout of the PLP page. Findings and criticism from the usability testing provided me with a basis on which to iterate further upon the PLP page and implement minor adjustments to better optimize user experience.

Key points from User Feedback

  1. The PLP page was very straightforward in regards to organization, and the flow was easy to follow to determine and distinguish the varieties of coffees and beans

  2. Text was too dark perhaps making it difficult to read as the wording may be too hard on user’s eyes

  3. Underline on Coffee name can create some heuristics confusions on location to click to open Coffee PDP

  4. Possible changes to background of Coffee item and colors

Finalized High Fidelity Version

Iterations Made to Final Version

  • Constructed High Fidelity Mockup with refreshed Los Gatos Coffee Roasting Company color palette

  • Implemented Filtering Component to simplify coffee search process

  • Configured new PDP Image background for improved visual design and user experience based off feedback

  • Altered font and changed font color to decrease contrast and improve user interface based off of usability testing feedback

  • Replaced Star rating with revised graphic that resembled that of the comparative analysis research

Ideation and Sketches for PDP Page

  • Original Website

  • Sketch 1

  • Sketch 2

Usability Testing Feedback

I conducted 1 round of usability testing, in which 3 participants voiced and provided feedback for the page layout of the PDP page. Findings and criticism from the usability testing provided me with a basis on which to iterate further upon the PDP page and implement minor adjustments to better optimize user experience and visual design.

Key points from User Feedback

  1. Original website lacked information on coffee quantity and sizing, as well as did not provide any reviews and information on the coffee product itself

  2. Mid-fidelity Sketch 2 provide adequate information and the process to choosing and ordering product, and PDP is reminiscent of competitors and comparative analysis businesses

  3. Overall users found this page to be very accessible and had little issues with the layout and format of this page

Finalized High Fidelity Version

Iterations Made to Final Version

  • Constructed High Fidelity Mockup with refreshed Los Gatos Coffee Roasting Company color palette

  • Implemented Star rating icons within PDP Page

  • Added prominent contrast color (international orange) to CTA button

  • Changed background and added graphic for PDP Product Image

Ideation and Sketches for Cart Page

  • Original Website

  • Sketch 1

  • Sketch 2

Usability Testing Feedback

I conducted 1 round of usability testing, in which 3 participants voiced and provided feedback for the page layout of the cart/checkout page. Findings and criticism from the usability testing provided me with a basis on which to iterate further upon the cart/checkout page and implement minor adjustments to better optimize user experience and visual design.

Key points from User Feedback

  1. Participants found original website to be confusing as there was no complete cart page, and felt that they could not trust the website given the lack of visual design and found the user experience of the cart process to be concerning

  2. All users liked the design of the Mid Fidelity Sketch 2, and found the design to be similar to that of other cart/checkout pages

  3. 2 users noted that they would like to see the additional subtotal and pricing on the right summary component in checkout

  4. 1 user asked if there would be a possibility to implement other payment methods into website design

Finalized High Fidelity Version

Iterations Made to Final Version

  1. Constructed High Fidelity Mockup with refreshed Los Gatos Coffee Roasting Company color palette

  2. Added prominent contrast color (international orange) to CTA button

  3. Minimized Recommended section to implement more product suggestions

  4. Updated star icons for recommended product section

  5. Implemented Sub-total and Tax section to secondary/summary component

  6. Updated background colors of product icons and page

Additional Priorities

Our final step for this Project was to build responsive mobile screens for the website, as research showed that many of our users wanted to order quickly through their mobile devices for online delivery or in person pickup. We were tasked to choose 4 screens to recreate into responsive designs.

I chose to design the responsive screens into mobile mockups for the Home Page, PLP, PDP, and Cart pages in the iPhone 14 Pro format.

Responsive Mobile Screens

  • Home

  • PLP

  • PDP

  • Cart

Responsive High Fidelity Mockups

Conclusion and Next Steps

Project Overview

The process for revamping Los Gatos Coffee Roasting Company proved to be a unique experience of understanding the business model of the company as well as understanding their user base to construct a more user-friendly online shopping experience. The process of researching and synthesizing the website was rather straightforward - many users voiced their concerns in regards to the overly complex and overwhelming home page, as well as the lack of visual and user interface based design within the original website, leading many customers to turn away from purchasing products online. Furthermore, one aspect of the website that was not previously built was the online order of pickup option, as the original website had no way of purchasing their wide selection of coffee drinks for in store pickup. Additionally, I revamped their online checkout and ordering as their previous website did not inspire confidence in online shopping based off research feedback as most pages seemed to look antiquated and unprofessional.

Overall, the process was very straightforward, I appreciated the feedback that was provided from the various usability testing and interview participants and their insightful ideas on what features/components could be added to enhance the user experience of Los Gatos Coffee Roasting Company’s online e-commerce website!

What I learned

I learned in this project the value of user interviews and usability testing - it proved to be imperative in the ideation and iteration process of wireframe and mockup development as changes from feedback could be implemented rapidly as more participants voiced their opinions on what components on specific pages could be improved.

One aspect that I discovered to be beneficial in my process of constructing rapid prototypes and wireframes was labeling and building multiple versions of variants and components in my Figma file - this was later found to be immensely helpful when searching for the specific component to iterate upon, as well as reverting back to previous designs that my research participants may have preferred.

Finally, I learned throughout this process that taking the time to understand user needs, their background and their purchasing preferences were insightful in developing and designing a website that catered towards the broad communities of individuals that purchased coffee products online. This was a great learning experience in that it provided me with the opportunity to gain abundant practice honing my interview and problem solving skills and recognizing various contrasting user attitudes towards the redesign of the Los Gatos Coffee Roasting Company’s online shopping experience!