Re-designing Ipsy's Information Architecture

TOOLS
Figma
Optimal Workshop

ROLES
Research
Writing
User Testing
TEAM
Erica Hester
(myself)
TIMELINE
Nov  - Dec 2020
(4 weeks)
Overview
Ipsy is a beauty subscription service that allows people to receive samples or full-size makeup and skincare products for three different price points, depending on the number and size of products in a monthly "glam bag."

In this project, I assessed the information architecture of Ipsy’s app, through conducting a content audit and card sort. Then, I created a new information architecture for Ipsy, along with a wireframe, and new site map, to address the problems I found.
My Goals
1. Conduct research on ipsy through a content audit and card sort.

2. Determine issues found through research.

3. Design proposed solutions to problems found.
Research Methods
For this project, I chose to utilize two methods for research, a content audit (systematically going through and taking inventory of all of the content on the site that relates to a specific goal) of a representative sample of pages on the shop feature, and a hybrid card sort (seeking user feedback by allowing users to organize the information in the ways that make the most sense to them) done by 10 different users.
Content Audit
For the content audit of ipsy's shop feature, I chose to look at a representative sample of about 50 pages on this portion of the app. I took a look at the product pages, shopping cart, categories in search, and subsections on the homepage. Once I felt I had covered the different pages under this section, I chose to look at several other versions of each page to make sure I had covered all my bases.

