Utelly
With the rise in popularity of on demand video platforms, Utelly allows you to have all your online video services in one app.
Context.
I was hired as the Lead Designer to join the team of engineers with a goal to improve the existing app and implement good design processes.
The app was lacking focus on the user experience, brand consistency and a sleek user interface. It tried to do too much and users complained about its complexity. We kept the overall structure intact and tackled each section individually, the whole team worked on 5 day sprints, building invision prototypes for validation interviews with a selected group of people before the final implementation.
Taking on the existing logo, I developed the creative direction. It was important to set a refreshed and consistent colour palette to be used throughout the app. The existing bespoke logotype allowed for exploring different creative directions and as a result I defined the visual brand guidelines.
An iconography library - The next natural step was to create a library of icons, allowing us to focus on getting the user interface consistent with the help of a solid icon catalogue.
On-boarding and connecting services.
When starting the app users were prompted to indicate which TV services they were subscribed to, coupled with add-on packs and a choice of online streaming services. This allowed us to display shows the user had straight access to.
The home screen was introduced to replace the old collection view with filters on the nav bar. People had to work hard to get the list to display the right content. We opted for displaying pre-curated shows based on their customisation during on-boarding as well as automated collections based on algorithms, with the shows fitted into scrollable collections that allowed the user to quickly browse through and pick their favourites.
For filtering the TV listings and Search, we needed a quick way to trim down the list of shows and the ability to jump into a specific time, category or type of event (live or on-demand). We created a modular 3-step dropdown nav bar. For live events, the timer would be visible and hidden for on-demand. It also allowed to scroll horizontally in time or accessing different days with the calendar shortcut.
The collection view.
To keep the user engaged as they scroll down a collection view, we came up with an adaptive layout for both landscape and portrait modes. This sequence also allowed for modularity when hiding shows.
Contained within the mosaic on the collection view, we used a colour coded time bar. Yellow for a show that started, aqua blue gradient for a future show and orange for a show that’s finishing. The blue was reserved for on demand shows.
In an exercise to improve the content details page usability and consistency between live and on demand events, we created a modular view which allowed for displaying a show with seasons, with a single episode or multiple episodes and different description length. The time bar remained in the same spot for all shows, colour coded, keeping it consistent with the mosaic on the collection view. We also added a link to live or on demand instance of the show depending on availability.
One of the points stressed by the users during interviews was that they would like to have all their loved shows in one place and monitor them as new episodes became available. We gave them the ability to build their own watchlist so they never missed a show again.
Final note.
Utelly eventually evolved into white labelling. To help the company pivot into a new business model, the design system I developed over the years set the foundations for what the company now provides to clients - the TV and OTT content discovery technology and fast tracking to market.