TalkTalk FX Star App Prototype

I helped MPC Creative demonstrate the UX vision for TalkTalk's FX Star app by creating a mobile app prototype.

Talktalk Project Hero

The Challenge

For the past few years, MPC Creative have worked alongside CHI & Partners as the production partner to develop a mobile app for the TV programme The X Factor (sponsored by TalkTalk).

The app acts as a brand awareness tool and allows X Factor fans to create and share their own personalised music videos. It also offers them a chance to appear on TV during The X Factor commercial breaks.

The objective of 2016’s app was to increase the immersiveness of the user experience.

My Role

  • App/User flow design
  • Mobile App Wireframes
  • Responsive Microsite Wireframes
  • Mobile App Prototype
Talktalk User Flow

User/Application Flow

The project kicked off with an overview of the previous year's app and an outline of the creative vision and available technologies for the current iteration.

Working with the MPC Creative design team I distilled the key user and functional requirements and mapped out the key journeys that users would take through the app.

This enabled us to agree on the scope of the app and logically determined which parts of the app would need wireframing and prototyping.

Wireframes

I developed wireframes for the key screens (and interaction states) in Sketch. These provided a structural bluepint for the design and development teams.  I later re-used these assets when I created the prototype in Flinto for Mac (thus saving the client time and money).

Flinto 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 transitons to bring an added element of realism to the prototype. This helped the client buy-in to the vision and later aided in developer hand-off.

 

Talktalk Flinto Prototype

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

Prototype Video Walkthrough

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

 

Final App

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

 

Client 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.”

Tools

  • Sketching
  • Sketch App
  • Flinto

Deliverables

  • User Journeys
  • Click-though Prototype
  • UI Animation/Prototype

Type

  • Mobile App
  • Responsive website

Sector

  • Media
  • Telecoms

Get In Touch

If you need help with a UX Design project then I'd love to hear from you.

Download CV

Monthly UX Newsletter

Sign up to receive my monthly email newsletter all about UX design, prototyping and design thinking.

Sign Up