is a leading regional supermarket focused on high quality food and services. They have an established network of premium brick and mortar grocery stores with diverse amenities such as hot food bar, sushi bar, wood-fired oven, wine tastings, dining area amongst others.


Even though ABC Groceries is a highly known grocery shopping store, the management team is aware that more and more consumers are switching to online grocery shopping, specially now with Amazon’s recent acquisition of Whole Foods. ABC Groceries wants to run a pilot program to test a digital experience by offering their customers to buy groceries online and increase not only digital sales but also somehow maintain alive the physical grocery shopping experience.


I was given a 3 week sprint to develop a UX/UI solution. During this time, I emerged into IDEO’s design thinking methodologies.First step was to conduct a research focused on gaining an understanding of how users typically bought their groceries. This included understanding the context and reasons behind their decisions.

The research was divided in two parts; surveys and interviews. This was done in order to have deeper knowledge and both consistent and reliable quantitative and qualitative data. Through the surveys I understood the big trends and generic information of a rather large portion of potential users, while with the interviews I obtained more a personal and detailed data.

The insights, pain points and findings of the research were synthesized through various methodologies that allowed me to understand and digest the information in a orderly and hierarchical manner. The most useful tool I used was an affinity map, which allowed me to converge the amount of information obtained into smaller groups based on important information and trends found. This is how I carefully picked the biggest pain points people kept having over and over again.

The main insights I found were

  1. Most of the people enjoy going to the supermarket and interacting in it.
  2. Most of the people researched are young professionals that deal with jobs, cooking and socializing in a tight schedule.
  3. Grocery stores and customers create a close relationship that goes beyond shopping.
User Persona Profile

After understanding the key research insights, and the overall grocery shopping experience I have created a “persona” who is a fictional user that reflects an specific lifestyle, thoughts, attitudes and frustrations. This allowed me to empathize more with the user, by fully understanding what the person wants and needs.

The user journey was specifically created to interpret “a day in the life” of Natalie, this allowed me to visualize her daily pain points and determine which moment is the optimal for creating and implementing a design solution. This design step is crucial because it allows us to clearly see and design for business opportunities.

User Journey


A great way to come up with lots of ideas is an exercise called crazy 8’s. Basically you have 8 minutes to come up with 8 ideas. The crazier the better. This is a great way to loose the mind and start thinking possible and creative ways to solve problems.

I did this exercise 3 times, and threw lots of good and even bad ideas. Some of them were viable, others weren’t. But that’s the beauty of it, being able to let the imagination flow.

After this, I used a method called The Moscow Method that helped me determine possible features/ideas my user would, could, should and wont need. This was a helpful part of the process because I already had so much information it was necessary to place some of the ideation ideas into 4 categories that would determine the which features were a must, a maybe or a definite no.


After this exercise I was able to filter the possible features into the most important one, the one I made my happy path.

Events, how come no one ever thought of it? Sometimes the best solutions are the simplest ones. What ABC Groceries need is an events section where people can cook, socialize and still enjoy the physical store experience. That is why my happy path became the events section in their new app.

“I found a solution that integrates 2 fundamental pillars in the day of a young professional; eating yummy food & meeting new people”

Cooking together creates strong bonds

“It was clear that even though people have limited time to grocery shop, they still enjoy the experience of the shop itself.”


Once I designed an idea that would satisfy both my user and my clients needs I started to organize my information and categorize my products features. This is how I got to an exercise called card sorting, in which IA plays an important role. With index cards, I validated with some users to understand their mental flow when it comes to online grocery shopping and as well event confirmation. The most important takeaway was understanding the importance of correct wording!

Based on the previous exercise I was able to develop a user flow, only focused on the happy path (the events page). This allowed me to understand the number of steps the user had to take to complete the happy path, and the overall complexity of the navigation. The easier the better, so that’s why I tried to have the least amount of steps.

User Flow

Next step was concept testing and Lo-Fi Wireframes. I sketched based on the results from the card sorting and user flow. It was about finding the best way to communicate and show users how to use the application in an intuitive manner.As soon as I validated with potential users, I found that 100% asked for a back button, as well as the RSVP section was not very clear. Amongst other opinions, it was direct and simple, which is what I was looking for.

Mid Fidelity came up and I improved what I was told. Tested with potential users again, optimized the experience. Based on that my Hi Fidelity wireframes were obtained after a long process of validation, until my user completed the task without any doubts or comments.

Low to Mid Wireframes


Now that the usability and experience of the design is focused on the user, it was time to develop the UI portion of the project. I first started with a general moodboard that would set the tone and feel of the brand, based on its attributes. With this I could determine colors, textures, emotions and sensations.


After that created a style tile, a graphic deliverable to show the client the basic outline of the visual identity. This was also tested on potential users, because what really mattered was if they were grabbing the brand attributes from the images and fonts. Having that on point, I was able to create a style guide, this is when I went down to the atomic level and started to design the buttons, icons, font size, cards and every other building block that create the graphic universe of the product. When this was ready finally I created a Hi Fidelity prototype.

Style Guide


Result of UX & UI development

I was able to test it over and over again and confirm how fast and intuitive users get through their happy path. Inspired by the elegant and minimalist touch of ABC Groceries newest app.


  • Business goals: Always be aligned with what your clients is asking you for and always keep in mind the business goals behind the product. This is the starting point, and understanding the reason behind the need is half the project itself.
  • Simplicity is better: The fewer steps a user has to take to reach their final goal mean acceptance and desirability.
  • Constant Validating: Is what truly determines the quality of a UX process. We design for the user, we simplify tasks and the only way to understand how users feel and think is understanding and empathizing with them. But most importantly, a constant validation process is what will determine the success or failure of a product.

This was my 3 week sprint project, thank you for reading it! Feedback is more than welcome!

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here