How to give people what they want and not lose your soul
Building content-oriented filters on YPlan
From its very beginning YPlan was a curated events’ platform, catering for spontaneous millennials looking to discover hidden gems that London, NYC and others have to offer. Such premise is applauded and raved about by the customers in focus groups and app reviews. However, the data shows that YPlan’s best sellers are hardly your niche long-tail events. In fact, among the top 10 you have best deals for cinema and 50 Cent’s gig at O2 booked weeks advance. This has led our product team to rethink how people access the content to cater to both audiences:
- The Spontaneous. They look for quirky and unorthodox stuff to do tonight, this weekend the latest. They are open to discover new things as long as their reasonably priced.
- The Planners, looking for a specific event or an event category. They are price sensitive and flexible with their dates, e.g. if I want to see a “Book of Mormon” I am happy to book 3 months in advance to get the best deal.
With the previous product decisions focussed exclusively around the first group, we were missing out on the customers looking for events with higher price point such as London’s Westend theatre performances or big music gigs. To attract the second group, we had to provide alternative ways to get to the content they need. We started off thinking about filters and sorting as the main devices to facilitate the navigation. They had to address the most common use cases:
- Discover an event in a specific category
- Go out on a particular date
- Discover event that’s close to me
- Find event in my price range
- Discover events picked by curators
While accommodating all of these, we had maintain the simplicity that has become the trademark of the YPlan app. Inevitably, certain things had to be prioritised and others relegated into the background.
Along with the filters, we were rethink the logic of sorting. Specific and unambiguous properties such as Category or Date work great as filters, others that are more abstract (Best Match, Popularity) or can be better described as a part of a range (Price, Distance) work better as a part of sorting. We ended up with the following two groups:
Since the original event feed already came with a fixed header, the filters had to be integrated as a part of it. However, it was immediately clear that the space constraints will pose challenges when trying to fit in everything. Thus, we decided to make the header dynamic, adapting to the users’ intent based on their journey and interaction with the feed:
- Landed on a collection > Discover an event.
- Scroll down > Interested. See more events.
- Scroll up > Couldn’t find anything relevant. Navigate away.
Landing and Scroll Up are the best opportunities to provide the user with the filtering and sorting options, whereas Scroll Down is when they’re least relevant, and ideally should get out of the way. Based on that, we matched the header states and with the users’ behaviour:
- Summary. Most relevant filtering options. Displayed when the user lands or Scrolls Down.
- Full. All filtering options. Is expanded from the summary state.
- Hidden. Collection title and indication of indicating location in the feed. Displayed on Scroll Down.
The summary allows to see the most relevant filters which are dynamically selected to fit a context of a particular collection. Eg. in “This Weekend” user is most likely to filter by days: Friday, Saturday or Sunday, for a collection like “Date Night” specific categories are more relevant. The top three category filters are defined by the most popular categories.
In addition user’s position in the feed is represented by a dynamic label, changing based on the order of the sorting:
Having figured out the bare bones, we mapped out all the possible edge cases arising from the interaction with the feed and the header:
Finally, to understand the fine details and test it out with our customers we built a series of interactive prototypes. It is a lot easier to communicate it to the team, if you can show them:
Bringing the filters to our Android app we aligned ourselves closely with the Material guidelines. Thus subtle aspects of depth were particularly important: e.g. as the screen is scrolled “Editor’s Picks” raises up and joins the top bar to allow the content to flow beneath. Along with that, we utilized FAB to separate the Sorting from the Filters:
