Skip to content

TalkTalk FX Star Mobile App Prototype for The X Factor

I helped MPC Creative create a mobile app prototype (Sketch & Flinto for Mac) to demonstrate the UX for TalkTalk's FX Star app.

TalkTalk FX Star Mobile iOS App Prototype built using Sketch & Flinto for Mac

Overview

MPC Creative have worked as the production partner for the past few years, developing a mobile app for TalkTalk.

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

‘Mix Off’ and ‘Bop Heads’ (the two previous versions of the app) were a great successes. The 2016 iteration had to push the concept into new territory to excite users and encourage them to use it.

Objectives

The objective of 2016’s app was to improve the user experience. This involved the inclusion of facial recognition for up to four people, 3D masks/themes and a selection of new music tracks.

Responsibilities

My responsibilities as Lead UX Designer included:

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

App Download Links

You can download the TalkTalk FX Star Mobile App using the links below.

User/Application Flow

I mapped out the key journeys that the user would take through the app. This enabled me to better understand the scope of the app, both in terms of functionality and the way in which a user would navigate it.

This also provided me with an outline of which screens needed to be designed and included in the prototype.

TalkTalk / X Factor Mobile App Flow
User/Application Flow developed using Sketch.

Wireframes

I then developed wireframes for the key screens (and states). These would later be used in the prototype and inform the visual design and development.

TalkTalk / X Factor Mobile App Wireframes
Key wireframes developed using Sketch.
TalkTalk / X Factor Mobile Wireframe
Individual mobile wireframe.

App Prototype (Flinto For Mac)

I then imported the wireframes into Flinto For Mac where I linked them together.

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

TalkTalk / X Factor Flinto Prototype
Key screens imported from Sketch into Flinto for Mac.

Once I'd linked together the key screens, I concentrated on refining some of the key interactions within the app, using the Flinto for Mac Transition Designer.

Flinto for Mac Transition Designer
Refining transitions and interactions in Flinto for Mac's transition designer.

Prototype video walk-through to demonstrate key transitions and interactivity for the app.

Final App Video Walk-through

Final app video walk-through demonstrating the end-to-end user experience.

Responsive Microsite Wireframes

A companion microsite was developed to provide a destination for users to find out more about the app and download it. I developed a set of simple wireframes to detail key parts of the microsite user experience.

TalkTalk / X Factor Microsite Wireframes
Microsite wireframes developed using Sketch.
TalkTalk / X Factor Microsite Wireframe
Individual wireframe for the desktop break point.

Responsive Microsite Designs

TalkTalk / X Factor responsive microsite design on a laptop and mobile device
Final UI designs (by Lead Designer Gorkem Menekse) for the responsive microsite.
TalkTalk / X Factor Microsite New Content Design
Final UI design (by Lead Designer Gorkem Menekse) for the New Template/Tracks page module.
TalkTalk / X Factor Microsite Top Picks Design
Final UI design (by Lead Designer Gorkem Menekse) for the Top Videos page module.

Final Thoughts

This year’s iteration of the app has already pushed the boundaries both creatively and technically. With The X Factor 2016 only just launched, it remains to be seen how users will react to the new app. But if the two previous year’s are anything to go by, it should be a great success.

You can download the app from https://fxstar.talktalk.co.uk

UX/UI Before & After

TalkTalk / X Factor Mobile App PrototypeTalkTalk FX Star Mobile iOS App Prototype built using Sketch & Flinto for Mac
Use the slider to toggle between the wireframe/prototype and the design.

Share This Project

If you enjoyed this project, then let others know about it by sharing it.