Role:
Heuristic Analysis, UX Design, User Research, Prototyping, Usability Testing
Tools:
Figma, Principle, Photoshop, Lightroom, Pen & Paper
About Grailed
Overview: Grailed's current homepage layout.
Started in 2014, Grailed is a curated peer-to-peer marketplace for secondhand menswear and streetwear. Designed for fashion enthusiasts, Grailed has fostered a large community of users and has grown to become one of the main online platforms for reselling. Their business goal is to make great clothing affordable and available to everyone by letting users to list items for free and charge a commission for each item sold on the platform.
Disclaimer: This is a speculative project. The views of this case study is my own and is not reflective of Grailed. As a freelance UX Designer, I took on this challenge because I’m passionate about menswear and want to enhance my UX design skills.
The Challenge
Design an improved shopping experience for users to browse, search, and purchase items on Grailed’s desktop and mobile platform. My desired outcome is to create a seamless browsing experience through uncovering current pain points in the browsing process to minimize friction in the search interface. This design process includes heuristic analysis, research, iteration, and user testing guided by Google Venture’s six phase design sprint framework over 7 days.
Project Goals
“How might we improve the search interface to ensure users find items and make purchases successfully?”
-
Identify existing customer pain points to generate ideas for iterative design
-
Redesign an intuitive search interface base on users' needs
-
Align design decisions with Grailed’s business objectives
-
Create design solutions from qualitative research
Discovery Process - Research
1. Heuristic Analysis
Using Jakob Nielsen’s 10 principles for interaction design as a guide, I analyzed the current Grailed website to identify a few usability issues before setting up initial hypotheses for areas of improvement:
Consistency And Standards
There are several categories and market places in the homepage that can lead to the same listings on the site. The excessive amount of labelling and categories can create a level of information overload and confusion that keep users from performing critical tasks in the browsing process.
For example: Users might have difficulty distinguishing the difference between the styles "Luxury", "Avant Garde", and "Minimalist". Categorizing those listings under "Designer" could lessen the cognitive overload for users when choosing a style and speed up the browsing process.
Recognition Rather Than Recall
Users have to remember to click "Price Comparison" inside a listing each time they want to check prices from previous sold listings. They also have to recall all the current search filters again to properly see relevant listings in the sold section.
Cognitive Overload: Grailed's current display of categories on the homepage.
Price Comparison button located on the very bottom of each listing.
2. User Interviews
Photo Credit: The Hundreds
To support my hypothesis about potential problems and gather more insights about how users browse for items, I conducted qualitative interviews with 8 avid Grailed users who consistently buy and sell using the platform. Aside from transaction issues with PayPal and tracking issues with shipping couriers, our interviews show most of users' pain points usually come from the current browsing experience:
Pain Points
-
Content overload; homepage is overly cluttered with links that lead the same pages.
-
A new tab opens each time a listing is selected, too many opened tabs can clutter and slow down the browser.
-
Listings get lost or misplaced in search results due to too many market places/categories, users often search multiple times.
-
Dry Clean Only is not prominent on the website. Most users bypass their editorial content and go for the listings.
-
Price checking with past transactions and current listings is overall confusing to users.
3. App Store Review Analysis
Identifying Grailed's current interface problems from customer reviews on the app store to validate project goals and see where improvements are needed.
4. Personas
Three personas were created to represent Grailed users. Price checking is a shared need I found in all three archetypes; a common practice to cross reference the value of items when users are considering about buying or selling.
Design Process
Sketching - Split Screen Layout
Initial sketches of the redesigned layout to test out the user flow of the split screen layout. The first sketch with the editorial page and the 2nd with product details page.
"Instead of opening a new tab each time to view a listing, the split screen layout can showcase both the listing page and the details page simultaneously for efficient browsing."
In the beginning of the ideation process, I use pen and paper to sketch out initial ideas to explore different possibilities of the homepage layout. Looking at the visual hierarchy of the current design, I decide to remove the large masthead in the homepage to free up space and create a split screen design to show search results for both the marketplace and the editorial section "Dry Clean Only". Users are able to view related articles with the searched items to have a better understanding and context of products they are interested in.
Moreover, the split screen layout also resolves the cluttered browser problem when too many tabs are opened from different listings. Users can now scroll through product listings and view each listing details on the same page instead of going from tab to tab; which not only increases efficiency but also mitigate the potential issues of re-selecting search filters on each new tab.
Current search interface: numerous open tabs cluttering the browser.
Affinity Mapping
I used Affinity Mapping to organize the core pages of the sites as well as some of the general categories for the search interface. This process helps established the early development of Grailed's information architecture and search filters.
Menu - Search Filters
I used card sorting and the MoSCoW method to prioritize the different filters (brands, sizes, style, price) for users to efficiently narrow down their search process. Solidifying this process is significantly helpful to the overall design because a well-thought out search interface can help maintain a minimal and less-cluttered homepage.
I also implemented search on run-time with the search filters to provide a more straight forward experience where users can see the results as they make selections.
Editorial: Dry Clean Only
Example: Searching "Nike Airmax" via the top search bar to see newest related articles on the right screen as well as current marketplace listings on the left screen.
"I believe placing "Dry Clean Only" on the homepage next to product listings can enhance the connection between product and storytelling."
Grailed has an established readership on its editorial platform called “Dry Clean Only” to provide perspective on current designers, product releases, and streetwear culture. Unlike other streetwear blogs like Hypebeast and Highsnobiety, some of Grailed's articles cover brand history and rare collector items with relating listings inside the articles. This feature helps Grailed create a very unique approach to not only educate users but to also effectively drive sales to their higher-priced items.
As users gain deeper context and understanding of the product and culture, the platform overall becomes a more meaningful experience, which aligns with Grailed's company ethos "For enthusiasts, by enthusiasts." My desired outcome is to see an increased user retention value by creating a space for users to discover and learn through articles/updates.
Sold Toggle Button
Price checking is one of the core needs from users, I replace the "Price Comparison" tab at the bottom of each listing with a sold toggle button at the header for users to access at any moment during their browsing experience.
Users are now able view and reference sold listings in realtime to compare pricing with their selected search filters. This helps resolve the frustrations regarding users having to select filters multiple times when they are on the separate pages; which was shown in the app reviews and in user interviews.
Double-Tap to Save
The mobile app is a main touchpoint for users who are browsing on the go. I aligned their mental models with current social media apps to create a double tap function for users to save and favorite a listing (similar to liking a photo on Instagram). This way, users can easily favorite an item to add to their list and make further price comparisons or research when they are home.
UI Design for Desktop & Mobile
Grailed has established an effective minimalistic UI over the years, for this project I decide to keep its original typography and styling for the project. Since users are having usability related issues with the platform, I want to shift my focus on solving navigation problems by simplifying the overall user flow covering the different touch points from browsing to checkout.
Conclusion
In this redesign project, I utilized the data from my heuristic evaluation and user research to create thoughtful improvements to Grailed's search interface. At the end of the sprint, I had a chance to perform usability tests with users that participated in the interviews. The feedback shows a significant increase in usability and efficiency of the search interface.
If given the opportunity, I would measure success by comparing the metrics of the current design with my redesign project; observing the overall completion rate of the search interface to determine whether users are finding it easier to discover items. If listings get discovered more easily, the sell-through rate for Grailed could increase due to higher traffic on each listing.