Grateful Coffee Co.

I led the design and development of an app and marketing website for a Startup Coffee Shop in Illinois that helped them stay competitive during a global pandemic.

Key Contributions

User Experience Design, Information Architecture, Interface Design

Team

Web Developer and Myself

Tools

Figma, Webflow, After Effects, Photoshop, Illustrator

Timeline

2 Months
Sept 2021 - October 2021

The Client

Meet Grateful Coffee Co, a start up coffee shop needing to integrate technology to stay competitive during the pandemic

Grateful Coffee co is a Start up coffee shop in Springfield Illinois who did not have a web presence …...

The Goal

Incorporate digital tools to enable new business to thrive with realities of the pandemic.

As I spoke with the owners Brandon and Cana it became clear that they were struggling to compete with other local chains that have drive through and digital ordering systems that have become so essential during the pandemic. It also became clear that they needed a marketing website that we could use as a more robust platform for paid advertising and hands off revenue channels.

We settled on the following three goals:

Goal #1:
Create a marketing website to [] as well as drive hands off revenue channels
Goal #2:
Utilize technology to incentivize return visits
Goal #3:
Implement technological solutions to create a hands off experience for their customers during the Covid-19 pandemic

User Research

Get to know the clients biggest customers and meet their needs

Because of their proximity to two colleges, one of the steadiest customer bases that Grateful Coffee Co has are students. Because of their proximity to several affluent neighborhoods, the second most common customer and the highest dollar customers are the stay at home moms in a two mile radius. We chose to focus persona development on these two groups.

Local Moms

;lLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim fringilla orci a eleifend. Duis rhoncus magna odio, semper tempor nunc ultrices vel. Donec pulvinar ante non ex

College Students

;lLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim fringilla orci a eleifend. Duis rhoncus magna odio, semper tempor nunc ultrices vel. Donec pulvinar ante non ex

COMPETITIVE ANALYSIS

Emulate effective national brands for a local market

I looked at the websites of the 30 largest chains as well as every local shop in the Springfield area to get an idea of what was working and what wasn't. I saw very quickly that there was a stark difference between the corporate and local shops. Often times, the local shops would use poorly designed template websites.

Corporate chains on the other hand have a core focus on getting a user to install their app. The website has many of the same features as the app (online ordering, loyalty management etc) and generally offered a much more robust experience.

Because of Grateful Coffee Co’s systems being on the square platform, we had pre-existing integrations that we could take advantage of to give them some of the things that the larger brands have that their local competitors aren’t utilizing.

CUSTOMER INTERVIEWS

Online ordering is the future! (you’re shocked, I know)

Gcco offered free cookies to any customer who would let me interview them. With a goal of learning where they eat and buy coffee, whether they use mobile apps at those places and what features they primarily use the apps for. We got a pretty consistent answer, people use the apps for order ahead and for loyalty programs (like chick filet points)

Insight #1:
Since the beginning of the pandemic, both of our focus demographics have started making heavy use of app based ordering both in the form of order ahead and delivery apps like grub hub and door dash.
Insight #2:
The moms take advantage of the rewards based loyalty programs offered by the chains they frequent (starbucks, chick filet, dominos etc)
Insight #1:
Many of the people we spoke to are at least somewhat worried about contracting covid. They take advantage of minimal contact ordering and pickup options when they have the option.

Information Architecture

Card Sorting

We conducted a card sorting exercise with several members of each persona to help us logically structure both the website and app. Overwhelmingly customers told us that their highest priority was accessing the menu and online/mobile ordering. A secondary priority for many was basic shop information like hours and location. Surprisingly, the loyalty program and rewards were considered important but weren’t considered a top priority feature by as many users as I would have expected. We took the information gained in the card sorting exercise and organized it in an IA diagram.

Prototype

Design: Steal Like an artist

We built a low fidelity prototype in web flow. Because they have such a shoestring budget, we didn’t have the ability to do as much user testing on the site as I would have preferred. In lieu of that, I looked at the apps of several of the top coffee and fast casual brands to look for repeating patterns that I can duplicate for the client. The idea was that because these giant brands have invested so much into user testing, we can benefit from their learnings without having to make the investment themselves.

User testing

Find out what the users think

In the same way they offered free cookies in exchange for interviews, they also did it to test the prototype of the app. We would ask users to perform common tasks on the app and ask them to tell us how they felt about it, did it make sense, should we move things around, etc.

Conclusions:

Because we leaned into familiar design language of apps that users were already familiar with, we only had to make minor revisions on the final design.

Revision #1

Created a reorder and save as favorites feature for frequently ordered drinks.

Revision #2

We made the loyalty button much more prominent. Older users thought it was difficult to find.

Revision #3

Moved and renamed the payment card within the account menu because users were having trouble finding it.

Overall, customers felt the app functioned how they would expect it to and had little trouble navigating.

Design Direction

Cheerful and unpretentious

The primary direction for the design direction was that it should be unpretentious, cheery and fun. I knew we would want to lean into bright colors and created a color palate around a bright pink that the client loved.

Alongside the colors I knew early on that we wanted to go with a rounded san-serif font for all headlines.

We would also avoid lean into rounding the corners of all buttons, boxes and input fields.

Branding

Building a brand fit for a fantastic client

Client is a new business, so alongside the web site and app. I was also in charge of developing a brand identity for them including a new logo design, advertisements, menu and more. I incorporated typographic and color choices from the overall design direction to create a an approachable and welcoming brand.

High Fidelity Designs

Finalizing the design of website and app in Figma

App

Website

Interaction Design

Interactions that delight

I designed many subtle interactions. The goal was to make things simultaneously fun and engaging. These little details really added an extra layer of polish to the final design. Some examples:

Button Jiggle

;lLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim fringilla orci a eleifend. Duis rhoncus magna odio, semper tempor nunc ultrices vel. Donec pulvinar ante non ex

Menu Button Transformation

;lLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim fringilla orci a eleifend. Duis rhoncus magna odio, semper tempor nunc ultrices vel. Donec pulvinar ante non ex

Page Transitions

;lLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim fringilla orci a eleifend. Duis rhoncus magna odio, semper tempor nunc ultrices vel. Donec pulvinar ante non ex

Overlay Transitions and Transparency

;lLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim fringilla orci a eleifend. Duis rhoncus magna odio, semper tempor nunc ultrices vel. Donec pulvinar ante non ex

Final Thoughts

Helping a small business thrive during a global pandemic

While the app is still in development, Grateful Coffee Co has generated a lot of interest in their new technological implementations. Brandon and Cana have already begun to implement a phone number based loyalty program that we’ll be able to roll into the app experience after launch.

Feedback on the design? Want to chat over coffee about design systems? Find me on LinkedIn.