Show Project InfoHide Project Info

All Things Hair x Unilever

Client: Unilever
Date: February 17, 2016
Services: UX Design for Responsive web, AppleTV App Design
:

Tasked with transforming an extremely popular Youtube video-on-demand channel into a central point to learn how to create amazing hairstyles.

From the outset, Unilever wanted to place themselves as a brand leader in this space. Working closely with strategist our was to create a new brand and user experience that would help users find new looks, tutorials on how to achieve these looks and where to find the products to create the looks.

My role within the team was Lead UX and IxD designer for a responsive website. I was also asked to explore an omnichannel approach to ATH brand. Before starting to shape the website’s experience with the details of flows and wireframes I wanted to really understand the users. As this was a fresh brand I had limited access to the users. I, therefore, worked closely with the strategist to understand the motivations of the user as any feedback would be after launch.

From a UX design perspective, the website was to be the news brands new central point of contact for users and inspiration. With the aim to complement the youtube channel by giving users better functionality to help them be inspired. Therefore altering their existing habits. We could also create a more personalised experience based on user data once the website had been launched.

Below are extracts of presentations that were created to outline how what user needs we are solving and how the brand will be shaped to answer their needs.

Ath_strategy_1
Ath_strategy_2
Ath_Userflow_Navigation
Ath_Userflow_Chechkout
Ath_Userflow_Account

the  a create a video platform to share video and inspire people to learn about different hairstyles. The brief was to map out the key journeys for the user and for the business. As this was an initial version I started with the business requirements first. Understanding what they wished to accomplish in creating a website.

To achieve this I run some workshops with the client at the Creative Agency offices and invited the key stakeholders. Once we had established the brief from the businesses point of view I started outlining the key user journeys and customer journeys.

All throughout the project, I worked to the double diamond design methodology. This allowed to “Discover, Define, Develop and Deliver”. This allowed me to explore different navigational models, page layouts and create user experience design choices for mobile and desktop.

Key to the project was a video platform. The aim was to create a platform for learning, for enabling users to watch videos and get great hair. With this in mind, I didn’t want to lose the lean back experience which youtube offers and we worked with the client to create a TV element to the solution.

Working with the youtube channel data insights team which informed us that 70% of users were using iOS we create a tvOS app for the Apple TV. The aim was the pull through the same content as we served on the website with all the instructions but allow users to watch the video tutorials on the big screen.

Creating detailed requirements documentation starting at a high level and descending into ever gather detail of how users will flow between the various sections of the app.

Working closely with the mobile client developers to transform the business requirements into low-fidelity and full animated prototypes of the desired outcome pre-code.

Working closely with the mobile client developers to transform the business requirements into low-fidelity and full animated prototypes of the desired outcome pre-code.

When shaping the IA of the website, I worked closely with my the SEO expert to craft a menu that would appeal to user search terms. This had direct implications for balancing out UX expectations in terms of usability for end users but also being able to read by Google search spiders.

Once we had crafted this menu and all the key stakeholders were onboard with the order of the objects and understood the relevant logic behind the grouping for the user, the business and the search engine.

Working with an SEO agency to help consult with menu elements, I managed the relationships between the Creative agency, SEO agency and the client. Coming the agreed solution below.

Moving away from Static UI designs, to better communicate my ideas for the navigation and for open and closing of videos of images sliders. Prototypes were made using Principle for mac which enables myself display and present my prototypes on device.

Continuing on the success of the All Things Hair Youtube Channel, Unilever requested for the creative agency to explore new options and platforms to keep the lean back experience alive which would be lost with the creation of the website.

It was decided after working with Unilever to explore the New Apple TV platform “tvOS” as based on data 75% of their users viewed the youtube channel on iOS and was increasingly favorable of the Apple TV platform.

This allowed us to design and explore an end-to-end experience on a video platform where you could buy products based on the videos you are watching

General navigation of the tvOS app