| Information Architecture |

Pet Store E-Commerce Platform

Redesigning the e-commerce platform of an Ottawa-based pet store to better serve its functionality with an improved information architecture (IA) by adding layers on navigations and simplifying contents to be simple and elegant.

Project Type: E-commerce website redesign, Information architecture re-organize, UX research, usability assessment

My Role as a Researcher & Designer: I conducted interviews, usability testing and card sorting; analyzed qualitative and quantitative data; created prototypes and wrote and organized the final design proposal.

Client: Natural Pet Foods, Ottawa, ON, Canada

Tools: Figma, OptimalSort, Photoshop, Illustrator

Skills Developed: User interviews, Usability testing, Information architecture analysis, Sketching, Storyboarding, Prototyping, Heuristic evaluation

Challenge

The current functionality of the website is valuable, but the navigation labels, illegible fonts, and low-pixel images are frustrating. To gain profit through selling pets-related products and boosting transactions, it is vitally important for the e-commerce platform to ensure an impeccable overall experience.

Design Process

Research

Contextual Background Research

Audience: Pet owners who are looking for food and/or accessories for their pets, especially those without by-products and chemical preservatives, and also pet lovers and potential owners.

Our background research started with the following questions:

What are the goals of this project?
Who are the intended audiences?
What types of tasks should users be able to perform?
How is the current content created and managed?

The context analysis was based on a review of the website, stakeholder meeting notes, and competitor analysis. As a result, we conclude the traits of design should focus on highlighting natural, dietary standards, and good quality as competitive advantages.

User Research

Semi-structured Interviews

3 interviewees, open questions on their background, comments on current structures, general usability, and experiences.

Usability Tests

3 participants, 10 tasks;

4 testers: 1 host, 1 observer, 2 note-takers.

3 major IA PROBLEMS are identified

“Too many labels (34!) in the primary level of navigation!”
“Too Deep to Find the product!”
“Why there are two search bar?“
“what does this label mean?“

1. Organization and labeling system are unorganized:

Having both vertical and horizontal navigation bars takes the audience longer to locate information; some labels have ambiguous titles.

➔ Heuristic violated: Too many labels; Flexibility and efficiency of use.

2. Top-down IA only and no bottom-up IA in the current design:

Primary menus contain every link on the whole website. No assistive guidance (breadcrumbs) to let users know where they are and what their previous product pages are

➔ Heuristic violated: Hard to back; Requires recognition but not recall.

3. Readability issue with the site due to improper font and poor design:

Some of the main pages have more than 10 secondary navigation links, while the font is even illegible.

➔ Heuristic violated: Lacking match between system and the real world.

The Original website - with a messy Information Architecture

Card Sorting Activity

With the card sorting results, it will help to know our potential audience's expectation of grouping and labeling, so we will be able to organize the website's information in a way that makes the most sense to our audience.

By doing so, we will be able to create a new primary level of navigation, by grouping the current vertical and horizontal navigations according to the potential users' perception and re-wording the label for their convenience.

34 Cards

We created a card sort study with 34 labels from primary levels of both horizontal and vertical global navigation menus. Most were current labels used on the website and a few were modified/generated based on feedback from users and stakeholders.

6 Participants

They have different pets experiences, and are of different genders, from different regions. No one has IA knowledge, but all have online shopping experiences. They are invited to join the card sorting activity from OptimalSort.

The activity can be accessed here, and the result is can be found here.

Card findings

9 major categories emerged

- Participants took very different approaches to sorting the cards

label results .png — Labels should be renamed

-Some labels are named misleading, so participants are confused.

Prototyping

Preliminary Sketches

Below are sketches of major pages with the improved search system, organization system, label system, and navigation system. (*Please click the image to view larger)