Lithys 2017: TalkTalk - Digital Design Excellence

Lithys 2017: TalkTalk - Digital Design Excellence


In order to deliver the new vision, accelerate P2P, product collaboration and innovation it was clear we had to overhaul the entire community with a laser focus on mobile usability.

TTlogo (003).png



Company:  TalkTalk

Entry submitted by:  Stephen Fell (Senior Content & Engagement Manager)

Community: TalkTalk Community

Lithy category: Digital Design Excellence



Our Community & Digital Goals

We know our customers prefer to contact us via digital channels and locate their answer quickly. This is why we’re making significant strides towards providing effortless self-serve and digital interactions with our customers and our community is at the centre of this activity.


With community being a key enabler of our digital strategy we took time to pause & re-focus on what having a community really meant for us, what role it would play in our long term plans, product development and more importantly, what it means to our customers. Following focus groups with key stakeholder and community users, it was clear we needed to transform the end user experience and our new vision was born: “Provide our customers with an easy to use, vibrant, visually appealing, next generation p2p support experience, accessible to everyone, anywhere on any device”


In order to deliver the new vision, accelerate P2P, product collaboration and innovation it was clear we had to overhaul the entire community with a laser focus on mobile usability.


design1.pngBefore (left) and After (Right) community re-design


Our Communities Unique Design elements    

At the same time that we started to think about what our new community experience would look ‘n’ feel like, our brands visual identity was also being reinvented. This gave us an opportunity to take what we had learnt over the past 12 months shaping our digital & community strategy to deliver something that echoed and complimented the new brand identity, whilst doing something different and bringing a sense of personality to our community:


Community Stars Hub

Since its launch our super user’s scheme has been growing strong, we wanted to create a centralised hub for all things “super user” and so the Stars Hub was born. Delivering content dynamically, visitors can learn all about our scheme, selection process, rewards, meet the Stars and even apply to become a star themselves. For super users the Stars Hub acts as a homepage, giving them access to a private lounge, tells them how many hours they’ve helped this month, delivers the latest updates and news about upcoming changes or ongoing issues along with how to deal with them, this allows us to quickly disseminate information to our Stars.


By being our top members, it’s only right they have their own bespoke search tool, enabling the fast and accurate location of members needing help. Our “Who needs help?” component allows super users to filter topics based on a number of points such as their location in the community, solved status, or if they received a like or a reply. The combination of these filters in this custom component makes for a very powerful tool for super users to locate members in need of support.  

design2.PNGDynamic Stars Hub, visitors (left) Super users (Right)


Onboarding Assistant

Communities can be a daunting place for some members, to tackle this we designed the new community to be intuitive but we wanted to offer a little helping hand, meet Michelle!


Michelle is a friendly face welcoming visitors to our community and offering helpful content dynamically, depending on the viewer’s profile. Visitors are encouraged to search for and discover content with a focus on joining.  Once registered members are introduced to support content and after making their first post, more advanced features such as our profile wizard are promoted. All clicks are tracked using GA events so that content and CTA’s are constantly optimised for maximum benefit.


 Caption:  Persistent onboarding banner


Caption: Onboarding component when expanded by the visitor 


Enhanced Profile Page & Wizard

A members profile should showcase who they are, the great content they produce and help facilitate finding like-minded individuals. We’ve overhauled our profile pages to make it easier for members to get to know each other by surfacing the content they share and updating their profile settings with a bespoke wizard.


Our profile wizard automatically displays when a new user attempts to update their settings, guiding them to populate key information and to update their avatar. Members can instantly see how their profile is progressing with the profile completion ring displayed around their avatar. This is further reinforced with a suite of badges, awarded to the user as their profile becomes more complete. The use of gamification in profile completion has seen a 30% increase in users updating their profile.



 Caption:  Profile progress Indicator and available badges

designe6.pngProfile Wizard 


design7.pngNew profile Pages


Service Status Dashboard

We built a Status Dashboard on our community to constantly display the status of our core products. Our dashboard is supported by incident & product managers 24/7, 365 days a year to ensure our customers are always aware of major outages affecting their service. This is now widely adopted by the business across our social, chat and IVR channels as the primary CTA for outage updates where all customers are directed.


design8.pngOur new strategic Service Status Dashboard hosted on community 


Our Journey to the Perfect Design

When we started the journey to bring our new vision to life we constantly grounded ourselves and our decisions around delivering something that was both aesthetically pleasing to the end user whilst being super functional on any device with a laser focus on a truly mobile first design.


Unlike our old community which jarred with TalkTalk branding we wanted to create something that complemented the new, upbeat and more human brand identity and give customers a seamless experience as they transition across the .COM whilst also giving our community its own sense of universe.


It all began with data

A combination of data gathered from tools such as LSI, Google Analytics and SessionCam along with focus groups we’re used to understand how our customers used our community, the challenges faced but also to build a baseline which would ultimately help us track and demonstrate any improvement in performance.  

The insights gathered during these early stages along with our own ideas of what we wanted to deliver where brought together to form our initial design brief.


More than just a lick of paint

It was important to us that we created a unique community experience, which is why we literally started from a blank piece of paper, the default responsive base to help inform the direction we took and ensure we didn’t create an experience so unique it no longer felt like a forum.


Through a series of iterations and working groups, which included our most active community members we settled on a key design principle and commenced the build, no stone was left un-turned with every element and component getting an update. 


Branded & customised hovercards



Even the emoji’s got an update



Our newly responsive Ideas exchange & Blog


A race to the finish

The business had set the ultimate challenge in asking for our new responsive community to be delivered simultaneously with the launch of the groups new visual identify. From commencing the project, we had just 6 weeks to, design, build, test and launch. Our super users where key to our success, helping us with UAT to achieve a defective free environment prior to going live.  


Following our initial launch, we spent a few weeks gathering feedback and ideas to enhance our community further before delivering the next feature rich phase whilst all along reviewing, tweaking and optimizing the experience.


The proof is in the pudding

Since launching our responsive community both our customers and employees have been telling us how much they love the new design, it has also been amazing to see the numbers supporting the feedback:



Trending mobile engagement, the power of a mobile first design


  • 15% Referrer traffic Increase
  • 20% increase in registration conversion
  • 57% increase in returning member engagement
  • 73% increase in solution views
  • 137% increase in mobile registrations
  • 150% increase in traffic to our service status hub
  • 464% increase in mobile content creation
  • 347% increase in mobile users liking content
  • 682% increase in mobile search





@JaniceK Can you update the link to our community it's currently linking to lithium. 

Sorry about that @Fellsteruk! It's fixed now.

Love the consistent TalkTalk design language applied. Combined with the  playful copy and well thought through member journey from onboarding all the way through mastering being a member: This really is an outstanding piece of community customer experience evolution. WTG @Fellsteruk and team!

It's a shame you haven't used a screenshot of the 404 page (-;

@Fellsteruk - what you've achieved in the 4 years of us knowing each other is just astonishing: you have so much to be proud of with this community. Congratulations, and crossing all the fingers for you!



Thanks guys!
@CharlotteK believe me when I say this, but I'm devastated I won't be with you guys, it sure has been a journey and kudos to you for your support.  
@engwei It wouldn't be an easter egg if I did that, but for you 🙂 

It's so funny though. Might need to turn it into a vinyl sticker to go on the wall

I love it! I would have led with the data chart!!

Love love love what @Fellsteruk did with his community. From the design to the well thought out customer journey. Kudos to you Stephen!!

Means a lot to me @Wendy_S was a team effort but thank you very much!