RESEARCH
In researching the user journey on the site, my primary focus was establishing a baseline for the current user experience using both quantitative and qualitative data as a guide. I began with a heuristic evaluation of the site and a competitive analysis to determine key features of both direct and indirect competitors that the site lacked.
With assumptions formulated from my heuristic analysis, I conducted my first round of usability testing to benchmark the current user experience, analyzing time on task, error rate, task completion rate, and a System Usability Scale to measure qualitative feedback. I also conducted open and closed card sorts with 12 participants to understand how users categorized the site's offerings.
IDEATE
After gathering data from my research, I began synthesizing the data and identifying key trends and user behaviors. The data identified a clear problem — users of the site needed more clarity and better organizational features to navigate the site, as they did not understand the affiliate marketing nature of the site from the outset and were quickly frustrated trying to navigate product listings and detail pages.
In visualizing the data, I developed user personas and a user journey map to demonstrate the typical user experience. In short, users showed that they can have a positive experience when they successfully navigate to a product detail page, but the current information architecture and lack of discovery features were a significant barrier.
DESIGN
With key user insights in hand, I began sketching revised concepts to streamline the user journey and reinforce intuitive discoverability of a wide selection of products. Sketching played a key role to narrow in on a design that both incorporated a revamped information architecture and created consistent and predicable click paths for users.
Based on my final sketches, I began wireframing key screens in the user journey. Starting with low-fidelity wireframes, I established the structure and visual hierarchy of new navigation features such as the navigation bar and filter panels. I then developed a mid-fidelity clickable prototype for a second round of usability testing.
ITERATE
I conducted a second round of usability testing, this time with the mid-fidelity clickable prototype, to compare the resulting data with the data from my usability testing on the existing site. The data yielded promising results, with marked improvements in both measured quantitative data and qualitative feedback on the System Usability Scale.
Based on the data collected in the second round of usability testing, I developed high-fidelity mockups and a high-fidelity clickable prototype incorporating additional feedback from users on the structure of the filter panel, product detail pages, and product wish list.
KEY INSIGHTS AND DESIGN SOLUTIONS
LESS CATEGORIES FOR LESS CONFUSION
DISCOVERY
Users were quickly confused by the site's navigation during testing, as the site's information architecture points users in too many directions at once and generates secondary categories that are far too numerous and detailed. This left users paralyzed by the amount of choices to make in navigating the site.
DESIGN SOLUTION
Open and closed card sorts were conducted to understand how users grouped the expansive offering of different products and experiences on the site, and the information architecture of the site was overhauled to help guide users in their exploration. Primary categories were restructured, and secondary categories were limited to 12 items.
FILTERING OUT THE NOISE
DISCOVERY
Users expressed significant concern over a lack of control in their exploration of the site's products, as filter options were lacking in functionality and only appeared on certain screens. Furthermore, the site's pages load new products on scroll, and users found themselves scrolling infinitely without the ability to control what was being populated.
DESIGN SOLUTION
A robust left-side filter panel was added to product listing pages to allow users to filter products and search results by everything from product type to occasion. Furthermore, infinite loading of products was replaced with paginated results, allowing users to remain oriented and find the footer of the page.
BUILDING RELIABLE PATHWAYS
DISCOVERY
Users struggled to find product detail pages due to unexpected and inconsistent usage of links on product cards. While some clickable parts of a product card brought users to the product detail page, other parts instead took users to an external site to purchase the product. This disoriented and confused users during testing.
DESIGN SOLUTION
Product cards were redesigned to provide consistent and predicable pathways to purchase. Product cards always bring the user to the product detail page, where they can then proceed to purchase on an external site. The external purchase link is clearly marked with iconography and the site URL to alert users that they are leaving.
STATING CLEAR INTENTIONS
DISCOVERY
Users did not immediately understand the affiliate marketing nature of the site, and believed that they would be purchasing products on the site. This belief continued until users began getting redirected without warning to external sites. As a result, users felt a lack of trust in the site, as they were not clear on the site's purpose.
DESIGN SOLUTION
Several key parts of the site's homepage were redesigned to clearly state the intention and purpose of the site. The homepage clearly calls out the affiliate marketing nature of the site and describes the process for brand owners to be listed on the site, allowing users to quickly understand how the site works and how products are listed.
BUILDING NAVIGATION FOR THE SITE THAT HAS EVERYTHING
RECONSTRUCTING THE INFORMATION ARCHITECTURE
The first step to redesign the site was to rebuild the information architecture from the ground up through open and closed cart sorts. First, an open card sort was conducted with 12 participants in which they were given 50 very different items from the site and asked to organize them into categories and name the categories. After getting some clarity from the open card sort, a closed cart sort was conducted with an additional 8 participants to further hone in on the redesigned IA, in which participants were asked to place specific items into predefined categories.
After reviewing the card sort data, I was able to create a new sitemap that presents information to users in a way that can be better understood. Limiting the amount of secondary navigation categories was crucial to prevent users from being overwhelmed by all of the different things the site offers. In this case, due to the wide expanse of products and experiences curated on the site, secondary navigation elements were limited to no more than 12 per category.
During my first round of testing, I also noticed that several users relied solely on the navigation features and did not use the search bar. After following up about this behavior, I learned that these users would have used the search bar, but didn't notice it in the top left corner of the screen. In my redesign, the search bar was repositioned to the top middle of the header, where users expected to find it.
REDESIGNING THE PRODUCT DISCOVERY EXPERIENCE
The homepage was redesigned to prioritize discoverability and make the affiliate selling purpose of the site clear to users from the outset. This helped set proper expectations for users, so they understood that they were there to view a curated selection of items that they could later purchase through the affiliate link.
Product detail pages were redesigned to be always accessible when interacting with a product card and always serving as the exit point for users before being directed, along with use of icons and the name of the external site so users know when and where they are being redirected.
Wishlist pages were redesigned to allow users easier access to items they have saved to a wishlist, and more intuitive options to organize wishlists and create new lists.
Lastly, gift guides were organized into their own category, with options to filter gift guides by several options and an independent search bar, and consistency was reinforced with links to ensure that the user reaches a product detail page before exiting the site to make a purchase.
ITERATING ON USER FEEDBACK
In my second round of usability testing, the prototype demonstrated significant improvement over the existing site. Time on task was reduced by an average of 55%, error rated was reduced by an average of 78%, and task completion rate improved to 100% for all tasks.
Despite the strong performance in task performance, additional revisions were made to the redesign after feedback from some test participants regarding color contrast with the site's original light orange color palette and some initial confusion about how to save items to their wishlist. I changed the CTA button color from light orange to blue to resolve color contrast issues, and relocated the wishlist button below the primary photo with additional text to call it out.
