Responsive Website

Lapin Pressé
Lapin Pressé Hero Image

Overview

Lapin Pressé is a Montreal cafe that serves local coffee and grilled cheese sandwiches. It is loved by the clientele. The business model is working very well and the owners are planning to extend it by opening new locations.

Tools Used

InVision, Sketch

My role

  • Secondary research
  • Primary research
  • Interaction Design
  • Usability testing
  • Implementing existing branding

Project goals

  • Design a responsive website of the cafe. Consider carefully what role the website plays in the purchase process.
  • Extend coherent branding that aligns with the cafe’s current and desired clientele and customer experience.

"It’s the most familiar friendly place we know. We talk about everything. It's like another level of friendliness."

Interview quote

Phase 1
Empathize

In this phase I observed and engaged with people to get a better idea of their experience and motivations.

Lapin Mobile Menu

High lever goals

  • Who are the people that visit local cafes?
  • Why do people visit local cafes?
  • How do people go about finding cafes when they travel?

Specific goals

  • What are the business goals?
  • What is the current branding?
  • Who are the customers?
  • What kind of problems do the customers currently encounter?
  • What kind of problems does the staff currently encounter?

Methods

  • secondary research
  • competitive analysis
  • in-person interviews

Competitive Analysis

I analyzed over 30 cafe websites. I compared features, design, and overall feel.

See the entire spreadsheet.
Lapin Competitors

“It's more than just stopping for a coffee.”

Interview quote

Interviews

I conducted four kinds of interviews for this project. I interviewed:

  1. The owner of the cafe to find out about high level goals.
  2. Two employees to find out about their usual day, pain points, and what is important for them about the cafe.
  3. Two regular customers of Lapin Pressé and three people who regularly visit their local cafes but are not Lapin Pressé customers. I wanted to learn about their usual visit, pains and gains, and how they go about finding cafes when they are travelling.

Phase 2
Define

In this phase I analyzed and synthesized the information I gathered in the empathize phase.

Persona and Empathy Map

I create a persona and an empathy map to better understand someone who would be using the website.

Target Audience

I decided to concentrate on a person who lives in a different neighborhood in Montreal, that wants to find out more about local cafes and goes beyond a simple google maps reviews.

User Persona

lapin persona

Empathy Map

lapin empathy map

Phase 3
Ideate

In this phase I explored the problem space and brainstormed different ways of solving the problem.

Mental Models Diagraming

I used mental models diagraming to summarize my research and understand the problem space.

Mental Models

Lapin mental models

Card Sorting

I conducted a card sorting activity to help organize the website’s content.

Lapin Card Sorting

Sitemap

Based on the cardsorting exercise and the comerative analysis I created a sitemap.

Lapin Site Map

Style tile

Lapin Style Tile

Phase 4
Prototype

In this phase I experimented with different solutions for the problems I identified in the previous stages. I implemented the solutions in a paper prototype, which allowed me to improve and re-examine my ideas quickly. After that, I moved on to creating a prototype in Sketch.

Paper Wireframes

Lapin Paper Wireframes

Low Fidelity Wireframes

Lapin Low Fidelity Wireframes

Phase 5
Test

InVision Prototype

I created a low fidelity prototype in inVision based on the low fidelity wireframes. I made a desktop prototype and a mobile prototype

Tasks Tested

  1. Find opening hours.
  2. Find the price for a vegan sandwich.
  3. Find out if the company is hiring.
  4. Can the user find the mobile menu?

Results

  • The participants were able to complete all the tasks both on desktop and mobile.
  • The mobile menu was easy to find and use.

Final Design

Desktop Wireframes

Lapin Desktop Wireframes

Mobile Wireframes

Lapin Mobile Wireframes