The Challenge

Using Heuristics Evaluation, User Testing, and Sprig survey data, I found major usability problems with the MVP site’s navigation. The layout presented difficulty in adding and scaling new features. I also uncovered a low perceived user value from the MVP features from interviews and testing. Due to these reasons, many local geos did not want to advertise or adopt the product. I spent my time on this project tackling all these issues, creating a design system for future modularity and efficiency, balancing new requests from local and global business teams, and working towards future features.

The information architecture is unclear, and there is no indication of what page the user is currently on. Users mistake the home page for the My Pets page, making the features on My Pets very hard to discover. The layout is difficult to use on mobile as elements like the pet cards are too large, increasing the amount of scrolling needed.

Background Research + Competitive Analysis

I began my design process by reviewing competitors in online pet care and retail. I focused especially on brands with an Account section, such as Walmart, Chewy, and Blue Buffalo. I analyzed their websites and apps to understand how they address user needs, particularly those related to account management, pet health and profile management, and user-friendly design.

I also utilized insights from the Baymard Institute’s UX research repository. Although most articles pertain to e-commerce, the account and navigation-related research helped me understand specific usability issues to avoid.

Using this background research, I created the first iteration of the information architecture. This IA included a new feature, health tracking, which was determined to be one of the most valuable new features from the consultancy’s previous user research and business input.

Sketching and Lo-fi

Next, I explored divergent ideas for the site navigation by sketching with pen and paper. I then created lo-fi wireframes to visualize three of these ideas in user flows. For initial feedback, I shared these wireframes with my UX colleagues during a design critique. The feedback was very helpful, with the most important point being that my design focused primarily on displaying information, whereas the focus should be on ensuring that the main tasks take priority. Users already know their pet’s breed and age and would instead want to focus on tasks like adding health entries or tracking milestones. I was focusing too much on how to rearrange the information on the page to be more readable and needed to take a step back to more deeply understand the user tasks, especially in light of the new health tracking feature.

Mid-fi Design and Testing

Using the feedback from the critique, I moved forward with a more task-oriented design for mid-fidelity. The main tasks I highlighted were adding a new pet, health entry, allergy, and food. I created a clickable Figma prototype to test with users on Usertesting.com.

I conducted five moderated usability tests with pet parents to identify pain points. Participants were pet parents ranging in age from 28 to 55, and each session lasted about an hour.

The main findings from these usability tests highlighted two issues. First, users expressed confusion over the content of each tab in the navigation on the My Pets page. Participants were unsure of which tab would hold which task. For example, the Health tab was confused with Profile, when tyring to add data like weight or allergies.

Second, the "Add Health Entry" button was difficult for one user to notice at first glance, as the floating action button did not stand out to them. Since this was a minor issue, I kept the positioning of the button but tried to give it a more prominent visual treatment by adding shadow and a light border in the high-fidelity designs.

Card Sort and Tree Testing

To address the confusion of the content in each tab, I used card sorting to understand where users would naturally place content. Through this exercise, I was also able to better name category labels, like changing “Health” to “Vet,” and discovered some items fit into more than one category. “Allergies,” for example, were placed into “Diet” as much as “Profile.” This led me to learn about polyhierarchies which allows flexibility for multiple paths.

Based on this, I edited the information architecture and conducted tree testing using Optimal Workshop. The tree test revealed that the polyhierarchies worked to capture multiple user mental models of where items were located. I then moved forward with high-fidelity design and prototyping.

Hi-fi and Usability Testing

I created a high-fidelity Figma prototype that was more polished for each task’s happy path and included more realistic content. I then conducted five more usability tests with pet parents aged 19-60, at about an hour each. For this test, I had participants use a smartphone emulator on desktop instead of directly using a smartphone, as I had some issues during mid-fidelity testing with no face camera recording.

The results revealed that users thought the site was efficient, clean, and learnable overall. The polyhierarchy allowed every user to complete all tasks successfully. However, a couple of users expressed some frustration with “circular navigation” since they would be redirected to the main parent to edit something if they found it through the second parent. To fix this issue, I made the children editable from both parents in my final designs.

The second issue I found was that the order of tabs and the fold (cutting off horizontally) negatively affected the efficiency of task completion. When adding an allergy, users first went to the “Diet” tab as it is first visible and “Profile” is past the fold. Users then completed the task using the “Go to Profile to Edit” link.

Users also expressed that the Articles tab on My Pets felt redundant, as there was already a full page dedicated to articles. In this case, it was beneficial to remove this article tab to reduce confusion and allow all tabs to fit on the screen at once.

Although I tried to make it more prominent visually, the Add Health Entry button was still not immediately noticeable. The placement as a floating action button wasn’t working so I moved this button to be in line, which users had mentioned was where they expected the button to be located.

Finally, I gathered the prototype’s System Usability Scale (SUS) score using the standardized questionnaire. Since we only had 5 participants, we took this score with a grain of salt. The median SUS score was 92.5 out of 100.

Live Site Benchmark Testing

After gathering the SUS score for the high-fidelity prototype, I needed something to compare this to. I decided to conduct the same usability testing on the live site for benchmarking, but with some tweaks since the live site only included Profile, Milestones, and Diet (no health tracking). In turn, this also contributed to the SUS score as it includes less functionality.

The benchmark testing re-confirmed the usability issues with the live site as well as revealed more in-depth information about the current lack of perceived value. Users also expressed that the live site lacked emotion and interactivity.

The SUS score of the live site was 79 (n=10), meaning the new prototype scored 13 points higher. As mentioned before, however, the live site did not have health tracking functionality which definitely contributed to the lower score and low value perception.

This testing also guided my final designs to be more personable and fun, and I recommended to the team that they invest in illustrations (especially for milestones) in the future to continue to add more character to the application.

Final Designs and Development

Since the health tracking functionality was not yet developed, I scaled this feature back for the final delivery to development, and prepared another version for when the team was ready to implement that feature in the future.

During my time on the team, I used my developers' feedback to re-organize the Figma to be easier for them to use. I re-organized and re-named pages, moved all breakpoints to be next to each other, and used headers and status labels. I utilized Figma's annotations tool to communicate interactions and accessibility notes and worked closely with developers to answer any questions. I also worked with the product manager to help manage a CMS spreadsheet to reduce redundant designs.