Designing a Microsite for Sainsbury’s

The Brief

I was tasked with creating a microsite for Sainsbury’s where users could plan meals for given days. My goal was to help people plan and manage their meal ingredients purchases more efficiently. I had two weeks to develop this project.

I would need to deliver the following to fulfil the brief:

  • Detailed Site Navigation Schemes
  • Business Analysis
  • User Journey of the Key Navigation
  • User Flows for the Key Areas of the Microsite
  • A Detailed Site Map
  • A Clickable Prototype

Context

Young Londoners are eating 25 quick-fix meals a month

Nearly half of young adults in London rely on takeaways for the majority of their meals. That’s the main problem behind it.

People don’t have time to buy groceries and then cook at home after work. Besides, the lack of cooking skills doesn’t help.

As a consequence, both problems drift into takeaways and ready meals filling our homes. Good and healthy habits should be promoted and developed to reduce the frequency of eating food prepared outside home.

How do we make it easier for people to cook at home in a easy and appealing way?

Enabling people to plan meals based on recipes and get them delivered home. Plannsbury is a great service for people who are not accomplished cooks but want to cook home following recipes and with the exact amount of food to prepare. Easy and quick way to create nice meals.

User Research

Notes of my interviews

Included in the brief were three personas that Sainsbury’s had provided. My first task was to conduct a research and establish who would be the primary persona moving forward.

I put together a simple questionnaire on meal habits and the process they go through to eat home. I interviewed users with different profiles and habits.

On one hand, users that are very busy and don’t have enough time to buy groceries and then cook home. This interviews helped me understand how a Meal Planner Micro Site could benefit them.

On the other hand, interviews from users who already use Meal Planners such as Hello Fresh or Buy Fresco. During this conversations users told me how their experiences were like using this service. We went through their pain points, why it was beneficial to them, pros and cons. Listening to their experiences and taking notes enabled me to fully understand how this service works, their process, how it could be improved and their added value.

I was also able to use the results of my research to determine that the primary persona that would be used through the design process was Jackie.

So I knew my primary persona, and I knew the process they went through currently and where the pain points in that process were. I also knew the sites my users use already, so I was able to conduct a competitive analysis.

Key Findings

  • Lack of Variety on Meal Planners, not flexible
  • Need of flexible service delivery
  • Limited choice of recipes

User Goals

  • Plan meals from a variety of options but easy and fast to go through the process
  • Option to remove ingredients from the list if the user already has it

Business Analysis

I started by looking at direct competitors that offered Meal Plans such as Hello Fresh, Blue Apron and Plated.

I found that the layout of the E-Commerce sites were easy and fast to follow. Their main goal is to make it easy for the user to plan their meals. On the other hand, they don’t leave so much room to variety. Some of the options are weekly plans and you can’t choose from recipes. Others, gave you the option to choose from recipes but the diverse was limited.

I did some competitive analysis around supermarkets and their Meal Plan offers. Tesco’s meal planner isn’t intuitive and easy to follow, Morrison’s is limited, Waitrose doesn’t offer Meal Plans and Ocado’s isn’t a Meal Planner but a combination of weekly offers. Sainsbury’s opportunity in this market nich is high as you can see. The challenge was to give the user exactly what they need.

User Flows

Once I knew what the competitors were offering and my users goals, I was able to create the main path that my user would follow to complete her objective. This User Flow worked as my guide through out the process while sketching, creating wireframes and testing my prototype.

Sketched Wireframes

Once I was finished evaluating my research and findings I started sketching my wireframes based on my main User Flow. Next step was to build my medium-fidelity prototype in Omnigraffle.

Sketching is essential to throw on a blank paper all your ideas, thoughts and wonderings. It helps you clear your mind and see if you’re on the right track. But most importantly, if your idea is actually going to help your user.

With my first sketches I was able to do some preliminary testing and see if the navigation was easy to follow.

It seemed like my sketches actually worked so I was ready to build some digital Wireframes.

Wireframes

There was a lot iteration, testing and constructive criticism. Having help from instructors and colleagues was very useful to actually realize what wasn’t working, what did I miss and what could I improve.

When I was happy with the testing, I used Omnigraffle to digitize the sketched wireframes. I was then able to upload the files created with Omnigraffle into Invision and create a clickable prototype.

Then I was back to testing.

One of the main issues that came up with testing was the main navigation. Once you’re on a recipe detail screen, it’s wasn’t easy for the user to continue shopping. To make it easier for the user I created a submenu inside Planner to enable the user to go fast to themes and continue choosing recipes.

Next Steps

  • Add Search option in theme screen
  • Track your delivery
  • Recommend recipes to a friend

This two weeks of learning the design process have been tough but very fulfilling. Let’s see what project 3 is about!

Follow me on Twitter and Instagram!