Client: Guillaume Hivert, CTO @Wolfox

Individual Academic Project

Duration: 2 weeks (2 x 1 sprint for UX/UI)

Softwares: Sketch, Flinto, Marvel

This project was featured in Prototypr on Medium.com. Link to original publication: here.

My client is a coffee aficionado and a Full-stack web developper. As he explained to me during the brief the most difficult part for him is to have a real user-centered approach and making a beautiful interface.

He has been living in Paris his whole life but was struck by the fact that (most) Parisian cafés serve terrible coffee. He had three main streams of reflexion when thinking about his project:

  1. Making it easy to find coffee shops
  2. Creating an e-commerce solution to buy coffee directly from coffee roasters
  3. Teaching users how to recognize a good quality coffee

I chose this project because it was clear that the UI Design was going to be challenging. Also, it appeared that the most important part was going to be centered around the UX Design. The goal was to define a MVP to be able to launch the solution at the end of 2018.

I had two weeks to deliver a final solution, I dedicated 1 week to a UX sprint and 1 week to a UI sprint.

UX Design

Empathize

I started by trying to understand the whole context of the coffee shop scene in Paris. Where they any competitors offering this kind of solution? What was the real problem to solve, should all three streams be included in the MVP? What should the goal be ?

I used several tools to answer those questions, specifically:

  1. Competitive analysis
  2. Problem statement
  3. Hypothesis statement
  4. Survey and interviews
  5. Persona
  6. Site map
  7. User flows
  8. Low-Fi testing
  9. Mid-Fi wireframing

Competitive Analysis

Problem statement

They are too many sources of information concerning coffee in general, and specifically when looking for a coffee shop.

Hypothesis statement

I established the following Hypothesis to go forward with my work:  » We believe creating a collaborative platform for coffee enthusiasts will make it easier for them to find a good coffee shops and give visibility to small coffee shops. We will know if we are right if users join the platform. « 

Define

In this part I tried to understand what the potential users would need in regards to my problem. In order to do so, I had to know who they were and what pain points they had.

I used several tools like:

  1. Survey and interview
  2. Persona
  3. Feature prioritization
  4. Card sorting
  5. Site map
  6. User flow

Survey and interviews

When interviewing stakeholders (coffee lovers, coffee roasters, …) the thing that came up the most was that it was very difficult to find a platform that could give you a list of places that corresponded to your specific needs. For example a freelance designer is going to need a relatively quiet place with electric outlets. A person who is really into coffee will look for a coffee shop that also sell coffee grains.

I had to define the main features that would be included in the MVP. With the input of the User Research it was clear to me that I had to respond to the main pain points that emerged:

  1. It is sometimes difficult to find a coffee shops in line with your taste
  2. It is difficult to trust the feedback of others on platforms like Yelp or Foursquare

That is why I focused on these three points:

Those three features are the ones that bring most value to the user and would justify the deployment of the solution. Also, I decided that the solution should be a web application as most of the people actually go through a Google search to find the information they are looking for. It made more sense to have a direct access to the solution rather than having to download an application. It should also be optimized for mobile use as one of the main features is geolocalization.

Persona

The influencer

The follower

Ideate

I conducted a crazy 8 to diverge into as many features as possible 🙃 and kept only the ones that made the most sense.

Prototyping and Testing

I made some paper prototyping before moving on to Sketch.

I did some testing to potentially make some changes. The objective was also to let the testers alone with a set of instructions. They had stickers that they put on the spots where they tapped/clicked.

The results were very positive, I only had to refine the wording of the different screens.

Mid-Fi wireframing

UI Design

Creating an interface from scratch

Styles

Moodboard

Style Tile

Animations

Some screens

>> Link to Marvel protoype <<

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.