D A T A D R I V E N D E S I G N
My time at Three really allowed me to understand and leverage data driven insights to produce rational design choices and create truly unique, personalised and rewarding experiences for their customers. I worked solely within a newly formed personalisation team, we were tasked to review components and entire templates using a variety of insight tools such as Clicktale (now Content Square). Digesting and understanding user behaviour allowed us to create new content hierarchies and design styles specific to the user, creating a totally user centric product. I also worked on evolving their digital guides (Threeality) and finally creating high impact visuals for unique propositions.
T H R E E A L I T Y
Threeality is Three's style guide. Initially the guide was very strict and stately. It felt the vibrancy of the brand had been muted, fonts were simplistic and colour usage was sparse. Three has a brilliant array of colours, from bright cyan to rich magenta, utilising gradients (living colour) in the logo, but nowhere else across the design system. I felt this wasn't the best way to present the brand, and over a period of time worked closely with the branding team and the design manager to inject this character into elements across the site and into the Threeality guides. Below are some side by sides of how things were and how adding the living colour gradient into UI elements created this new visual design system.
The example above shows the initial steps I took to transform the UI guide to bring it up to the latest design trends and create a modern hover style. Using the Living Colour gradient and blurring it out on hover created not just a unique interaction, but a design language that could be used across a number of other UI elements as seen below:
K E E P I N G I T R A T I O N A L
As well as evolving the Three digital brand, I focussed my efforts on creating personalised experiences for their customers. Working within an agile team and identifying areas across the site where we could improve and adapt the style and content hierarchy to increase conversion and engagement. Once we established the new templates, we made sure to roll these out across the design team to create a cohesive visual language.
Below are some side-by-side visuals, the left showing the original templates with the Content Square heatmaps and the right images are the new templates I created to solve the issues presented in the data.
As you can see in the above data view there was little to no engagement with any of the main content, users were simply not engaging with the content on the homepage. The navigation shows the majority of user interaction, but the rest of the page is cold. This indicated to me that the content was not engaging enough, the page was too long and there were no key objectives within the content. The visual on the right is the newly designed rationalised template. The sections have remained the same however the visual impact is greatly increased. The clutter has been refined and only content that is interacted with is present. This has effectively reduced the page by roughly 50%, allowing for a more elegant solution to absorb and engage with content.
The above visuals show a similar pattern, the users aren't interacting with main content and using the filter to find their objective without exploring. This isn't a problem on the face of things, but after a review of the filter logic, it didn't always surface the correct devices when used. This created frustration in the user and the bounce rate on the page was very high.
The solution for this was to hide the filter but make it clear to the user on its position at the top of the content, giving them the option to explore, but driving them towards the main KPI's.
Instead of having a 3 step journey seen on the existing site, where the user see's the device, clicks through to the detail page and then onto the basket, I wanted to streamline this journey and allow the user to jump right to the basic from this page. The results were a cleaner e-commerce experience, streamlined to increase conversion and create a rewarding journey for their customers.
Below is an example of the rationalised product details page, here the user has selected their chosen product and is welcomed by an all encompassing details page, offering product information, colours, storage, plans, bundles and a dynamic basket which follows the user down the page and updates as they select their chosen device and plan.
F U E L L E D B Y 5 G
My final task at Three was to inspire new visual styles across unique business propositions, a great example was the launch of 5G. Three were offering the leading proposition on 5G and wanted to make a big impact on the market, the below is the initial concept for the 5G template.