Filtering and sorting things Tudu in Toronto
Tudu is a Canadian startup created to help you find and share fun and unique things "tudu" (do to) in Toronto. Since September 2020 I've been leading the redesign of the web platform’s interface, by improving the look and usability existing pages and components, and creating new ones. The purpose of this this article/case study is to share with you part of my work thinking and designing a part of the website’s navigation, filtering and sorting components and interface.
(Written in November 2020 and updated in January 2021)
Whatstudu.com is a child of the cool and popular Instagram page @ToDoToronto. The startup's goal is to be your go-to one-stop shop for things to do in Toronto. However, it isn’t just another directory of restaurants, bars, parks, museums, events and attractions in the city. Tudu welcomes the public to create and share itineraries and recommendations of things to do in the GTA. Users (we call them "influencers") with the most creative and interesting recommendations — we have very democratic voting system in — get to enjoy perks offered in partnership with our business partners.
On top of that, we go a step further to organize, pre-filter and pre-sort the content into different, regularly updated categories that are inspired by experiences most of our users look for i.e. date night ideas, foodie adventures, heated patios, hike and bike, Christmas markets, etc.
The Problem Space
When I joined the team, albeit a huge following on social media, the Tudu website was suffering from a low engagement with the content and an even lower return user rate. Something wasn’t working, and it needed to be fixed.
As you can see on the screenshot of the “Explore” page above, besides the division of content into the preset categories, the website didn’t have a filtering and sorting system. Furthermore, most of the content was itineraries (then called "experiences"), so there was no way to find and see individual businesses (a restaurant, for example) outside the itineraries in which they were featured. This issue came up in 70% of the feedback received from 12 user tests.
Site visitors expressed that although they appreciated the originality of itineraries, when they came online in search for something to do, it was often with an idea already in mind: a restaurant, a museum, a park… So, they needed to be able to find those things right away.
When asked about the tools they use to find them, answers included word of mouth, Google, social media and/or articles on Blog.To and the likes.
- Limited resources — think time too, not just money.
I wasn’t able to test any of my designs on actual users before production and shipping. I did test them on the team though. Otherwise, I had to rely on reading about best practices and my intuition, to design and iterate (many, many times).
- Design team of one: as much as everyone is very involved in and responsive to the design process and giving a lot of feedback, I’m actually the only designer on the team (update: we recruited a UX/UI designer in January 2021)
The grunt works
I had never really worked on a filtering and sorting system before, besides Citadin — but that was just a school project. I have seen how other websites do it, though. Foursquare, AirBnB, The Home Depot, Nova Scotia.com and Bandcamp are just a few I drew inspiration from.
Step 1: breaking it down
I took 4 itineraries on the website and broke them down into keywords that could work as tags for filtering and sorting.
I then sorted the tags into categories:
- The thing to do (i.e. eating, drinking or an activity).
- The cuisine (i.e. French, Italian, Chinese, etc.), if the thing to do is eating.
- The meal (i.e. breakfast, lunch, brunch, a snack or dinner), if the thing to do is eating.
- The location (i.e. neighbourhood).
- The setting (i.e. indoor or outdoor).
- The amenities (i.e. heated).
- The cost.
- The customer rating.
- The duration of an itinerary.
- The relevant TuDu category/ies (i.e. ideal for date night, bar crawl, hike & bike, etc.)
Step 2: Setting objectives
After doing some research on filtering and sorting best practices, I knew we need an interface that:
- Has an intuitive hierarchy, to separate top-level decisions that users usually make, from the actual filtering and sorting. Users told us they often came looking either for a place to eat, a place to drink or something to do. From that I deduced that “eat”, “drink” and “activities” could be the main sections we should divide content into, before filtering and sorting.
- Allows multiple selections, because decisions are rarely taken based on a single piece of information. For example, a user may be looking for “a downtown restaurant with a heated patio that allows pets and serves brunch”. Did you also count 5 selections?
- Informs the user when filters have been applied, and which filters are applied (principles 1 & 6 of the heuristics for User Interface Design).
- Allows quick and easy editing of filters without resetting everything… because, in life, sometimes we make mistakes and other times we’re too specific. So, we need tools that allow us to correct our course without sending us back to the beginning.
- Allows the user to make sense of and arrange results of the same type, in a way that’s meaningful to them. For example, sorting “downtown restaurants with heated patios that allow pets and serve brunch” by name or customer rating. Therefore, the sorting tool needs to be separate from the filtering tool.
- Is minimalist, because nobody likes a clunky website.
Design and iterations
My designs were informed by research, user interviews and feedback from the team at Tudu.
Version 1 interactive prototype
Iterations were done to improve:
- The hierarchy of information: the design of the filtering interface started before we interviewed users and improved the information architecture. Therefore getting feedback from users allowed me to re-organize how we present our content.
- The UI: in Version 1 (prototype above), the navigation’s interface was pretty colourful. This was the result of an attempt to visually separate the navigation from the rest of the content (white background), while using “Tudu colours”. Eventually, we remembered that “less is more”, and I went with a more neutral colour scheme.Level 1: the main menu
Version 2 high-fidelity wireframes
Users will be able to access the "Explore" categories of the website through the top navigation bar. Each section will also have a dropdown menu in the breadcrumbs to let users pick/change sections without going through the top nav. I added this button to reduce the labour necessary to move from one section to another.
The "More filters" tab (second) toggles down when the user clicks/taps on the "More filters" button; and toggles back up when they user clicks/taps on the "More filters" button or scrolls down to view results.
The third tab — "Applied filters" — only appears/toggles down when a filter is applied, and serves the purpose of showing active filters and allowing the user to delete them easily and quickly, as desired.
Main characteristics of the modal:
- The user can search the filter they want to add in the search bar, or select it directly from the list.
- A selected filter moves to the top of the list, so the user sees it first. When unselected, it goes back to its place in the list, presented in alphabetical order.
- The user can select more than one filter at once.
More iterations are likely in the future, as the platform grows. We should also get some feedback when it goes live and users tell us how it's working for them. But before that happens, I'd like to hear what you think about it too. Maybe you'll be responsible for version 2 or 3? I promise, I'll name it after you.
Oh and by the way, I designed in Figma and prototyped V1in Protopie.