ITV – UX Design
ITV Hub+
Hub Homepage 2018
Cross-platform GDPR User Journey
Steven Power
Senior Product Manager at ITV
I worked with Sarah for a fair few years on some really significant redesigns and product launches for ITV Hub. Sarah is super collaborative, is able to challenge in a meaningful design-led way and is forensic in ensuring anything we did was functional and had the end user experience at its heart. I think the work speaks for itself and Sarah’s thoughtfulness, collaborative attitude and motivation are key attributes she brings to the team alongside her UX and Design skills.”
“
ITV Hub+
Role Lead UX & Visual Designer
Platform Browser
In April 2017 ITV launched Hub+ on browser - a way for users to save their time, by paying £3.99 a month to go ad-free on on-demand content. Previously you'd only been able to benefit from Hub+ on the iOS app, paying through iTunes.
To grow our reach we implemented a payment system on the site using Stripe and added an email verification journey for subscribed users to comply with legal terms and conditions.
ITV Hub+ Upsell Page
Ideating the user flow for the Hub+ Free Trial
SEO Ranking
The Hub+ upsell page wasn't performing as well as we'd like in Google searches, so as a team we came up with some keywords that would help to increase its ranking and worked them into the page. This also gave us the opportunity to inject some images of talent into the page, that could be updated on a seasonal basis.
When tested against the old version, not only did it give us a higher SEO ranking, it increased conversion to Hub+ by 138%.
Free Trial
To further increase conversion we decided to test out a free weeks trial, to see if we could not only get users to subscribe but keep them on and prevent them from churning.
Journey's were mapped out, and as it was just a test that we hoped to get out quickly (before Christmas) we made minimal design changes - mainly copy.
After a week conversion was up by 123% and 60% were staying on to pay. Success!
The design of the free trial touchpoints was given some more love and now a week free trial of Hub+ is a permanent feature.
The trial has also driven new users to Hub – 17% of those who subscribed during the first month were brand new to Hub.
Final user flow for the Hub+ Free Trial
The future for the Hub+ upsell page…
What's Next?
As there was enough benefits to warrant a matrix (comparing Hub to Hub+), that was next on the cards to test and tweak. Plus backend changes were being made to enable different payment models to be implemented.
I was also reimagining the onboarding process to put the upsell at the beginning of the journey to get a user committed before they've even touched a form. That would give us a chance to put the sign-in/up forms in an overlay – helping them know where they are – instead of whisking them off to a new page, which is confusing for some users.
It was also an opportunity for us to improve the responsiveness of this journey and potentially point the mobile apps to this page instead of a separate native experience. Updates and improvements could be done in one place and benefit all platforms this way.
At the end of 2019, we had a total of 280k Hub+ subscribers. 82k of them have been subscribed through Stripe on browser since launch.
Hub+ upsell page sketches
ITV Hub Homepage (2018)
Role Lead UX & Visual Designer
Platform Browser
Back in 2017, our product managers had a hypothesis that if we had more content 'above the fold' on the browser site - we could increase conversion. People are a lot more comfortable scrolling these days.
So we ran a number of multi-variant layout tests on the live site to find out if this was true. If so, what was the ideal number of content items and best performing layout.
Multi-variant layout tests
ITV Hub Homepage (2018)
Visual Design
Once we had a winner (C - above right), I took this layout and applied a layer of visual design finesse to it. To give the layout a cinematic feel, I came up with a way of extending the larger hero images to the full site width.
By repeating the same image in the background, making it full width and blurring it, then applying an alpha mask to the original image on top, I managed to give the effect that the image continues behind the 2 smaller items of content. I then added a semi-transparent darkened channel accent colour over the blurred image to ensure the text on top was always readable and passed colour contrast tests - even on white images.
To add some variation to the layout the 2nd of the 3 large hero images is flipped, which creates a 'snake' of smaller images leading your eye down the page.
Modular
We designed the site to be modular so that the Viewer Engagement team could slot in a collection of content and future proof for when we want to promote other types of content such as box sets.
Development
Working closely with the front end development team we came up with a way to implement the extended image effect on a majority of our supported browsers.
In the first week, the new homepage design increased consumption by 7%, smashing our 2% target. We also saw a 16% increase in new sign-ups.
Modular design
ITV Hub Homepage (2018)
Hub+ Promotion
As the new homepage design didn't have an image bleeding right up to the top of the page, we had to rethink the old transparent grey banner under the nav promoting Hub+. It took some persuading of stakeholders, but we convinced them we should move it to a visually less prominent treatment in the nav.
As this meant the promotion would be on every page - not just the homepage - conversion went through the roof. We saw an increase of 160% in daily subscriptions.
The Future?
Ideation on what the future of ITV.com could look like…
GDPR
Role Lead UX & Visual Designer
Platform Mobile, Browser & CTV
Sorry to bring it up again... Everyone's favourite - GDPR.
As data protection, cookie usage, privacy notices, account removal etc are such dull topics for most users, ITV wanted to inject a bit of playfulness into GDPR when it went live in May.
I worked closely with a copywriter to come up with a fun approach to all aspects.
GDPR Cookie Pop Up – Cross Browser
GDRP Data Opt In
For the ad personalisation controls, we came up with a number of metaphors including:
1. Medals - Gold, Silver, Bronze
2. Power Indicator - Full, Half, Off
3. Cup - Full, Half, Empty
4. Heart - Perfect Match, Friend Zone, Not My Type
I made prototypes of these and we asked viewers from our 'ITV Village' (a large number of people into ITV and willing to take surveys) which one they preferred. The medals won with 48% of the votes.
The Winter Olympics was on at the time though...