Filtering and sorting things Tudu in Toronto

Image 1: Overview of the main navigation and filtering components, in desktop and mobile view.

Summary

(Written in November 2020 and updated in January 2021)

Context

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

Image 2: screenshot of the “Explore” page and navigation, before my redesigns.

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.

Practical Constraints

  • 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

Step 1: breaking it down

Image 3: cards (new design I'm still working on — a story for another day) of the 4 itineraries I broke down.

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

  • 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

Version 1 interactive prototype

Video: a demo of the full navigation + filtering interface at work.

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

Image 4: the top navigation with the "Explore" tab open, in mobile and desktop view.

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.

Image 5: the “Explore” filtering interface, in mobile and desktop view.

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.

Image 6: selecting a filter (African cuisine), in mobile and desktop view.

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.

Last words

Oh and by the way, I designed in Figma and prototyped V1in Protopie.

Check out my portfolio to see more of my work. You can also follow me on Twitter @nsabiyumva_ and/or add me on LinkedIn

Burundian living in Toronto | Dad, Husband, Entrepreneur, Storyteller & Product Designer | Tweep (@nsabiyumva_)