E-groceries — E-commerce project

Our first UX project at Ironhack!

After our introductory Google Design Sprint at Ironhack, we were presented with our first project brief: an important regional supermarket who leads its area with an established network of grocery stores wants to leap into the online market. They are already offering something different in their physical stores, gourmet food and special to-go meals, but they need some added value in their online stores in order to compete with online leaders like Amazon or Walmart.

We rolled up our sleeves and made our first user research with interviews and surveys.

Empathize

After gathering our first results from the surveys and interviews, there are two things we know for sure: people don’t like buying fresh food online that they can’t see and choose, and when they buy, they expect fast deliveries and discounts.

We worked with a UX strategy blueprint and a Lean UX canvas to set our business goals, strategy, hypothesis, user goals and first solution ideas.

We will be working according to 3 hypothesis:

  • We need to give a personal service to be as good or better than that of the physical stores in order to win our customers
  • We need to take into account all kind of diets: lactose-intolerant, gluten-free, vegan, etc.
  • As a gourmet supermarket, we need to be able to prove the quality of our products as a differential value.

After our definition stage, we decided we wanted to focus on the idea of offering packs of recipes to buy all ingredients at once, suggesting our users delicious gourmet meals.

Ideation exercises

With the data from our research, we made a set of ideation and empathizing exercises: user personas, user journeys, storyboards, mind maps, affinity maps, empathy maps, crazy 8s…

Affinity map

Affinity maps are tools that help us organize and structure all the information we have. We included interview and survey data, our brainstorming ideas and info extracted from a mind map exercise.

User personas

User personas help us define our user needs. We identified three:

  • Miguel. He loves food and trying new things, he usually browses the internet for recipes and is very careful with what he is eating.
  • Matthew: He is a very busy businessman, works all day. He especially values being able to program the delivery to arrive at a specific hour.
  • Sara: She loves inviting her friends for dinner, but has to deal with various intolerances and diets when organizing the meals.

User journey

With Miguel we imagine ourselves on the itinerary of a person who wants to buy a recipe and visualize possible pain points to his customer experience. We find out that if he isn’t able to filter recipes, he will have trouble finding the ones that meet his interest. He is also a bit of a foodie and enjoys knowing about the origins of the food he’s buying, so we will make sure our users can have a detailed description with a certificate of origin. The third important pain point we find out is the possibility of deleting ingredients that users already have at home or may not want to buy.

Crazy 8s and hand sketching

When we needed to begin materializing our ideas into features and screens, each of the members of the group made 8 fast sketches in 5 minutes. Prior to this we had already gathered and analyzed a bunch of websites for reference, identifying the best and worst elements of each. This way is easier to do the crazy 8s, since we already have some ideas to work with.

Afterwards, we put them in common and took elements that we liked most of each sketch. In the end, we had a hand-sketch of our recipe’s page that we came to collaboratively.

Prototyping

Architecture information

After ideation, we need to define the structure and flows of the website. For this, we first made a card sorting in order to classify the products and services into categories and start defining our top menu.

Sitemap

We decided that the users could have a fidelity program on their personal space. Users would be able to save recipes or establish filters

We also defined the flow and screens needed for a user to find a recipe, add it to favorites, check the origin of the ingredients, add it to the cart and then be able to delete some of the ingredients.

Architecture information / flowchart

Lo-fi wireframes

Next, we jump into Sketch to make our low fidelity wireframes. This tool allows us to quickly test our solution ideas with real users. We made a “talk-aloud” testing where our users where asked to complete a series of tasks:

  • Filter a recipe by hot plate, vegan and milk free.
  • Add a recipe to your favourites
  • Check the detail of the ingredients
  • Add it to the cart and delete an ingredient

We had a good response to our product and identified points of improvement:

  • Giving feedback after the login
  • Indicate that all ingredients of a recipe will be added to the cart, although later we iterated to incorporate the ability to delete ingredients directly from the recipe page.

Open the prototype on InVision (in Spanish)

UI

Once we had a defined minimal product, we started developing the visual identity and user interface. We worked collaboratively by making 4 different identity propositions and merging the best of them into a final high-fidelity prototype.

Moodboard

The moodboard serve as a visual guide for our UI decisions. We work with 5 categories: colour, form, typography, texture, and tone.

Colour

For our final moodboard, after the merge, we chose a color that would give a sense of freshness, evoke nature, and transmit the quality of our gourmet food.

Form / Texture

The form is clear and linear, for the texture we wanted a lot of white space with slight shadows.

Typography / Tone

Our typography choice is Circular, the same that Airbnb uses, it is very rounded and has a close and friendly tone to it.

For our tone, we chose a Daniel Wellington watch since it’s the choice of people who want something exclusive but it’s still quite affordable.

Style guide

We made a style guide with our final colours, a light green with a neutral and sophisticated black and white, the typography, grid, spacing, iconography, and the main components.

Style guide

High fidelity prototype

We finally translated all of our work into a final prototype. We made a big team effort to choose the best of our four prototypes and merged them into one. We decided to make a responsive web, but focused on the mobile version, expecting a lot of our customers to check our website in between meetings and responsibilities.

First, you can check our adaptation to web. We have a homepage with three divisions, each with one main message: recipes, products and about us.

Website Homepage

We worked very hard on making filters usable and understandable. We finally decided to have two rows: one for the kind of diet (vegan, sugar free, milk free, gluten free and healthy), one for the kind of dish (hot, cold, seasonal, starter and dessert).

And finally, our final prototype, where we developed the same flow as before but implementing what we learned from our testing. We include information about the recipe and a preparation video, as well as a visual list of ingredients that are easy to delete or check for details. The user can choose a number of servings and we offer a wine-pairing proposal.

We also keep the possibility of saving recipes as favourites, and designed an easy sign-up sequence.

Next steps would include testing, working on the design of the shopping cart, and the personal space, as well as linking the product pages with the recipes.


Thank you for checking out this project and I hope you enjoyed our solutions. Thanks to all our teachers for their training and mentorship, and to my group colleagues Soraya Heras, Susana Gascón Morcuende and Cristina Traba, who made this project possible.

If you enjoyed this, go check my other projects Hop In and Emprendelo.

Like what you read? Give Celia Viudes a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.