During my review of each page, I recorded the name, the link I arrived there from, a screenshot of anything noteworthy, and notes on elements that caused any concern. Below are some of the issues I found during the content audit.
Confusing toolbar placement
The toolbar on the app changed location from being fixed at the bottom of the screen to being fixed at the top of the screen randomly on different pages. This can be very confusing for the user, especially when they has travelled through the app becoming accustomed to a certain position of the toolbar buttons, and then their expectations are subverted.
No back buttons
On all of the pages I assessed, I found that none of them contained back buttons. This is something I considered could have been intentional, as there could be a benefit from keeping users on certain pages, especially on the shop feature. However, if this is intentional, the use of dark patterns creates unnecessary user frustration that can lower user retention rates long term.
Misleading category labels
Categories had hard to find products that were unusually labeled. For example, when looking for an item like razors, a female user (Ipsy's primary audience) might expect to find this in the Bath & Body category, only to find it is actually found under the Men's category. This is something I ended up addressing later on in the card sort I conducted, where users were able to give me their feedback on the category structure and help me understand how to fix this issue.
Card Sort
For the second form of research on the shop feature of ipsy's app, I conducted a hybrid card sort. During my content audit, I found the categories under the search feature to be misleading and confusing, something I knew I would need to reorganize. This led me to the conclusion that my best research method for this would be to conduct a hybrid card sort. So, I recorded the names of each of the 10 categories, as well as the 82 subcategories/products under them, and put together my card sort using Optimal Workshop.

I created the card sort by creating each category that matched ipsy's current design, and creating a bank of the 82 subcategories/products which I will refer to as cards. I then asked 10 users to sort the cards into whichever category they felt was the best option for that card, or to create a new category for the card.

Out of the 10 participants, 6 completed the card sort online using Optimal Workshop, and I was able to personally moderate 4 that were completed in-person.

Category agreement
There were a lot of varying answers from the card sort, as illustrated in thia graphic. Utilizing a feature on Optimal Workshop that allowed me to see the agreement percentage of each category, I created this graphic to represent that.

As mentioned above, 50% of users created their own categories as the open part of the hybrid cart sort allowed them. Since they were technically the only people using each category, I was unable to track the agreement of their sorting into those categories from Optimal Workshop. But, I was able to determine that 3/5 of the participants that created new categories put very similar products in those categories. I was able to see that they had even named the categories similarly: "Extras," "Home/Beauty accessories," and "Home Goods."

Additionally, 2/5 of these users also created a separate category for sets labeled: "Gift Sets and Merchandise," and "Sets."
Dendrogram
Another feature of Optimal Workshop that I utilized is the dendrogram feature. It creates a dendrogram to represent the data clusters from the card sort using two different methods. The one illustrated here is called the best merge method. It typically shows the most accurate information for card sorts with a smaller set of participants (less than 30), which is why I chose to use this as my main point of reference for creating the new category organization.

Conducting this hybrid card sort was a huge help in determining the way that users feel about the organization of the app's categories, without the bias of seeing how they are currently organized. It gave me a great chance to see how real users of the app felt about how they would structure the information differently.
Proposed Solutions
Up to this point, I had conducted a content audit to review a representative sample of 50 pages in the shop section of the ipsy app, and managed a hybrid card sort to analyze the structure of ipsy's search feature. I found many issues with the navigation, consistency, and structure of the app, so I sought out to redesign the site’s wireframe, site map, and IA of the categories sorted in the card sort.
New Site Map
I started by created a graphic that represented how I found the app was organized based off of the content audit. As you can see below, I started with the shop homepage, and created the map of each page/section from there. I then made changes to the ipsy shop's current sitemap. The main changes I made were in line with the pages I felt should be eliminated, as well as the inclusion of the new categories. This new information architecture also lines up with the structure of the wireframe I created, keeping it simple so that ipsy would be able to edit their structure and potentially make these changes.
New Information Architecture
Next, I needed to look at the categories of the ipsy search feature. First, as you can see below, I created a graphic of each of the current categories, and the products/subcategories that fall under each of them. Then, I used the data clusters represented in the dendrogram of the best merge method and the labels of the categories created by the participants of the card sort, and restructured the categories. I started by grouping together the data clusters from the card sort and determining what category they came from. Then I decided which categories had the least agreement percentage and would need to be renamed.

I discovered that the overlap of the Skincare and Bath & Body categories was too great to ignore, so I made the decision to merge this category into one. I also found that the Tools and Brushes category overlapped heavily with the categories that users were creating, so I chose to essentially rename this category and sort the goods that were being grouped with that category.

I also found that certain items like "Men's Fragrance," was sorted almost unanimously into the Men category, despite coming from Fragrance. "Shaving and Grooming," was also heavily sorted into Bath and Body, though it was originally in the Men category.

Wireframe
I found many issues with the navigation, consistency, and structure of the app. This led me to redesign its basic structure in the form of a wireframe. I used Figma to design a version of each of the screens I reviewed in my content audit, and make minor changes to the layout and structure of each page. Clicking the image below will take you to the Figma file, so you can see the changes I made to each page I redesigned.

Above, you can see the whole wireframe, and how I changed the way the pages connect as well. Through exploring the current site map of the ipsy shop section, I found that there was a cluster of pages that weren't necessary and could be eliminated.

As I stated before, the main changes I made were with the navigation, though I also implemented some changes to search feature to show the new categories and how I think the layout should be. I wanted to keep the changes I made minimal, as I felt it would make more sense if they were changes ipsy could conceivably implement with a small update. The structural issues I found with ipsy were mostly fixed by the elimination of some pages, and some reworking of how the pages connect to one another.

Takeaways
In sum, I set out to redesign the information architecture of the ipsy app's shop feature. I employed two research methods: a content audit and a hybrid card sort, both of which helped me to find and diagnose many issues with the current structure of ipsy. To address these issues, I created a wireframe that solved some of the basic design and navigational problems I encountered during the content audit. I also utilized the data I gathered during the card sort to propose a redesign of the categories within the search element on ipsy.

The changes I proposed were minimal because I wanted to offer a realistic solution to the concerns I found. I wanted to propose changes that ipsy could actually implement in an update to their app. I chose to focus this redesign on the structure of the app, as opposed to the style, to illustrate the difference a good information architecture design can make to an app.

More of my work:

© 2021 Erica Hester