Wells Coffee website

Wells Coffee Co.

A growing brick-and-mortar coffee roasting business that began as a successful Kickstarter wanted to open an online storefront that was on-brand and included a coffee subscription service.

Challenges

  • Short turnaround - The initial project discussions began in late July-early August and the client wanted the site to launch before the Thanksgiving holiday to target holiday shoppers.
  • Small in-house team to update website info & fulfill orders.
  • Subscription service for e-commerce - though it seemed straightforward enough, I had my concerns as to whether it would be achievable - especially given the time constraints.
  • Fast-loading on mobile - I added this criteria so that if customers didn’t buy something it wouldn’t be due to bad experience. Everyone hates slow shopping experiences and I didn’t want to be blamed for making one.

Solutions

Although my process generally goes from brief to research, in this case I added a step after the brief to try to mitigate the problem of the time constraint: a Gantt Chart on a Google Sheet. I defined all expectations as row items, specified who would do what when and then plotted date ranges in colors and shared it with everyone involved.

Research

What e-commerce platform was the right fit for Wells? I looked into options big and small to try and find an option that:

  1. Would be easy enough for their staff to use and make their lives easier not harder
  2. Would allow for integration with a subscription service
  3. Could be customized both in terms of style (CSS) and functionality (JavaScript)
  4. Was fast!

After looking into as many viable e-commerce solutions as I could find, I decided that the “just right” e-commerce platform for Wells was Shopify. It checked off all the boxes and actually came with so much more under-the-hood to enable their business to scale. There were third-party subscription products that could also be customized to fit their needs, I could edit the CSS and JS and... it was fast! A bonus for me was that Shopify uses liquid which I had used before and really liked flexibility it offered as a templating language.

Market research - Brandon, the owner, had shared a few competitors with me and pointed out what he liked about them. This was very helpful for me to get a feel for what he was looking for and also to introduce user experience goals along the way. With the handful of sites he shared, I then went on to dig deep into the coffee industry to look for the best examples I could find to draw inspiration from. I took notes of good ideas and how they could be applied to the Wells site.

Site maps and User Flows - With what I felt was a good enough understanding of both my client and the industry after researching, I mapped out a site in Figma with all the pages that should be needed to get going. I also created a typical customer flow.

E-commerce User Flow
E-commerce User Flow

Low-fidelity wireframes - Because of time constraints and because I was fairly confident I knew what the client wanted, I skipped low-fidelity wireframes and went straight to design in high-fidelity and prototyping.

Design

Wireframes and Prototypes

Figma Prototype
Figma Prototype

Development

I started with a basic Shopify theme and picked it apart to bare bones, added the CSS styles I had put together in the wireframes/prototypes from Figma. As soon as I had the theme set up satisfactorily, I added in a subscription service and customized its styles to match the site and the Wells overall brand. A few additional asks snuck in along the way, namely, a video header and an Instagram feed. I worked with a videographer to optimize the video so performance wouldn’t suffer and used the Instagram API to pull in a picture feed. We were able to successfully launch the site on time.

Results

In the two years since this I handed the site off to their in-house marketing manager, traffic has grown 117% and revenue has almost reached $50,000. If you are in Fort Lauderdale, you should check out one of their two locations or buy a bag of their fresh roasted beans at most local markets.

View Project