Building an E-Commerce Site Using Information Architecture and Usability Testing
Tools Used: Paper and Pen, Axure
Skills Used: Sketching, Competitive Analysis, Open Card Sorting, Information Architecture, Site Mapping, Prototyping in Axure, Usability Testing.
Connecting Online Grocery Delivery and Recipe Based Shopping
Using Peapod grocery delivery as a case study, build a complementary website that allows users to purchase ingredients for their favorite recipes, be inspired by new recipes and cooking techniques, and reduce food waste.
This was a 2 week, independent design project. I designed and prototyped a website and then used the prototype to complete usability testing.
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?”
A website, Peapod Recipe, that allows users to browse content, plan recipes and order pre portioned ingredients. For this project, I created a clickable prototype demonstrating user flows and the purchase process of an online grocery purchasing and delivery.
How To Stand Apart in the Market (Pun Intended)
I started by researching other companies operating in the recipe delivery market. I focused on competitors who also deliver groceries and meal plans and compared their business models and features.
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.
Peapod Recipe Information Architecture: Not the Same as Organizing Aisles in the Grocery Store
Open Card Sorting
I took a user centered approach to designing the organization of Peapod Recipe. I started with an open card sort 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. Feedback included:
‘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.
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
I started designing 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.
Jackie enters from a partner site advertisement. She arrives on a page with content and recipe ideas. 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 the Product for User and Business Objectives
User Flow: Jackie
Jackie is immediately brought to the main browsing page. From here she 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.
Testing with Users
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:
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.
- 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.
- Always do Usability Tests- I gained so much information and feedback from my usability tests.
- 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.