Simona Wong
Information
Hubbl Brand Sprint
Applying the final brand layer onto the Product
Project Type: End-to-End Testing
Role: UI Designer
Industry: Entertainment, Streaming
Devices: Web, TV
Adding the brand layer onto the product presented a few challenges as the direction of the My Account experience leaned towards a light theme when the brand dropped. The initial componentry were developed in dark theme to create a more seamless experience between the Kayo, Binge and Flash Products.
Due to time constraints and development resourcing the ability to build both light and dark theme components on the Web Platform was descoped and so we needed to update all components within our existing ecosystem to light theme.
The Brand Sprint required updates across three development groups - Web, TV and AEM componentry.
With limited time we prioritized the brand sprint in three main phases, we started by updating the existing colour palette with direct colour replacements.
Additonal colours were then added to the colour palette as necessary.
In the initial dark theme the white text required shadows to make the text pop. To promote hierarchy on the checkout pages, a combination of opacities and font sizes were also used to provide clean readability.
In this phase we lifted all the text to 100% opacity and removed all shadows to give a cleaner finish on the text.
The Final Phase of the update was to do a component analysis of the areas that were missed and to create an MVP list that we would be happy to roll out that enabled customers to get through the user journey with minimum disruption to the buyer flow.
As pictured above, the final light theme components have a more cohesive and finished look and feel. As the Lead UI designer on the Brand Sprint, it was important for us to roll out these changes, in order to do so we had to maximise on time windows and build relationships with the development teams to push for these final changes to ensure the product reflected the premium finish we wanted to achieve as Hubbl.
Colours for TV
Once the above phases were complete, these colours were then tested on TV and alternate hex values were retrofitted into the TV experience to ensure the colours didnt blow out on the TV screens.
As the Shopfront page was designed by an exterior agency, there was constant communication with our external designers to ensure alignment on the brand experience e.g. button colours, consistencies on icon styles, and use of the primary colours. Final Product QA performed across all three developments groups to ensure a seamless experience.