UX Design and Strategy for an E-Commerce Site

Connecting Online Grocery Delivery and Recipe Based Shopping

The Challenge

For this project, I received a project brief outlining a summary of user research and three user personas.

Utilizing the project brief and personas, I was asked to design a website and user flow, create a clickable prototype, and conduct usability tests.

My Role

This was an independent design project completed in 2 weeks. I designed and prototyped a website and then completed usability testing.

Skills Used:

Sketching, Competitive Analysis, Open Card Sorting, Information Architecture, Site Mapping, Prototyping in Axure, Usability Testing.

The Problem

Based on previous user research provided to me, I identified the following user pain points:

  • It is difficult to plan and shop for groceries without forgetting something.
  • Shopping and cooking for 1 or 2 people often generates food waste.
  • Planning meals, grocery shopping and cooking is time consuming and difficult for people with busy schedules.
  • Users enjoy cooking, but find it challenging due to a lack of inspiration, low confidence in their skills, and lack of motivation.

The best possible design solution answered:

“How do we make the entire meal planning, shopping and cooking process faster, more approachable, more enjoyable, and reduce food waste?”

How To Stand Apart in the Market

Competitive Analysis

I started by researching who else is operating in the recipe delivery market. I looked at competitors in terms of their business model as well as their features.

The current online market supports two separate tasks: purchasing pre-portioned, pre-planned meal plans or purchasing traditional grocery store ingredients for delivery. While the major market contenders each have an area they specialize in, no one in the market fulfills all user needs including flexible, pre-portioned ingredients with an ability to search by diet, be inspired by online content, and access immediate online customer service when there is an issue. There is an open market space for a digital product that provides recipe based meal planning and flexible ingredients along with online content and instant feedback.

Information Architecture of an E-Commerce Site

Open Card Sorting

I wanted to take a user centered approach to designing the organization of my website. I started by conducting an open card sorts with users. I wanted to see how users naturally grouped ingredients and meals, and what words they used to describe groups.

Users have strong and emotional connections to food. I wanted the site to be comfortable and use natural language. I heard some interesting comments.

‘Meat’ is a boring word.
Pizza is a category.
Soup is a feel good food.

I used the results of my open card sort to label my categories and navigation.

Site Map

I created a site map to define the pages of my website and show how the content is organized and connected. There are three main content areas of my site including user profile and history, product browsing, and articles and content.

Creating the Recipe Shopping Experience

Sketching Layouts

I started thinking about the layout by sketching. I wanted to incorporate familiar layouts from the Peapod website such as a tab structure for navigation. I also wanted the design of my website to have more content such as blog posts and videos as room for users to explore and be inspired.

Start with the User First

By starting with the user flow, I was able to keep a specific personas pain points and objectives in mind. This user flow allows the user to browse recipes and mark favorites, order ingredients for a weekly meal plan and a dinner party, and share the experience on social media.

This user enters from a partner site advertisement. The user arrives on a page with content and inspiration. The business objective of this user flow is providing enough inspiration and ease of use that the user elects to order ingredients for delivery.

Designing Features for Users

Prototypes

The user is immediately brought to the main browsing page. From here they can browse recipes, navigate by type of recipes, and search and filter based on diet, type of recipe, cuisine, and skill level.

The bulk of the content can be viewed on the single recipe page. From here, the user can view information about the recipe, save to favorites, view nutritional information, view wine pairings, instructional videos, and user notes. This page includes enough content and ideas to inspire a user and show them they can have a blog post worthy meal ready in a few simple clicks.

The main checkout page allows users to make adjustments and substitutions.

Testing with Users

Usability Testing

The biggest part of this project was putting the prototype in front of users and seeing how they react. My biggest takeaways from user testing include:

Content is key- Users need a significant amount of content and text in order to really understand and move through your site.

Users know how to move through a process of adding an item to a cart- Users would naturally move to place on the page that felt familiar to them to add ingredients to a cart. Unfortunately, I had placed a button there that suggested wine pairings. Users clicked the button without reading any of the text. By observing this, I was able to move call to action buttons to locations that were intuitive to users, and relocate secondary actions out of their way.

Users understand icons- Users instantly recognized icons such as a heart to favorite a recipe. Keeping with standard design conventions makes your site intuitive and easy to use.

Finalizing the Shopping Experience

I completed 7 rounds of user testing and iterations and finalized my product. A video of my prototype can be viewed at:

https://vimeo.com/177835498

What Went Well

I enjoy learning new tools, and I easily picked up Axure. By the end of the week I was diving deep into the software’s capabilities.

Conducting usability tests with a clickable prototype was eye opening. I thought I had an intuitive, organized product but each usability test led me to dozens of iterations I would not have discovered myself.

What Did Not Go Well

I struggled to think future forward with this project. I considered the traditional online grocery experience and reiterated and added slight modifications to existing features. I did not push myself to think about how the shopping experience could be reinvented to be easier, faster, or more convenient.

If I were to do this project again, I would think more about more future forward solutions including:

  • Creating meal plans and ingredients list from inspiration boards;
  • Utilizing bar code readers;
  • Integrating a mobile experience;
  • Using image identification;
  • Reimagining the checkout process.

There were also many opportunities in this challenge to think about the physical touchpoints of of product which I completely ignored. Sarah Doody wrote an interesting article on her her ideas for recipe delivery sites and reducing waste.

Lessons Learned

  1. Start with a User Flow and Site Map- I found this article on designing user flows by Smashing Magazine to be helpful during this project. By starting with a site map and user flow, I was able to quickly and comprehensively design pages and features based on user and business objectives.
  2. Always do Usability Tests- I gained so much information and feedback from my usability tests. 7 user tests allowed me to complete significant iterations and ultimately produce a better product.
  3. Push yourself- At the end of the project, I was disappointed in myself for not pushing myself to include more innovative design thinking. When given the opportunity, I will jump at the chance to use future forward ideas to make a user experience friendlier and easier.