mockup for grounded project

Grounded - Coffee Subscription

Responsive Web Design
Project Brief
I was tasked with designing a responsive website for an e-commerce company. Grounded was a custom project that I worked on with the guidance of my DesignLab Mentor.
Timeline
October 2021-November 2021
Design Process
  • Research: Market Research, Interviewing real people and creating a persona, journey mapping
  • Information Architecture: Card sorting experiments, interpreting data, designing a user flow , sitemap, and sketching
  • Design: Branding, Hi-Fi Wireframes, and Prototyping with Figma
  • Testing: In person/remote usability testing, and priority revisions

Background

Grounded is a fictional subscription service that specializes in sourcing great coffee roasted around the southeastern united states and beyond, and keeps the pantries of its subscribers stocked with fresh, single origin beans and grounds.

Research

Market Research

Digging into the current coffee subscription market, I compared the services Mistobox, Peets, and Atlas Coffee Club to compare what customers get out of them. The main strengths of each coffee club was the variety of roast levels and origins available through each roaster. Mistobox (whom one of my interviewees is subscribed to) in particular offered subscriptions to smaller roasteries across the USA, kind of operating as an aggregator. The main weaknesses observed were that Peets and Atlas only sold the coffees they ostensibly roasted, and therefore were less varied than Mistobox. Shipping was the other weakness overall. Coffee retains its flavor when brewed as close to the roasting date as possible. Because Atlas, Peets, and Mistobox ship coffee all across the United States, it's possible that when the coffee reaches your doorstep, it will no longer be as fresh as possible.

Extrapolating these strengths and weaknesses, the vision of Grounded that I created was to be a regionally focused subscription box, where users would be guaranteed fresh delicious coffee beans delivered from roasters in their areas. That way they'd still be able to support local coffee roasters and get the fresh specialty coffee they desired while also getting to experience the breadth of their regional roasters.

Persona + Journey Mapping

After my market research, I was lucky enough to be able to go around Atlanta (and Zoom) and interview real coffee drinkers and enthusiasts to see what they'd want out of a coffee subscription. After chatting and yes—having some coffee—I was able to interpolate the patterns expressed in their answers and generate a User Persona (his name is Zach) and a journey map to empathize with the potential users of Grounded.

user persona for Grounded website
user journey map for grounded website

Information Architecture

After gleaning what people wanted and expected out of a coffee subscription, I began to lay out the groundwork for what would turn into Grounded using these methods:

  • Running a Card Sorting Experiment
  • Data Analysis
  • Generating a User Flow and Sitemap
  • Draw up rough sketches

Card Sorting + Data Analysis

The main criteria that my participants decided to categorize the coffees they were given in the experiment was origin of the coffee, followed by flavor notes, and many comments that roast level should be included in some way, too. Surprisingly, roaster was not considered by any of the research participants as a default method of sorting.

User Flow, Sketches Gallery

user flow for Grounded

Sitemap

sitemap for grounded website

Branding, Design, Prototyping

After laying down the foundation for my designs, I forged ahead with the core creative element of the project—branding and UI design.

The logo was created to be extremely simple and modern—a sleek and modern look felt fitting for a subscription service, and a high contrast white background helps draw in the eye. The brand colors were chosen to emulate the different colors of a shot of espresso.

Logo Design

logo design for grounded website

Style Tile

Style guide for Grounded Website

Testing, Iteration, Next Steps

After delivering the first iterations of the prototypes, the next step was to get these designs into the hands of real users. I was able to perform usability tests with 4 people and, thanks to DesignLab, an additional group of 8 during our weekly group critique sessions.

Quotes:

"Maybe add some text to the featured roasters section? I didn't understand if that was the only brands you're working with or what"
"Questionnaire was very easy even for a relatively inexperienced coffee enjoyer
"Could be clearer which coffee you'll get with your subscription"
"Payment processing summary was very big and white. Too visually dominant"
"That was very intuitive"

With a great mix of constructive criticism and praise, I set about revising my designs. For example, here's the checkout page pre and post revision. With the guidance of my mentor I reformatted the checkout page to have a more traditional color scheme.

Pre-revision

screen mockup of checkout flow for grounded project

Post-revision

post-revision checkout screen for grounded website

Additional Screens

subscription builder flow for grounded website

Reflecting

Because of the time constraints of DesignLab, my work was done after revising my designs and submitting them to my mentor. Even though this isn't for a real company, there's a lot I learned and even more that I'd like to do to follow up on.

What I learned:

  • Reinforcing responsive design techniques and patterns
  • User interview skills
  • Journey Mapping
  • Time management

What I'd Do Next:

  • Flesh out the a subscription management flow
  • Flesh out a flow where the user can buy individual bags of coffee
  • Even more rigorous user testing
  • Developer handoff for a "real" website

Relevant Links:

If you'd like to check out the Figma prototypes, find them here:

Mobile

Desktop

Other Case Studies