Natural Pet Foods

Redesigning the information architecture of an e-commerce platform based on users' needs and usability testing

Project Overview

naturalpetfoods.ca is the e-commerce platform of Natural Pet Foods, located in Ottawa, Ontario, Canada, providing natural pet food, treats, and supplies. However, the information architecture (IA) of the website is designed in an inefficient way for users to search for their wanted items.

To improve the user experience of the website, four other aspiring designers and I addressed IA and design issues of naturalpetfoods.ca so that users can navigate and shop at a better-arranged site with ease, trust, and pleasantness.

Team Members

Nian Liu
Swakirti Sidhu
Tianlin Wang
Yaxian Wang
Siqing Zheng

My Contributions

Context Research, User Research, UI Design

Tools

Figma, OnPoint Suite, Optimal Sort

Timeline

October ~ December 2019 (8 hours per week)

The primary users are pet owners looking for food and/or accessories for their pets, especially those without by-products and chemical preservatives.With the vision of making life better for pets, Natural Pet Foods strives to cover as many dietary requirements of pets as possible and provide better nutrition products. That's why Natural Pet Foods operates its e-commerce platform to reach out to a broader base of pet owners and lovers with good-quality products.

To start with, we did context research on the background of the site and an analysis of its IA anatomy.

Problem Space 🔍

who are we working for?

what is our goal?

The average word count on each page is 3675 words, and the average time for reading each page is 31.5 minutes - this is problematic because statistically, users usually spend less than one minute on one particular web page. A long average reading time and too many words on each page could result in users’ giving up on continuing and closing the website. With an 18.7 reading score, on a scale of 0 to 100, it is not easy for users to understand the content on the website.

In order to understand the user’s interactions with the current website information architecture, we recruited three users to gain insights from them. First, we conducted Interviews and included questions about their general background as pet owners, their online shopping habits, and critiques about the website’s IA. The second method is a usability test, which is delegated designed to track their interactions with the current IA directly. During the process, two notetakers, one video recorder, and one interviewer participated for validity.

For more detailed research data, please have a look at our research report.

Based on the identified issues, we conducted a card sorting activity to understand how our potential users understand and categorize the website's information so that we could reorganize the IA, especially the unclear structure of navigation systems and misleading categorization of menus, according to the users' perception and convenience.

If you'd like to find more detailed information about data collection and analysis, please have a look at our second research report.

Ideation 💡

what do we need?

what is our solution?

Based on the redesigned information architecture (IA) schematic of the Natural Pet Foods’ website, we created a high-fidelity prototype with a sequential storyboard to illustrate what the proposed site will look like. In our prototype, we developed three of the most important pages (Homepage, Product Browsing Page, and Product Detail Page), which can be accessed here.

Solution Space ✨

how does our solution work?

how can we improve more?

User Scenario & Sequential Storyboard

As the primary users of naturalpetfoods.ca are pet owners, the following three user scenarios mainly focus on shopping for products, learning product-related information, and finding the store location, with the illustration of how these three potential users would navigate on the new IA to accomplish their tasks.

Scenario #1 shows what a cat owner would do when he/she would like to find a portion of dry food for his/her cat.
Scenario #2 represents a dog owner who feels like driving to the Natural Pet Foods store, and the process of finding the location of the store.
Scenario #3 illustrates the steps of a cat owner who searches if the store offers great deals on pet products.

You can find more information about the IA justifications as well as IA schematic diagrams in our final report.

While working on the project, my team and I encountered an unexpected challenge due to the withdrawal of our original client. We were informed of their opting out after finishing context and content analysis of their website and only had one week before the submission, which was very disappointing as well as concerning.

However, we quickly started to seek alternative options, and fortunately found another website to work on. Another drawback was that because of this time constraint, we could not include the management of the organization of the website we worked on, and therefore were unable to have their point of view in our research. If we could include the management point of view, it would have been more beneficial for the project.

As my team experienced a last minute withdrawal of the original client from the project, I realized that it is good to have a back-up plan. Another challenge that I faced was to meet a 10-page limit for assignments; as everyone’s writing style was different, my team would usually cross the limit of pages so I, as the lead editor, had to remove parts and compress a lot of data, which required a lot of time reading and editing the reports before submission.

Overall, I believe that this group project was an important learning experience of supporting and cooperating with my teammates. My group members and I had a clear agreed-upon idea of how our goal would be accomplished. All of us felt comfortable in sharing ideas and then received constructive feedback. It was such a great opportunity and pleasure to work together on this project with all of the members.

Takeaways 🧩

what did I learn and realize?

what can I improve next time?