JORGE MARTIN JOVEN

Goal

Create a website for a coffeehouse that also offers bakery, cultural meetups and talks.

Github
The Windmill Coffeehouse homepage phone

Process

Process

Strategy

1  

Define and understand the kind/s of customer/s.

2  

Observe competitors' websites.

Research

Understanding customers

To understans customers behavior, I created a survey focused on:

  • What makes a good drinking-coffee experience.
  • How much interest they have in bread.
  • How interested in talk/ meetups they are.
Defining customers

Based on the survey information we create users personas portraying archetypal customers.

User Persona 1 User Persona 2
Studying competitors

I selected the highest customer-rated top 5 coffeehouses in Boston area and I studied their websites.

Findings
Survey: customers...
  • are interested in trying new kinds of coffee and bread.
  • are appealed to attend cutural meetups and talks while enjoying a cup of coffee.
Competitors analysis reveals...
  • their websites have no more than two level of pages.
  • typically a scroll-down homepage displaying the most relevant information for the customer (Menu, schedule, location...).

Design

Sketching

A scroll-down homepage displays relevant information for customers:

  • Hero image contains a simple "Visit us" button leading to the coffeshouse location via Google maps.
  • The novelties. Specials of the week and the guest of the week.
  • Explanation about the brewing coffee, the bakery and the talks.
  • Gives easy access to the coffeehouse menu.
  • Contact section offers to sign up for the newsletter.
Homepage sketch
Site map

This map shows an easy site to navigate with just two levels.

Site map
Wireframing

People look for a place to take a cup of coffee, not only from home or work, but also on the subway or maybe at the park, so responsive design is crucial.

Homepage wireframe iPhone wireframe

Prototype

HTML, CSS and JavaScript allow me to create a clickable and responsive prototype.

The Windmill Coffeehouse homepage laptop The Windmill Coffeehouse homepage tablet The Windmill Coffeehouse homepage phone