Company: Groundwork coffee is a company from Santa Monica that produces 100% organic coffee and tea. It has several coffee shops around LA, and also distributes its products through supermarkets and online.

Challenge: It's hard to navigate through the website due to its confusing information architecture. The company's branding and values are not really portrayed clearly in the homepage. The online shopping process is not simple

Mission: Re-design the information architecture as well as the webpage's interface. Simplify the buying process.

Stakeholder Objectives:

  • Get more subscribers
  • Make the purchasing process easier to increase online sales
  • Portray the company values better to connect with the community through social media
  • Make it easier for wholesalers to buy online
  • Be able to compete with local and national coffee retailers

RESEARCH

Research:

Research was conducted through the following ways:

  • Yelp - understand what customer where saying about groundworks and if they liked their product
  • Groundwork coffee shops - I visited various of their cafes to taste their products and understand who their users and personas are
  • nterviews -  Interviewed various people that buy groundworks coffee in the supermarket and online
  • Competitive analysis - Analyzed competitor's webpage (design, information architecture...)
  • Asked question to stakeholders

Findings:

Research showed:

  • Most online users are wholesalers that buy for local stores or supermarkets
  • The majority of customers buy the coffee cause they like the taste and it's 100% organic
  • Competitors had a cleaner and more modern webpage design, hence their branding identity was clearer
  • Some users like to connect with the online community and understand how the coffee is made and where it comes from

ANALYSIS

Personas:

The research showed there are three main users:

Information Architecture:

Since the information architecture was one of the "pain points" of the site, I did a card sort to simplify it. The video below shows the original site, and how I reduced the headings and sub-heading.

Sitemap:

After re-organizing the information architecture, I created a simple sitemap.

User Flows:

Although I have three personas, I developed the user flow for only one (Stephanie). Her user flow consists on buying coffee online.

DESIGN

Sketches:

My main focus for this project was to create a good homepage design and navigation menu. I concentrated mainly on the top navigation menu and header since these two parts needed to contain a lot of information and still keep a simple/user-friendly feel. My sketches below show different mock-ups of the homepage and the different designs I explored.

Mid-fi Wireframes

(Home Page)

Although I developed my wireframes for just one user, I designed the homepage thinking about the other two users as well. The wholesale heading is now in the top navigation menu. Buyers and customers can see the 'top sellers' in the homepage in order to help them with purchasing decisions. Users that want to understand and connect with the community can click on the second banner or on the social media icons.

Mid-fi Wireframes

(other features)

I decided to add images in the drop-down menu, so when you scroll through the sub-headings the image changes depending on the word. This makes the site more user-friendly and easier to identify what you are trying to find.

Instead of going into another page when the user clicks on a product, a pop-up comes up, and shows the product. The user can decide to add it to your cart or close it down. This makes the purchasing experience faster

Mapping & User testing

I mapped all my wireframes in the wall  and let the users test it and give me feedback.

Final Mid-fi Wireframes

(Complete user-flow)

guiomarhernan@gmail.com

GH

Instead of going into another page when the user clicks on a product, a pop-up comes up, and shows the product. The user can decide to add it to your cart or close it down. This makes the purchasing experience faster

I decided to add images in the drop-down menu, so when you scroll through the sub-headings the image changes depending on the word. This makes the site more user-friendly and easier to identify what you are trying to find.

guiomarhernan@gmail.com