Project Reload;
designing excitement for an entertainment site.
Foxtel Now is the stream-only version of Foxtel that follows the similar purchase flow of the main product - starting with a base pack and adding add on packs on top of the base pack to generate a bundle. In its initial site, Foxtel Now struggled to convey their pack structure as well as the number of content that they've offered both in the base pack and in add on packs. As a result, both new and existing users struggled to develop an emotional connection to the platform in the same way they do to the competitor products.
This UX initiative project was aimed to generate more engagement by highlighting the media content the product actually offered to its users. Through generating hype, address to fan culture and clarity around what the product offers, this project was aiming to ease the user experience through the purchase flow.
The design
The first problem was that most Foxtel users didn't know the really good content the base pack actually included. Considering today's use of media through fan-culture, social media interactions and hype generation, the website really couldn't bring the hype and excitement the users were seeking, a nod to shows like Game of Thrones.
The design challenge was to integrate this content piece to the shop experience. The media could serve as an excitement tool to engage the user in purchasing the product. Alternatively, it could be a distracting medium that would take away the user from such decision-making processes.
It started with the hero banner. The old site's static nature was replaced with animated content that auto-played feature trailers.
Then it was designing the content discovery banner that talked about what various shows were included in the base pack.
The tiles are interactive in such sense that when the user clicks, more information about said content is displayed.
Shop experience
The second part of this initiative was to ensure that the users were able to use the product across multiple devices, establish clarity on the product and the confidence of the decision-making process in the purchase journey.
Add on component
The +$XX way of displaying add on pricing further elaborates that anything other than Essentials is an add on that is additional pricing.
The animated content caters for user seeing multiple titles that they would get to watch with this add on.
If the user wants to learn more about the add on, they can click on learn more to see more details in the add on the designated page.
The tick-box look and feel of the CTA allow the users to differentiate the selected states of items on this page to those that are unselected.
The sticky cart element on this site is considered as another essential UI element to improve on the overall UX.
The dynamic cart would inform the user as they would interact with more elements. They would get quick feedback on how much they need to pay, edit cart contents if they needed to and go to check-out at any time.
Sticky cart
The process
It all started with user testing the live site to highlight the working and not working elements
The user research results were then collected to generate an audit for long and short term design solutions
From the list, the implementable solutions that were considered most effective to the usability enhancement were selected.
And then began the fun part in the design process: ideation.
During the ideation stage, creating a sense in the business model was needed; the users needed to clearly understand how to get the product.
The various concepts that were created in the ideation stage, were then put through user testing to see which one was the most user-friendly
Through the results of user testing, the final design was evolved to iterate to fit MVP and build processes.
Final product
