JAN 2019 · UI/UX Design

Broadcast App redesign

Making content findable again

The challenge

As every designer in this world I love big and shiny new projects. You know the ones where you don’t have design and code legacy constraints, where you have enough time for decent research and so on.
However, the truth is that when you work in a product company it doesn’t happen that often, which is completely normal. Most likely you end up building your designs around already existing and working solutions. That’s why I think it’s important to include this case here.
‍
The challenge seemed to be easy — help our partners to filter big amounts of content in order to navigate trough it faster.

Project overview

Some time ago I was challenged with the task to add filters to the already existing application, which ended up as a light redesign of the app. There was no search and no filters, yet we had partners who were streaming 5-7 matches per day in several different competitions and was quite hard for them to find scheduled or past events.

Process

After another round of meetings with business and interviews with customers we settled on functionality we wanted to put in the app for the first iteration. The functionality included:
- filtering all events by exact date and date range
- filtering all events competitions
- sorting the list of events by date of creation
‍
Working on this task made take a closer look on the exciting app. Since it's been working and no-one from our users or business had complaints about it, no-one ever questioned how optimal was it's design. Yet, there were some usability problems, like having the main CTA in the leat prominent place, for instance.
‍
I stated to sketch possible solutions, trying to fit in new functionality without changing existing UI. It wasn't that simple due to many reasons as you can see from my sketches below.

Solution

The solution was simple in order to fit filters I placed "Events tab" in the bottom navigation. The main CTA also went to the bottom nav, it became prominent and accessible. For filter and sorting interactions I used the bottom sheet, for convenience of using the app with one hand.
For the first iteration the user can filter only by one competition, in order to do so he needs to type competition name in the search bar. In the next iterations we planned to add things live autosuggestion and historic search.
When the filters are applied the filter button will be highlighted to show the user that the list he's being is filtered by some criteria.

Next steps

Design is never done, and working on this simple project reminded me about the importance of questioning the obvious.
Even thought we were satisfied with testing results we still have a lot to learn about user behaviour in this app, in order to make it better for the customers. That's why we started to collect data on which filters are being used the most, which search terms for competition are being used and what is the average time to complete the task. Later on, based on these learnings we can work on further iterations.