TalkTalk + X-Factor - FX Star

Generating awareness and audience engagement with the FX Star app & website

  • Client: TalkTalk & The X-Factor
  • Agency: CHI & Parnters, MPC Creative
  • Date: June 2016
  • Duration: 4 weeks
  • My Role: UX Designer
  • Deliverables: User flows, wireframes, prototype

Awards

 

The FX Star app acted as a counterpart to the popular X-Factor TV series and allowed fans to create and share their own personalised music videos.

Each week the winning submissions were featured in the TalkTalk-sponsored ad breaks and gave fans their own few seconds of fame. 

The app was downloaded over 215,000 times, had over 2 million sessions with fans creating over 1.6 million videos.

I was contracted by MPC Creative to help them design the UX.

Talktalk Project Hero

Key Features

The 2016 iteration of the app included the following features:

  • A set of immersive filters with real-time face-tracking
  • 3D rendering & video recording
  • Ability to save and share videos

User Flow

After getting upto speed with the project briefing materials I distilled the key user and functional requirements and mapped out the key journeys. This enabled us to define the scope of the app and also helped us decide on which areas would need wireframing and prototyping.

Schematic showing the user flow for a new recording within the TalkTalk FX Star App

Wireframes

Alongside the creative team I developed wireframes for the key screens (and interaction states) in Sketch. These provided a structural blueprint for the design and development teams.

Talktalk Home Screen Wireframe
Talktalk Countdown Wireframe
Wireframe of the my video section within the Talk Talk FX Star iPhone App
Talktalk App Menu Wireframe

Prototype

I chose Flinto for Mac as my prototyping tool as I could quickly transfer the static assets from Sketch and create a simple click-through prototype.

The initial prototype enabled us to test, validate and iterate the design to ensure the app flow was intuitive as possible.

Once the team were happy, I was able to increase the fidelity of the interactions and transitions to bring an added element of realism to the prototype.

Talktalk Flinto Prototype

The Flinto for Mac interface, showing the key links between screens within the prototype.

Prototype Video Walkthrough

A video walk-through of the Flinto prototype that I built demonstrating the key transitions and interactivity for the app.

Final App

A video walk-through of the final app demonstrating the end-to-end user experience.

Companion Website Wireframes

In addition to the app, a companion website was developed to allow users to browse the video gallery and access information about how to use the app. I developed a simple set of wireframes which provided the blueprint for the design team.

 

Wireframe For FX Star iPhone App
Wireframe For FX Star iPhone App
Wireframe For FX Star iPhone App

Final Website UI

The design team then took my wireframes and developed the final UI design.

UI Design For FX Star iPhone App

Testimonial

Joana Flor Profile Photo
Joana Flor
SENIOR INTERACTIVE PRODUCER, MPC
“Ben's input on the project was absolutely essential. He is a dream to work with: great attitude and a totally expert in his craft. He makes the UX design process attainable to client and team. Can't rate him enough. I'm looking forward to working back together.”