Grailed for iOS Filtering Refix

UX Brief

Grailed is a retail and resale platform for hard to find, avant-garde couture and streetwear for men, though you can occasionally find unisex items. 

And to be candid, I LOVE Grailed! I've been using it for a few years now, even had the idea after living in SF where there were no cool menswear shops for the more less trendy lines that I began to take interest in. 

When the mobile app launched, I was in the process of working on mobile commerce within the context of messaging, and in excitement, I reached out to the dev team to learn more about the technology stack.

From there, I would pass the occasional feedback, but held off on doing a refix and am finally getting around to it. After experiencing some friction along the lines of filters, I spent a few hours putting this concept together.


Disclaimer

This concept is not an attempt to recreate the product as it lives or pixel for pixel detail (though I'm pretty obsessed with the deets). These are concepts I enjoy putting together out of love for the products I use and compulsion. It is also a pleasure sharing these with the teams, who I invite to get in touch if they'd like to share their thoughts or questions concerning the work.  

SUGGESTION FOR VIEWING

Before jumping into the written stuff aka justifications for the design decisions, you may find it's easier to follow the written bid after selecting the filter or sorting option (that would be anchored) near the footer in the prototype to the right.

And if you haven't already tried Grailed, download it and give it a test drive for an idea of how this approach is of benefit to your experience. 

Thanks for having a look!


The Problem: Friction of Filtering

Artboard 2@4x.png

Problem #2: Navigation

Home is where the heart is, so it’s displayed first.  And favorites or Grails come next (though, it may make sense to go with favorites or the like given how the word grailed is localized and used in other languages).

 
grailed-nav-outline.jpg
 

UX Goals

Improved Usability

The current implementation of the filtered view is a bit overwhelming upon initially selecting the action. There are so many options in view making it hard to focus on any particular item in line (Imagine being severely affected by dyslexia?).  The two column layout for this view further complicates my ability to know exactly what’s in front of me and the centering of the category headers force me to read in a zig zag manner down the view. This leads to subtle but eye scanning fatigue after a while.

In my prototype, I suggest leaving the drawers closed upon an initial selection of the filter view; I suspect (or hyphothesize if you wanna be test-driven about it) it will aid in the user’s ability to take desired actions upon display, saving error and missed actions that are initially overlooked.

When the user has selected another list in view, I suggest closing the opened one upon displaying their new selection.  It would aid in reducing the clutter in the user’s view, and their ability to make decisions, improving the overall accessibility and actionability of information in view. 

Improved Information Architecture

No more tapping just to add an item into your Grails. When you see and want it, just select the heart icon one level up in view (two taps less).

Dry Clean Only is now where you’d expect it; by the Basics and Grailed sub-navigation buttons. 

My approach relies a bit more on typography sizes and weights to infer content type(s), navigation and general readability. 

Improve Accessibility

No need for double hand holding of your iPhone 6 or 6 Plus, or over-reaching when it comes to looking for fresh digs. Search and other actions such as filtering and sorting are well within reach.

Indicators are added in list around the notion of active filters. Counters are also used to aid in remembering the number of active filters. 


Improve Navigation

The changes to the navigation are suggested after monitoring my use of the app and given the primary use case(s) based on my own experience. Data would have helped inform these decisions in a real world scenario. 

The reason for moving “sell” from the navigation is based on the assumption that a large number of users buy more than they sell, therefore, it’s likely an empty state for the majority of the platform’s users.  It may be best placed as a primary action within the Profile or even Inbox view (Items I’m “selling”, for instance, could be in a sub-navigation in the Inbox view next to items I’m “buying”), but based on my primary experience, it's not most beneficial as a view displayed behind a navigation action.

Search follows and is placed dead center.  It’s given an icon to insist it’s a focused / primary action.  I explain the reasoning below in the accessibility portion of the brief.

The inbox (formerly “me”) follows, where items I’m buying or selling would be displayed.  My profile is where my settings (would) live. It is also where I can easily update my shipping address, notifications, and payment information. 


Filtering Flow

wires.png
 

Prototyping Filtering ReFixed

To demo the prototype in action, select the filtering action at the footer of the screen (after a bit of scrolling in the iPhone frame).


Closing

I try to do these sorts of exercises without getting too overly concerned about perfection. And no design is ever truly complete without people to make use of it. 

Thanks for having a look. If you find value in these sorts of exercises, drop me a line or send me a Tweet. 

And if you're part of the Grailed team, thank you for putting out such a great product. It's great seeing products you use grow and reach their intended audience. And if you made it this far, I really appreciate you taking the time to have a look. 

Osandi Sekoú Robinson