Artisanal Coffee store (UX Case study)

Pouria Keshavarz
6 min readOct 24, 2018

--

Objective:

The objective of this Store (World of beans)is to offer the user the different brand and qualities of Artisanal Coffee beans in one place and save them time and money and to bring an online present for artisanal coffee products and re-create the elements from the in store experience to the website.

Also there would be features to help clients with choosing beans to gift and give information about coffee and the different ways to brew.

1-Research:

our Journey started with research which contains of Interview, surveys and contextual inquiry

Contextual Inquiry:

Below is the what pretty much i saw when i was in different coffee shop stores and the way the clients interact in physical store to buy the coffee and beans.

Interviews:

we interviewed bunch of customers and baristas

below is sample of some of information we got based on below questions:

Retailers:

  • Can you tell me what the artisanal coffee scene is like in vancouver?
  • Do you see growing trend of customers buying artisanal coffee? why do you think that is?
  • What do people look for when they want artisanal coffee?
  • Why do you think those who drinks artisanal prefer it instead of of form a major chain brand?
  • Do you think there are more artisanal coffee drinkers who drink at home vs at the store?
  • Do you see people buying artisanal coffee online? If so, what’s the process like? If not, why not?
  • Is it difficult to sell artisanal coffee beans online? Any hurdles?
  • What has been more common to sell? Coffee beans or cups of coffee?

Customers:

  • Do you drink artisanal coffee often? If so, why?
  • Can you tell me what the artisanal coffee scene is like in Vancouver?
  • What do you look for when you buy artisanal coffee?
  • Why do you prefer it over a major chain brand?
  • Do you make coffee at home more vs buy at the store?
  • Do you purchase artisanal coffee beans online? If so, what’s the process like? If not, why not?

Survey:

we arranged the questions for our surveys as per below

174 people responded to this survey which was posted to different facebook groups and some other channels like reddit.

Do you drink coffee?

Do you prefer products specifically because it’s handcrafted?

Do you value environmentally-responsible trade?

Do you go to artisanal coffee shops (i.e. not Starbucks, Blenz, or Timmy’s)?

What kind of coffee do you drink?

How often do you drink coffee?

Why do you drink coffee (to stay awake, morning routine, enjoyment, etc.)?

Why would you go to an artisanal coffee shop vs. a franchise coffee shop?

Where do you usually drink coffee?

Where do you usually buy your coffee?

Do you prefer drinking coffee at home or at a coffee shop?

How do you like your coffee?

2- Planning

Affinity Diagram

Affinity diagramming has long been used in business to organize large sets of ideas into clusters. In UX, the method is used to organize research findings or to sort design ideas in ideation workshops.

We find and cluster our achieved data to 14 category

Those are

1-Price 2- Age 3- Type of roast 4-Quantity 5-Target user 6-Environment,7-Premium product 8- Artisanal attribute 9-Online shopping habit 10- Reasons to drink11-Market share 12-In store purchase 13-Education 14- Tasting experience

below is our Affinity diagram based on the data we gathered from interviews and survey

Persona

Based on our affinity diagram we devise the below persona:

Our persona is Suzi age 35 years and professional woman

User Story

Suzi comes to my website to buy the bag of coffee beans and gift it to her freind, She don’t wants to pay too much and don’t want to spend lot of time searching for different coffee beans and their prices, I want her to find the specific artisanal coffee beans with the best discounted price for her gift to her freind, The website will show client the latest products promoted products from the cheapest to expensive based on the visitor criteria.

Storyboard

A storyboard in UX is a tool that visually predicts and explores a user’s experience with a product.

Customer Journey Map

A customer journey map is a diagram that shows the steps clients go through when interacting with an organization, from buying products online to get in touch with customer service .

Below is my e-commerce store customer journey map showing the interaction of user with my website.

User Flow

User flow is a term for the description of a set of tasks that a user must do to complete some process.The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, such as purchasing a product.

Below is user flow for two main features that my website offer to my user ( Buying Gift & Educating)

3- Design

Sketch

Sketching is a very efficient way of communicating design while allowing designer to try out a multitude of ideas and iterate them before agreeing on final version.

Below is my paper sketch which consisted of 21 interfaces.

Digitalized Sketch

I used the Sketch software to build the digitalized interfaces, Sketch is a proprietary vector graphics editor for Apple’s macOS, developed by the Dutch company Bohemian Coding. Sketch was first released on 7 September 2010 and is used widely by industry along with other application such as adobe illustrator.

I go over my paper sketches and tweak them a little bit and arrived at 19 interfaces and build the interfaces in sketch.

4- Build

Prototype

I made my prototype in Invision; this app is basically a prototyping tool that allows you to create clickable versions of your design, it also allows you to share projects with your team, create animations and interact with design tools such as Sketch and Photoshop.

I used the Invision craft plugin to export my sketch files to Invision.

Below you may see and test my prototype

5- Test

Usability Testing

Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users.

I Sat with different users and observe their interaction with my website prototype and observe them when they buy in my store

I Noticed the below items:

1- Customer had trouble to find the right product which result in changing the flow of some screens and omitting some screens

2- The users give me some feed back to where they are comfortable with the call to actions buttons like (Add to cart or check out) so I changed around the buttons and adding some more in specific pages.

Future consideration

For future development of this website, I will consider to add section for clients to order different coffee beans sample and send them to their address free of charge.

Also creating the forum for members in the website to interact with each other and create a friendly community for our customers would be the next phase of development.

--

--