Futerproofing live TV for the streaming age.
The challenge
Freely is a new streaming service aggregator targeting the biggest UK channels and their apps. The aim was to create a a brand and key screens to revolutionise the way people watch content in the UK.
We needed to cater fora few different type of content including live and VOD content, and an EPG that would make content browsing a breeze.
Audiences should have the ability to stream live TV channels alongside on demand content and be able to switch seamlessly between the two.
The product is the first time all four of Britain’s public service broadcasters will come together to launch a streaming proposition, signalling the beginning of a journey to secure the future of free TV through collaboration.
Planning
We were a small team of me and another designer who tackled the UI. We organised the main navigation into sections and fleshed out what each page could include and what we needed to consider.
Home needed to the go to destination for the user to find live and VOD content. We wanted this to be more than just a classic homepage of rails and more of a hub that had quick jump off points to the users favourite or most watched content.
Shaping the brand
Our brand
Components
As this was a pitch, we were working under a short timeframe and a lot of the UI components were built as we worked.
Although this isn’t the ideal way to create a design system, it was an exciting challenge in trying to build components as we needed them and also think ahead.
As other members of the team started to put together screens and dashboards, i worked with them simultaneously to create the components they would need and help with styling and brand compliance.
Iconography
We weren’t provided with any icons from the brand team but had an idea of the vision for their iconography style from various promotional mockups in their guidelines. I was tasked with creates icons to not only visualise each of the 8 navigational points, but also for other elements like our chatbot, delivery, training, notification and more.
I ended up creating 47 custom icons for the system using various styling ideas from the brand guidelines.
Navigation & shorcuts
Using the icons, I designed a side bar navigation that highlights key experiences in the system and created variants with and without visible keyboard shortcuts.
This was important as employees were already used to this way of working and in such an integral part of patient management, we needed to cater for this.
Main features
From our audit we outlined 8 main sections included the current system that we could use in our core navigation and dashboard.
Product model
We then decided on the best product model to go forward with. We had four main ideas to consider, a bento box style with various core actions stored in a menu, an OS style model with core ‘apps’, a tree map tile style dashboard with various data visualisation and entry points, or a classic dashboard.
We opted to use the navigations style of the classic dashboard as this fit the best with the main sections we outlined. But we also though incorporating the tree map style for data would work well.
The end result
We ended up with a fresh clean, new look for the system. Showing off features such as quick sign in, search, patient records and task tracking while still keeping the ease and familiarity that employees are used to.
