Swakirti Sidhu
Information Architecture Re-Design for
Natural Pet Foods Website
Re-designed information architecture of website, an E-Commerce Platform of an Ottawa-based Pet Store
Overview
Project Type:
Information Architecture, Website Re-Design, UX Research and Design
Tools: OptimalSort, Figma
My Role:
I did context and content analysis of the website. Completed user research by conducting interviews, usability testing and card sorting, prototyped design and finally presented re-designed website.
Skills:
User research, user interviews, card sorting, wire framing, storytelling, storyboarding, prototyping and usability testing.
Duration: October 2019 - December 2019
Team size : 6 members
The Problem
Natural Pet foods has confusing and unorganized website. They have too many categories on first level of the website as a result making it difficult for the user navigate through the website without getting frustrated or lost.
The Solution
Re-Designed information architecture of the website in order to make navigation easy for the users. Re-designing included navigation, organization, labelling and search system of the website
Design Process
We followed design process by conducting research, card sorting activity, analysis, prototyping and information architecture re-design & testing.
Research
-
Content Analysis
-
Context Analysis
-
Interview
-
Usability testing
Analysis
-
Card sorting
-
IA Schematic Diagram
Prototyping
-
Sketch Prototype
-
Storyboarding
-
Mid-Fi design
Research
About the Website
Goal:
To reach out to the audience with good quality product specially cat and dog owners
Mission:
Offer 100% natural food and treat for pets
Vision:
Make life better for the customer's pet with good quality product and offer home to rescue cat at the store.
Audience:
Pet owners who plan to buy pet foods and accessories with motivation of convenience and natural
Original information architecture of the website
User Research
We did initial research by analyzing content and context of the website. We evaluated current website's organization, navigation, labelling and search system. To understand the user we further conducted user research through semi structured interviews and usability testing.
Semi Structured Interview
4 pet owners of dog and cats
Usability Testing
4 pet owners of dog and cats
Users selected were mostly dogs and cats owner. 10 tasks were assigned to the users while usability testing and deep interviews were conducted to understand users better.
Sample usability testing tasks and user reaction
The text is hard to read
Find your pet favourite food
Due to no breadcrumbs I lost my path
Continue shopping and proceed to checkout
It is so hard to find it
Find clearance or sale
Research Insights
We uncovered 3 IA problems from our research.
Organization and labelling system is very unorganized.
Heuristic Violated -
Flexibility and efficiency of use
Top-down IA and no bottom-up IA in the current design
Heuristic Violated -
Recognition rather than recall
Readability issue with the website due to improper font and poor design
Heuristic Violated -
Match between system and the real world
Original information architecture of the website
Analysis
Card Sorting
In order to resolve the information architecture issues and to redesign the architecture of the website, we further conducted an open-card sorting study by asking 6 participants to sort 34 cards into categories that made the most sense to them. It helped us understand how users would prefer the layout of the website.
All of the 34 cards are from primary levels of horizontal and vertical global navigation menu. We decided not to include the secondary navigation because there were over 100 cards, and also because the users found the current primary global navigation confusing since it lacks layers.
4 out of 6 users for card sort study were currently pet owners and the remaining 2 users never had pets in the past but plan to have pets in the future
Card Sorting Insights
Based on the similarity matrix suggested on the Optimal Sort, we found that participants generally grouped cards into these nine main categories. However, not all the labels worked well.
Similarity Matrix showing user's top nine picked categories
By considering the affinity of over 80% as consistent groupings, we found participants grouped similar cards into the same labels like “Blog,” “About Us,” “Other Animals,” and “Cat, Dog, Food, and Toy.”
On the other hand, the card sorting data also shows they took very different approaches to sort the cards. For example, participants held low agreements (below 51%) on grouping the cards “Lawn Care,” “Shop by Tag,” and “Catalog.” So we deleted and rearranged the low agreements cards in order to make the website user-friendly and less confusing.
Participants suggested “Training & Behavior” and “Grooming & Bathing” should be grouped as “Pet Services,” which is misleading because the original website does not provide services for pets but is only selling products. As a result, we renamed them as “Cat and Dog supplies,” to avoid misunderstanding.
Information Architecture Schematic Diagrams
Old Information Architecture
In old information architecture there is horizontal as well as a vertical global navigation with 34 categories in total, and each of the categories contain numerous sub-categories as well.
Old Information Architecture
New Information Architecture
Based on our user research, card sorting result and discussion & analysis within our group, we came up with a new information architecture schematic. We merged the horizontal and vertical navigation menu into only the horizontal one, with the purpose of helping users avoid being overwhelmed by multiple and dazzling navigation options.
We regrouped the categories into only 8 by creating a new primary level of navigation on top of the original one based on what we interpreted from the card sorting results.
New Information Architecture
We also added breadcrumbs as bottom-up IA approach in a few pages for users to get control of where they are and to help them navigate to previous pages (now shown in this diagram, but can be seen in the prototypes that follow).
Prototype
Sketches
 |  |  |
|---|---|---|
 |
We sketched four of the most important pages and annotated them to provide the readers with a better idea of what the proposed website will look like.
Mid-fi Prototype
We resolved the following issues of our users as shown in mid-fi design
1. Organized labelling and organization system of the website
2. Added breadcrumbs trail to the website architecture
3. Used better font style in order to improve readability issue with the original website.
Re-designed website's landing page
Video showing website navigation for buying products and the breadcrumbs trail while navigating
Evaluation
We further evaluated our design by conducting usability testing with 5 users which included 3 pet owners and 2 potential pet owners in future. Once usability testing was finished we conducted a semi-structured interview with our users.
All our users expressed how they loved the organization of the website. They also loved the breadcrumbs trail as it helps them stay aware where they are in the website .
Key Learnings
1. Stakeholders should always be in the loop while designing - Our design and solution is for all the stakeholders. To yield the best outcome, the potential user as well as the business owner should be in the loop while designing
2. Being proactive & collaborative is essential - It is very essential while working that we meet the deadlines so that we can iterate and make changes according to user requirements on time.
Design Team
From left to right - Tianlin Wang, Siqing Zheng, Swakirti Sidhu (me), Yaxian Wang, Nain Liu, Seulmin Ahn