Tinto Coffee Co. is a concept for a Colombian coffee e-commerce site.

The Idea

Design a responsive e-commerce site for millennials to purchase Colombian gourmet coffee. The coffee is expertly curated so that the customer has it easier when making a choice and also for it to be delivered to the comfort of their own home.  

The Process

The e-commerce site was designed in a 2 person team in 2 weeks. We decided on the following UX Framework: Learn, Define, Design and Experiment.  

Learn

For the learn phase we researched data on coffee consumption, did a competitive audit, as well as social listening. From what we gathered we determined the following:

Gourmet Coffee Consumption is Growing

Gourmet coffee consumption is growing in sales over traditional coffee.  According to the National Coffee Drinking Trend Reports: For the first time in the NCDT’s 67-year history, more than half (59%) of coffee cups consumed daily are now classified as gourmet, versus 46% in 2012.

Millennials and Coffee

This change of gourmet coffee consumption has been driven by the millennial age group. This fact defined them as our target users. Some of the reasons why the millennial coffee market is booming is because they: care about the environment and where the products they consume come from,  they want to consume only the best coffee that is out there, and is the first generation that grew up drinking coffee. 

Direct Trade Coffee

According to research by America's National Coffee Association, millennial coffee drinkers are influenced by ethical certificates that show that producers have complied with sustainable practices monitored by organizations such as the Rainforest Alliance. They  care about such factors as how well the farm workers are treated and how well they are paid.

Tinto is Born

In the intersection of direct trade and gourmet coffee specially curated for the millennial target group is where Tinto Coffee Co. is born. The name Tinto derives from the origins of the product itself. Tinto is the most common way that coffee is prepared and referenced in Colombia, which means long black coffee. 

Define

For the define phase we wrote our problem statement, created a persona and worked on the sitemap and user flow. 

Persona

We developed Josh as our millennial persona and kept referencing his needs and frustrations throughout the rest of the process. 

Sitemap

For the sitemap we organized the information architecture through a card sorting process, keeping Joshua in mind and how he would expect to navigate through the site as intuitively as possible. Our main focus was a fast and smooth checkout process. 

User Flow

The main business objective of the site is for the user to purchase coffee, so we concentrated on the user checkout flow. This allowed us to focus on what screens needed to be designed and in what order to allow the user to reach their goal in the least amount of steps as possible, intuitively and simply .

Low-Fi Paper Wireframes

We began to iterate on different layout ideas on which we got some initial feedback especially on the home page, where we had a few ideas.

Mid-Fi Wireframes & Prototype

We proceeded to do wireframes in Sketch and a prototype in Invision to be able to test on 8 users. Six users wanted to know more information before they clicked on the coffee subscription service. They weren't clear on what it was with just the title. Five users felt that the main CTA button "Shop Now" in the home page was too aggressive if they didn't know the product yet. Four users expressed that in the Product Listing Page they would like a "Add To Cart" button because if they're a repeat customer they want to be able to skip the Product Detail Page and jump straight into the checkout process. 

Mid-Fi Wireframes V2

We integrated all of the fantastic feedback we got back from our user testing session and felt comfortable to move up the truth curve and design a simple style guide and comps.

Style guide

Comps & IxD

We designed the comps of the pages from the user flow as well as animations like the one you see above to show a fixed navigation bar. This leads us to further testing and developing the rest of the site for the future.