As part of my and training at Ironhack Paris I had the chance to work on a third and last project. This time, I chose to work for a client on an exciting topic that most of us love: coffee!☕️

My client is a coffee aficionado and a Full-stack web developper. As he explained to me during the brief, he has no real technical struggle when setting up an app or a website. The most difficult part for him is to have a real user-centered approach and making a beautiful interface.

He has been living in 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. A great challenge to confirm my skills as a UX/UI Designer 😄.

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 — 1 week sprint

Design Thinking methodology

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 ?

MVP main topics

I used several tools to answer those questions, specifically:

  1. Competitive analysis
  2. Affinity Diagram
  3. Problem statement
  4. Hypothesis statement

As you might know, UX Design is all about the problem rather than the solution.

Main market figures
Competitive analysis

After the Empathize phase, I was able to identify the following problem:

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

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

The main outcome of this phase was that users didn’t necessarily want a very high quality coffee but a nice place to meet. Therefore, when choosing a coffee shop, the vast majority of them answered that the atmosphere was the most important criteria.

Survey summary

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.

Interview verbatim

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:

Main features of the MVP

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.

I was then able to define a persona for the project. Actually, it was two personas that would have two different user flows 🤓:

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.

Prototype testing 🧐

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

UI Design — 1 week sprint

For the UI Design part I really wanted to make a clear an joyful interface. As the main pain point is navigating through I wanted the interface it to be easy and fresh.

Moodboard

Moodboard

Style Tile

Style Tile

Atomic Design

Atomic Design
Atomic Design (Molecules)

Animations

Profile page animations
Button animation

What do you think? This project ended up second out of 11 projects during a public voting with more than 50 attendees.

Don’t hesitate to give me feedback!



Source link https://blog..io/-caf%C3%A9-%C3%A0-paris-%EF%B8%8F-ux-and-ui--907a740548d9?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here