Chrissy Teigen's Tweet Unleashes a User-Driven Revolution in Video Streaming Apps: Top 10 Rules for Building the Ultimate Viewing Experience

Lost in the Stream: Unravelling the Paradox of Content Overload on Streaming Platforms

Partnerships – A New Approach

Keeping Fans in the Game: The Power of Gamification for Enhanced Sports Viewing Experiences

Leveraging Cross Devise Experiences 

Super apps: catching on via baby steps rather than a single bound in the West

Another NAB in the Books!

When the Dry Stuff Matters.....Managing Projects Day to Day.

Why do products fail? And 3 steps to make them succeed

4 ways new FIFA technology could make football more accessible to fans.

This Year's Top Trends

Personalisation in Video Streaming: Top Trends

Unlocking Synergistic Success at UI Centric

It’s all in the design: the source of  TikTok’s global success

React Native - A balancing act between cost-effectiveness, performance, and flexibility.

Our work

Our work.

viacom-logo

Viacom

uefa-logo

UEFA

the-d-logo

The D

technicolor-logo

Technicolor

showtime-logo

Showtime

pix-logo

nep-logo

nbc-logo

my5-logo

jaguar-logo

Jaguar

cbs-logo

bbc-logo

amazon-logo

Amazon

logowallDiageo

Diageo

CaseStudyLogoTimeout

Timeout

Our clients.

Next: Our capabilities

Get in touch

Let's make something great together

When the streaming market began to heat up with major players like Netflix, Apple and Disney+ all improving their services, Crackle knew it had to refresh its services. Offering free movies and TV shows with ads not subscription fees, a UX development and design overhaul with a focus on content discoverability would achieve the refit. 
Want to watch your favourite Hollywood movies for free? Crackle has it covered. Based in the US, Crackle is one of the largest ad-supported streaming services (AVOD) in the US and brings movies and TV shows to fans. Its Roku channel was originally launched in 2011 and, by the time we were introduced, already had a large, established fanbase. 
As the years went on, competition in the streaming market grew fierce and consumer expectations driven upward. The market began to see a sharp increase in interest for AVOD services, as consumers felt wary of being locked into too many subscriptions. Netflix, Hulu and Amazon Prime were all growing significantly, with Apple TV+ and Disney+ also entering the market.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1209" src="https://cms.uicentric.net/wp-content/uploads/2023/04/4_3-MAIN-300x225.png" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/4_3-MAIN-300x225.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/4_3-MAIN-1024x768.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/4_3-MAIN-768x576.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/4_3-MAIN-1536x1152.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/4_3-MAIN-1568x1176.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/4_3-MAIN.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
Crackle’s Roku needed to stay competitive with its UX, a wider content selection and a fresh design. To make that happen, UI Centric was asked to help give the application a total refresh, bringing development support to Crackle’s UX and UI teams for sprucing up accessibility and content discoverability, as well as creating a smoother viewing experience that kept the limelight firmly on the content.
<h3>Giving fans the VIP treatment</h3>
Our first step was to get a gauge on all the challenges Crackle was facing. We analysed all the data we could scrape, alongside industry trends, behaviour insights, reported pain points and opportunities for new features. We often use this approach to drive the best results for clients because we recognise the importance of data and customer insights in making key design, product and development decisions. Not only is user experience critical to any product’s eventual customer rating, but retrieving user feedback to inspire phases of testing and learning is also an integral part of our production process.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1256" src="https://cms.uicentric.net/wp-content/uploads/2023/05/16_9-SUPPORTING-300x169.jpg" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/05/16_9-SUPPORTING-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2023/05/16_9-SUPPORTING-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2023/05/16_9-SUPPORTING-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2023/05/16_9-SUPPORTING-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2023/05/16_9-SUPPORTING-1568x882.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2023/05/16_9-SUPPORTING.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
We developed Crackle with an iterative approach, first working towards an MVP with parity to its existing in-market Roku app. It gave us fast access to user feedback in a real-world setting, a process which was then baked into a regular release cycle so that the Roku channel continually improved in response to user needs.
One of the areas we identified was the opportunity to create a more intuitive user experience to make finding content easier. The UX needed a better search functionality, for all those times you just can’t decide and end up watching Miss Congeniality for the seventh time. The search would include better recommendations too, a more detailed process and entry into a better catalogue browsing experience to combat scrolling fatigue. We also added the ability for users to create their own watchlists, as is now the norm on most streaming services, bringing Crackle onto equal footing with its competitors and satisfying user expectations.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1210" src="https://cms.uicentric.net/wp-content/uploads/2023/04/16_9-SUPPORT-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/16_9-SUPPORT-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/16_9-SUPPORT-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/16_9-SUPPORT-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/16_9-SUPPORT-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/16_9-SUPPORT-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/16_9-SUPPORT.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3>A box office hit</h3>
Crackle’s updated Roku channel is modern, user-friendly and far easier to navigate, so users can get stuck into their popcorn or binge watch their favourite show much faster. The results have been blockbuster. Video start times have improved by 42% and, in turn, viewership has risen by 40%. Ad exits – an important metric for Crackle – dropped by a whopping 200%.
Philippe Guelton, president of Crackle Plus, said: “Our team is excited to release this new version of the Crackle app onto Roku devices that have traditionally been a large share of our audience. We are now presenting our premium content offering into a totally redesigned and faster loading experience, which has proven to deliver higher engagement and user loyalty with each new app release.”
These are box office numbers that make Crackle one of the leading players in the streaming service space. Now, important decisions: sweet or salted?

A box office relaunch boosts content discoverability for leading free streaming service Crackle

Nevion is a global media network solutions provider, the force enabling many of the broadcasters you know and love to reach TVs in homes the world over. Its systems are complex and serve hundreds of millions of viewers every day but, over time, have become harder to use. Nevion needed a new UX and UI to make its products efficient and effective and UI Centric was there to deliver.
Behind every great broadcaster lies an even greater media network solutions provider. Nevion, owned by Sony, is one of these providers, helping to deliver everything from Premier League coverage to Governmental network communications at global scale. Headquartered in Norway, its market-leading product VideoIPath provides a network of global pathways that take live footage from on location and deliver it to TV sets worldwide, through a series of satellites, cables, data centres and local or regional broadcasting centres.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1252" src="https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-4-300x169.jpg" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-4-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-4-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-4-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-4-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-4-1568x882.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-4.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
Nevion calls it a ‘media orchestration platform’, providing connection management, service assurance and network inventory capabilities for service providers and broadcasters. Engineer-led and completely focused on the practical delivery of its service, as VideoIPath had grown, its UX had become complex and its UI gradually less and less user friendly. Nevion needed a support partner to help it make the product more user-centric, without losing sight of its core proposition.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1250" src="https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-1-300x169.jpg" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-1-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-1-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-1-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-1-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-1-1568x882.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-1.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3 style="font-weight: 400;">Easing pressure with game-changing UX</h3>
It’s not about user engagement. Ultimately, this is a product that is functional in nature – for heavy lifting, reactive and responsive requirements either planned in advance or during instant diagnostics for live broadcasting issues. But even the best functioning products on the planet need to be easy to use in order to function effectively.
The pressure on those using this tool can be immense – imagine serving over 550 million viewers halfway around the world, at once. So using and navigating VideoIPath has to feel intuitive, simple, stable, consistent and, above all, fast. That’s why, although some cosmetic work was done, the core of our solution revolved around solving intricate user experience problems. The product needed a new UX.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1253" src="https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-3-300x169.jpg" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-3-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-3-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-3-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-3-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-3-1568x882.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-3.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3 style="font-weight: 400;">Complex tasks made seamlessly easy</h3>
Having been recommended by NEP as a result of our work there, we started, as we always do, by asking ‘why?’ Using user research, data and reported challenges, we avoid assumptions and openly discuss the problem to get to develop an understanding of what’s needed. We came at this with a fresh set of eyes, with the opportunity to take a completely new approach to the problem.
Using workshops, research, prototyping and iterative user interface design to test and learn, we began to develop solutions to complex and sophisticated problems VideoIPath users would face. That might be hundreds of system alarms firing at once, creating a network topology to view in correlation with inspecting issues or helping an engineer set-up a service path in five seconds.
From a design standpoint, we planned and prototyped for every eventuality we could think of and then implemented rapid feedback sessions with Nevion. This was the result of a partnership between the product owner and the tech team, fusing functionality for the user with the product’s technical inner-workings behind the scenes.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1251" src="https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-8-300x169.jpg" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-8-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-8-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-8-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-8-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-8-1568x882.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-8.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3 style="font-weight: 400;">A harmonious network</h3>
VideoIPath consists of a suite of apps, each performing very specific tasks, used by a very skilled user – like Matrix, Connect Studio, Inspect and Configuration. These apps all work independently but also need to work together harmoniously as one family.
The apps fall into one of three categories – services, assurance or configuration. The ‘services’ collection of apps set up connections, allowing audio and visual data to get from A to B at lightning speeds using pathways. This is where the magic is at. With our guidance, users can now set-up new connections in seconds. The ‘assurance’ category focuses on monitoring broadcasts, identifying issues and fixes. A large portion of our work was to understand issues with live feeds holistically, replacing the current process which often missed wider problems or patterns happening outside this macro view. Our solution was to create Inspect topology, giving users the ability to dive deep into the architecture of each problem whilst comparing other devices and ports to check for related issues.
The ‘configuration’ suite of apps are more user-focused. We helped map out how users could build profiles and services efficiently that would be used continuously throughout the entire business. We hooked this up with notifications, adding industry-standard alerts like toast pop-ups and action toolbars.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1254" src="https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-5-300x169.jpg" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-5-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-5-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-5-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-5-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-5-1568x882.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2023/05/Nevion-Case-Study-Mockups-5.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3 style="font-weight: 400;">A network reimagined</h3>
The result was a new UX and UI that made VideoIPath far simpler to use but no less effective at solving the complexities of delivering live events to millions of viewers globally. It had streamlined Nevion’s day-to-day and made user interactions live on location straightforward, with great feedback in tow.
Maren Ytterdal Krogsrud, Nevion, said:
“We’ve had the pleasure of working with UI Centric for several years and, during this time, they&#8217;ve significantly improved the look and user experience of our product.
“Given the complexity of our workflow requirements and features, UI Centric have worked in partnership to truly understand the reasons behind our needs and have taken the time and effort to build something that not only works technically but is something that is brilliantly designed and easy to use for our customers.
“The team is always very eager and extremely helpful and, with their digital product expertise, have created great design ideas that have significantly improved our product. We really enjoy this working collaboration.”

A UX and UI refresh for Nevion, the media network solution provider powering your favourite TV broadcasters

Wilderness Reserve is a collection of luxury, restored cottages, country houses and mansions in rural suffolk. Its premium guest experience and stunning locations bring guests back time and time again – and its website should do the same. Its existing website and associated admin tools were encountering usability issues, leading to missed bookings, unnecessary work and costly overheads against sales staff, management and hosts.
Wilderness Reserve knew it needed a fix, one that would stand it in good stead to sell high-end rural retreats for years to come. It asked UI Centric to reimagine its digital approach, to make the guest experience online as seamless, helpful and engaging as it is in person. With our expertise in digital transformations rooted in user experience, we were only too glad to help.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-886" src="https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-1-16x9-1-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-1-16x9-1-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-1-16x9-1-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-1-16x9-1-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-1-16x9-1-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-1-16x9-1-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-1-16x9-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3 style="font-weight: 400;">User experience meets guest experience</h3>
We began the project with a one-month discovery phase, getting under the skin of everything Wilderness Reserve stood for and sought to achieve with its digital offering. We observed and interviewed staff and guests, as well as taking a deep dive into existing processes and technologies that underpin its daily operations. As a result, we recommended a full digital transformation and strategy roadmap for the next two years. That meant a brand new website, complimentary iOS and Android apps, digital keys and a full back-office management system.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-887" src="https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-2-4x3-1-300x225.png" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-2-4x3-1-300x225.png 300w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-2-4x3-1-1024x768.png 1024w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-2-4x3-1-768x576.png 768w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-2-4x3-1-1536x1152.png 1536w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-2-4x3-1-1568x1176.png 1568w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-2-4x3-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
What this gave Wilderness Reserve was a wholly new and improved digital guest experience. A brand new website design, with a suite of new features, meant booking and paying for houses was now easy and, importantly, without missed bookings. Guests could plan and buy their food, drinks and activities, as well as inviting other guests to join them during their stay too.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-888" src="https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-3-4x3-1-300x265.png" alt="" width="300" height="265" srcset="https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-3-4x3-1-300x265.png 300w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-3-4x3-1-1024x905.png 1024w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-3-4x3-1-768x678.png 768w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-3-4x3-1-1536x1357.png 1536w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-3-4x3-1-1568x1385.png 1568w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-3-4x3-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
A set of iOS and Android apps gave guests the ability to manage their stay remotely, including activity bookings, catering and any admin like filling out disclaimer forms for activities (axe throwing, for example).  They also became digital keys for gaining access to their property, reducing packaging and carbon footprint as well as being incredibly hard to lose!
The back-office management system included a custom-built CRM, new booking engine, bespoke activity configurator and staff management tools. It gave staff the option to take bookings over the phone, over email or even over WhatsApp, using an interactive property availability calendar. Activity pricing, staff requirements, in-activity purchases – even variable property pricing models – can now all be manually set and then fed into the new booking engine, which changes what guests see on the website.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-889" src="https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-backoffice-4x3-1-300x225.jpg" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-backoffice-4x3-1-300x225.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-backoffice-4x3-1-1024x768.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-backoffice-4x3-1-768x576.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-backoffice-4x3-1-1536x1152.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-backoffice-4x3-1-1568x1176.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2022/10/Wilderness-backoffice-4x3-1.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3 style="font-weight: 400;">Built for the future</h3>
From a tech perspective, we built its new digital products from the ground up, completely brand new and free of existing systems. We aimed to build a flexible and scalable tech stack aligned with the expertise in-house at Wilderness Reserve. We built the backend infrastructure on top of Azure Cloud to leverage its fully-managed services, using Azure AD for authentication and authorisation, Azure Functions for serverless worker processes executing background tasks, Azure WebService to host the automatically scaled backend application and Azure AKS to build a Kubernetes cluster around the CMS behind the guest-facing website, with built-in redundancy and scalability.
The frontend web apps – the website, guest portal and back office portal – were developed with React.js and Typescript, whilst the mobile apps used React Native so we could use the same code across all frontend apps and keep things native for users. All the frontend apps access the backend using GraphQL API endpoints.
<h3 style="font-weight: 400;">Beauty meets beauty</h3>
Overall, the project was a resounding success. A completely revamped and redesigned website made guest experience easier to serve and far more satisfying to receive. Digital keys, guest apps and activity booking portals not only gave guests more flexibility but Wilderness Retreat a greater opportunity to capitalise on secondary revenue streams. The digital transformation as a whole gave its portfolio of stunning properties the shop windows they deserve – after all, we are talking about areas of natural beauty.

A total digital transformation for one of Suffolk’s most stunning property portfolios

Crackle Plus is one of the largest ad-supported streaming services (AVOD) and offers a variety of movies and TV shows incl. original programming.
The Crackle Roku Channel was originally launched in 2011 and had established a substantial user base over time. However, it had also struggled with several issues such as an outdated design, limited content selection, and a subpar user experience.
To meet the changing demands and expectations of viewers and to remain competitive in a crowded streaming market, we were engaged to completely overhaul the application. The goal was to enhance the accessibility and discoverability of content and ensure a smooth and enjoyable viewing experience for the audience.
The updated application features a modern, user-friendly design and improved navigation, making it easier for users to find and watch their favorite content. This is achieved with improved search capabilities and enhancements to the catalog browsing experience to decrease scrolling fatigue. The application also allows users to create and manage their own watchlists, making it easy to keep track of their favorite shows and movies. 
&nbsp;
&nbsp;

Relaunch boosts content discoverability

Manchester United pulls in football fans stretching from the UK to the UAE. No matter where fans are in the world, the support is die hard, with a passion for Man United content just as deep. The club has played over 1,000 games in the past 30 years in the English Premier League alone. Add to this years of player interviews, documentaries, behind-the-scenes exclusives and all the live action and you’ve got a substantial archive any MUFC fan would celebrate. 
MUTV is Manchester United’s streaming service, where fans can access the club’s archive of football content, as well as watch live coverage during each and every pre-season match. It’s also an exclusive window into the inner workings of the club, with behind-the-scenes access and player profiles.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1202" src="https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-3-16x9-1-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-3-16x9-1-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-3-16x9-1-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-3-16x9-1-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-3-16x9-1-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-3-16x9-1-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-3-16x9-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
We originally launched MUTV back in 2018 as native apps, on Apple TV, Fire TV, Xbox One and Roku. Back then, we went through our tried and tested approach of combining user research, UX, design and development with cross-team client collaboration but every successful project should maintain constant iteration over time. That’s why Manchester United came back to us for help expanding MUTV to new platforms, with a change of business tactic in tow.
<h3>A new look for a new season</h3>
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1185" src="https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-1-16x9-1-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-1-16x9-1-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-1-16x9-1-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-1-16x9-1-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-1-16x9-1-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-1-16x9-1-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-1-16x9-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
In seasons gone by, MUTV was a paid subscription service with revenue as the main focus. Now, Manchester United aimed to change its direction, moving to a focus on global reach with a free subscription in most countries instead (excluding around 12 territories). To do this, it needed a refresh – an expansion onto next-gen smart TVs, including LG, Samsung and Android TV, and an app relaunch built as React Native and React Native for Web apps. On top of this, we would add a suite of new features to improve user experience and retention.
We kicked off with a total visual overhaul for a modern design, creating a new homepage for different content types like episodes, shows and collections. We also created ‘show pages’ to bring all its episodes together in one place whereas before users could only look in detail at individual episodes. Every fan wants to find their favourite goal, right? So we added search functionality to scour the archive, as well as a bookmark feature for saving the shows or episodes that tug on a supporter’s heartstrings over and over again.
With MUTV’s visual transformation in progress, we turned our attention to what was in the dugout. 
<h3>A game of two halves</h3>
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1201" src="https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-2-4x3-1-300x225.png" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-2-4x3-1-300x225.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-2-4x3-1-1024x768.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-2-4x3-1-768x576.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-2-4x3-1-1536x1152.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-2-4x3-1-1568x1176.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-2-4x3-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
To bring MUTV onto new apps, we rewrote the application with React Native, reducing the need for separate dev teams across each platform and saving time and cost for the client. This is because with React Native a single codebase can be used across multiple platforms, whilst also making maintenance far more streamlined. React Native also gave us access to hot reloading, where dev teams can see their changes in real-time without needing to rebuild the app. With client needs always at the heart of what we do, it’s much faster for us, and much faster for them.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1203" src="https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-4-4x3-1-300x225.png" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-4-4x3-1-300x225.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-4-4x3-1-1024x768.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-4-4x3-1-768x576.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-4-4x3-1-1536x1152.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-4-4x3-1-1568x1176.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/MUTV-4-4x3-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /> 
Each target platform for MUTV had its own unique technical specs, so our team needed to be sure it would work seamlessly across all of them, every time. It might sound straightforward if you’re using a single codebase in React Native but TV manufacturers are notoriously slow at adapting to new technology. When we came to work on building the app for smart TVs this became blatantly obvious, with models older than 2020 working off a different type of code. We used Babel to transcribe the code from ES6 to ES5 for these models, as well as taking into account remote input handling, proprietary APIs, key codes on remote controls changing every year and even unsupported cookies (on LG). Pack all this up and then add the difference between actual manufacturers, not just the models, and you can start to understand the complexity of the project – despite using React Native.
<h3>Firmly in the premier league</h3>
Once testing and troubleshooting had been completed – itself a chunky piece of work between TV make and models – MUTV was brought to market. 
Since then, it’s been downloaded in over 240 territories, hitting number one in the app store’s sports category in over 100 countries. MUTV is one of the most subscribed football channels in the whole of the UK and now, with its new look, a seamless, high-quality user experience with nothing left on the pitch.

Relaunching the most subscribed football app in the UK

When we first met UEFA in 2010, our creative engineering reputation for technical expertise combined with product design made for a perfect match with UEFA’s needs. Over the course of a decade, our collaboration would see us taking on UX, UI and tech development for UEFA’s entire content archive, its video workflow and platform monitoring service, its global streaming platform UEFA.TV and much more. Here’s how.
You know UEFA for The Champions League, The Europa League, The EUROs – the Union of European Football Associations is the umbrella organisation for European football. It looks after a democracy of 55 national football associations across Europe, reaching far and wide. In the Champions League alone, over 8,500 goals have been scored in the last 30 years. When you consider the average number of goals scored in a game is just over two, that’s a lot of match time. Multiply that across over 20 different leagues and, well, you understand.
We first met UEFA back in 2010. Our combined technical credibility and strength in product design would be a key strength in starting our collaboration together, with an emphasis on the need for feature development, speed, agility and flexibility. If you cast your mind back to 2010, this way of working wasn’t all that common, even today’s tech was in its infancy – it was a time when Apple launched its first iPad, when Uber and Netflix were still trialling its apps in San Francisco and Canada, even Instagram had only just been born.
From there, our relationship has blossomed into a creative engineering support role of over a decade, through various milestones and technical developments to keep UEFA at the forefront of the digital landscape in football. We took on UEFA’s Legacy Media Asset Management System (MAM), its platform monitoring service for video workflows across the world and its UEFA TV application(s). All of which had an immediate impact on UEFA staff, journalists, broadcasters and football fans around the globe.
<h3>An archive worth millions</h3>
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1193" src="https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-4_3-MAIN-300x225.png" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-4_3-MAIN-300x225.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-4_3-MAIN-1024x768.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-4_3-MAIN-768x576.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-4_3-MAIN-1536x1152.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-4_3-MAIN-1568x1176.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-4_3-MAIN.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
The very first project we worked on with UEFA was a redesign of its MAM – named UEFA Legacy – to open up access to anybody outside of UEFA’s internal team. Whilst the governing body was already monetising the rights to its archive of football content, it wasn’t doing so at scale.
Despite then digitising its archive, it still had no way of making the process self-served – which is where this project stepped in. The redesign would enable external access for ordering and receiving footage under strict user permissions, like a highly regulated self-serve system. Although a B2B service, it would be dealing with real people and, therefore, would need a customer experience that rivalled any high-end consumer digital product out there. 
We designed a feature rich yet intuitive user interface exclusively for UEFA. The final product included a custom media player, with match event metadata synced to the timeline, advanced predictive search, multi-angle camera views, video frame telestration, the ability to clip and stitch multiple video segments into a single file, secure digital file delivery, and much more. Put it all together and we made UEFA Legacy a steadfast platform for managing an archive with hundreds of thousands of matches inside it. 
&nbsp;
A web-based media asset management system, we built both the front and backend of UEFA Legacy. On the frontend, we used Angular.js for a dynamic and responsive UI, combined with Javascript for its interactive features and HTML5 and LESS Stylesheets to keep it looking tight. On the backend, for the developers among you, it’s built using a scalable on-premise infrastructure for reliability and efficient performance, with a database powered by MySQL. The server itself is built using node.js, a lightweight and fast Javascript runtime, key to scalable dev builds. 
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1194" src="https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-16_9-SUPPORTING-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-16_9-SUPPORTING-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-16_9-SUPPORTING-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-16_9-SUPPORTING-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-16_9-SUPPORTING-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-16_9-SUPPORTING-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/Legacy-16_9-SUPPORTING.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3>Tracking the rights to an entire tournament</h3>
Subsequently, UEFA asked us for a web-based, multifaceted tool for monitoring the health of its core digital services. With a rapidly changing brief just weeks ahead of UEFA’s EUROs, the project would need a great deal of flexibility and pace. 
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1195" src="https://cms.uicentric.net/wp-content/uploads/2023/04/UEFA-monitoring-16x9-1-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/UEFA-monitoring-16x9-1-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFA-monitoring-16x9-1-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFA-monitoring-16x9-1-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFA-monitoring-16x9-1-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFA-monitoring-16x9-1-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFA-monitoring-16x9-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
Used by many match ops teams at once, UEFA Monitoring keeps a track of asset usage, availability and transfers. It includes a media player for monitoring multiple live match broadcast feeds, a dashboard for the status of content transfer and ingestion points, a ticketed system for logging tech issues and remedies and a real-time upload and download monitor for UEFA Legacy, its central content archive. Since its inception, it’s been a key part of UEFA’s match day operations ever since. For context, at the UEFA EUROs 2016, the building housing its monitoring service was nothing short of a warehouse, with wall-to-wall monitors set up that filled the space. This service is vast.
Technically, we built the frontend using Angular.js and Javascript again, as it was essential for the system to have a responsive user interface with multiple interactive features. The web-based app uses a Federated Active Directory Single Sign-on for a seamless and secure authentication and authorisation process with internal users. On the backend, it’s built on a Dockerised on-premise infrastructure for flexible deployment and management. With the server built using Java Spring, performance is high whilst Server-Sent Events (SSE) makes real-time server communication fast for whoever is using it.
<h3>Over 20 leagues, anywhere in the world</h3>
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1199" src="https://cms.uicentric.net/wp-content/uploads/2023/04/uefa-tv-2x-tvs-angle-007-1-300x172.png" alt="" width="300" height="172" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/uefa-tv-2x-tvs-angle-007-1-300x172.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/uefa-tv-2x-tvs-angle-007-1-1024x588.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/uefa-tv-2x-tvs-angle-007-1-768x441.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/uefa-tv-2x-tvs-angle-007-1-1536x881.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/uefa-tv-2x-tvs-angle-007-1-1568x900.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/uefa-tv-2x-tvs-angle-007-1.png 1882w" sizes="(max-width: 300px) 100vw, 300px" />
Perhaps the other most notable product to mention is UEFA.TV, an on-demand streaming service bringing football directly to millions of die-hard fans. From extended highlights of UEFA’s 20 European competitions to UEFA’s extremely popular documentaries, competition draws, original series, interviews and press conferences, UEFA.TV is a native, multi-platform OTT watched globally across web, mobile and connected smart TVs. It also has the ability to personalise content to the user’s favourite club and extend coverage from that of linear broadcast TV. Viewers can even jump to key moments in the match by clicking on annotated sections within the player’s timeline. You can find it on HiSense, Playstation 4 &amp; 5, iOS and Android, Apple or Fire TV and on the web too.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1198" src="https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-4-16x9-1-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-4-16x9-1-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-4-16x9-1-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-4-16x9-1-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-4-16x9-1-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-4-16x9-1-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-4-16x9-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
For the web, UEFA.TV is built as a SIngle Page Application using React.js, Redux, HTML5 and Styled Components, with a single codebase across desktop, mobile and smart TV platforms like PS4 and HiSense. All of these parts gave us the flexibility to build at scale and at pace for the client, whilst keeping the UX and UI in a stable state. On iOS, it uses Native iOS, iPadOS and tvOS frameworks and an MVVM architecture pattern with RxSwift for reactive programming across complex state changes and user interactions. We achieved the same thing on Android by building natively using Kotlin, a language known for being concise, expressive and safe. We combined the MVVM architecture with RxJava and databinding to stay reactive. All of this is then powered by an AWS Cloud infrastructure, adding in flexible and scalable middleware for custom features that aren’t out of the box. It gave UEFA total control of its fan experience, uncoupling the frontend from the backend.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1197" src="https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-3-4x3-1-300x265.png" alt="" width="300" height="265" srcset="https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-3-4x3-1-300x265.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-3-4x3-1-1024x905.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-3-4x3-1-768x678.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-3-4x3-1-1536x1357.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-3-4x3-1-1568x1385.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/04/UEFATV-3-4x3-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3>A very special relationship</h3>
So far, we’ve formed a 12-year collaboration with UEFA across over 11 different products, just three of which are mentioned here. Across the last decade, a commitment to high-quality work has seen products like UEFA Legacy become something of a cornerstone to the way UEFA operates.
It’s a shining example of how we like to work with clients, committed to consistency and longevity. To utter transparency and reliable support, whether a large organisation or a boutique business. Building a trusted and valued relationship with the UEFA team has been incredibly fulfilling and we look forward to many more years of success.
&nbsp;

The powerhouse behind European football

NEP Group is the media technology company behind some of the broadcast, live and virtual shows you love most. Its Media Asset Management system, Mediabank, is an industry award-winning platform that gives users the power to share and distribute content anywhere. But it needed a specialist creative engineering partner to give it a reboot.
NEP Group aims to revolutionise the way people experience entertainment, sports, news and more. The way they create and share content. It is a production powerhouse that uses cutting-edge technology, engineers and technical experts to bring broadcast events, live performances and virtual productions to life. That’s the industry introduction – you’re more likely to know its clients; Eurovision, Love Island, The Grammys, Wimbledon. NEP lies behind all of these, and has been revolutionising the industry for years too – the first ever 4K OB truck, the first ever entirely virtual set, the first ever ST2110 broadcast facility. The list goes on.
It’s safe to say that NEP has a history of revolutionary work. So, when existing users asked for an upgraded UX experience on its Mediabank platform, NEP needed its own revolution. Mediabank, an award-winning cloud-based toolbox for sharing and distributing media anywhere in the world, was showing signs of getting left behind by its competitors. Its design, navigation and UX needed refreshing to keep it fresh and its existing features, which had been bolted on, needed to be tightly integrated with a new tech stack. NEP needed a design, UX and technical specialist to help it reimagine Mediabank – so we got the call.
<h3>A facelift for the future</h3>
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1177" src="https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-thumbnail-imac-1-300x225.png" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-thumbnail-imac-1-300x225.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-thumbnail-imac-1-1024x768.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-thumbnail-imac-1-768x576.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-thumbnail-imac-1-1536x1152.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-thumbnail-imac-1-1568x1176.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-thumbnail-imac-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
Mediabank is what the industry calls a Media Asset Management system (or MAM for short), and with our growing expertise in MAMs, gained with clients like FIFA and UEFA, we were well placed to embark on a total UX and design overhaul of NEP’s Mediabank. The restructure would also involve front and backend development and rebuilding, with a focus on making the application industry agnostic but customisable for any given sector.
To kick-off the project, we first ran a thorough end-to-end audit of the existing platform, taking note of bugs and issues that needed fixing and also features that hit the mark and needed to stay. Using this, our UX and design teams pulled together a variety of routes that showed how the new Mediabank could look and feel. Once NEP had picked one, we began working on an MVP, carefully thinking and designing about each and every feature with best practice UX in mind.
Working on a retained team basis, we took regular trips to Oslo to sit and work closely with NEP’s internal teams. We took interactive prototypes over regularly, to give a taster of our direction and keep client input high. As a creative engineering company, we deliver work as one team, which includes the client. And, from the BBC to NEP, we pride ourselves on creating great client relationships that stand the test of time.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1176" src="https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-search-ipad-1-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-search-ipad-1-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-search-ipad-1-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-search-ipad-1-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-search-ipad-1-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-search-ipad-1-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/NEP-search-ipad-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3>A tech stack built to adapt</h3>
We rebuilt Mediabank as a single page web application using React.js with Redux state management. Using rxJS paves the way for reactive programming which, in turn, makes dynamic UI that adapts to user interactions in real-time far easier. Mediabank communicates with its server using a set of REST API endpoints, creating efficiency with data exchanges between the client and the server. We also developed reusable components, collected and documented in Storybook, to streamline the dev process and keep user interfaces clean and consistent.
An end-to-end automated test using Cypress keeps Mediabank tight, validating the whole application and raising standards to the highest level at all times. All of this makes for a powerful tech stack that can deliver sturdy, user-friendly web applications built for scale and future-proofed for years to come.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-566" src="https://cms.uicentric.net/wp-content/uploads/2022/06/NEP-1-16x9-1-300x169.jpg" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2022/06/NEP-1-16x9-1-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/06/NEP-1-16x9-1-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/06/NEP-1-16x9-1-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/06/NEP-1-16x9-1-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/06/NEP-1-16x9-1-1568x882.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2022/06/NEP-1-16x9-1.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3>A partnership built to last</h3>
Of course, we already knew what features and tools users needed in Mediabank – our job being to find a way to make them work more efficiently and intuitively – but the project also had its challenges. The existing Mediabank team in Norway had already been working on the product for years and already had established routines. We needed to tread gently but slowly introduce new ways of working and ideas that were easy to get behind, letting the quality of the work do the persuading. We also needed to combine the ideas and team buy-in with extensive user testing, to fine tune the features that mattered most.
Overall, the Mediabank project was a lasting success, culminating in over six years of partnership. The exact statistics on how many millions of megabytes and minutes of footage have been used with NEP’s Mediabank are internal but, take it from us, great relationships never stick unless success follows.

Even award-winning technology needs nurturing 

FIFA – find someone who hasn’t heard of it. But, in case that’s you, the International Federation of Association Football is perhaps the most prestigious sporting body in the world, responsible for bringing over 200 national football associations together. It sets the world stage for nations to compete with one another, much to the planet’s five billion football fans’ delight.
The number of games played under FIFA are, frankly, unimaginable but, in World Cups alone, there have been close to 1,000 games played since 1930 – or approximately 86,000 minutes, excluding extra time, interviews, punditry and pre/post-match. Why is this important? When FIFA needed to make access to its international archive of footage easier and, more importantly, the selling of rights to this footage simpler, it needed a partner that could wade into the underbelly of its archive and organise it for everyone to see.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-560" src="https://cms.uicentric.net/wp-content/uploads/2022/06/FifaNews-1-16x9-1-300x169.jpg" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2022/06/FifaNews-1-16x9-1-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/06/FifaNews-1-16x9-1-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/06/FifaNews-1-16x9-1-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/06/FifaNews-1-16x9-1-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/06/FifaNews-1-16x9-1-1568x882.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2022/06/FifaNews-1-16x9-1.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
How? On the backend, the archive uses a video asset management system run by EVS – it asked us to build a custom web application that would sit over the top, making it accessible to broadcasters, journalists and clubs.
<h3>Talking tactics</h3>
As a creative engineering company, we’ve developed a deep understanding of MAM (Media Asset Management) systems with projects for the likes of UEFA and NEP. It’s this expertise that brought FIFA to our doors, and the reason we were able to confidently feed into and help FIFA capture their requirements, whilst quoting for the delivery of the web app. We pulled together custom UX, design and functionality for the app, planning in a full roadmap and set of timelines that would bring the project to fruition to hit FIFA’s exact needs.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1216" src="https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORT-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORT-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORT-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORT-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORT-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORT-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORT.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
&nbsp;
The MAM interface we built is a single page web application that gives users the functionality to manage photos, videos and documents interactively. To do this, we used Angular.js to take the complex parts of the system and make them flexible and dynamic. We used Javascript to pack it with interactive features, whilst bringing its design, styling and colour to life with HTML5 and LESS Stylesheets.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1217" src="https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-1-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-1-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-1-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-1-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-1-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-1-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3>Unpicking minute-by-minute</h3>
The project wasn’t without its challenges. To kick-off, we had to find a way for users to directly search and access content without creating new ones. To do this, we bypassed the ProjectID on every asset, creating fake EVS ProjectIDs in the background and managing the clean-up. We also had to future-proof the media player and give it basic editing functionality so journalists or broadcasters could mark ‘in’ and ‘out’ points. But every match is split into chunks too – from the first half through to post-match interviews – and so the player needed to work across segments, not just entire matches.
The default EVS encoding profile is also tricky when playing low-res or proxy files and isn’t set-up for HTML5 playback. It means when you ‘scrub’ a video, the experience is poor, jolted and frustrating. So we used an encoding profile, web server and delivery setting we’d already researched and developed for this exact problem at UEFA, which optimised playback and made scrubbing so responsive we could use hardware jog shuttles to control it.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1215" src="https://cms.uicentric.net/wp-content/uploads/2023/03/4_3-MAIN-300x225.png" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/4_3-MAIN-300x225.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/4_3-MAIN-1024x768.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/4_3-MAIN-768x576.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/4_3-MAIN-1536x1152.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/4_3-MAIN-1568x1176.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/4_3-MAIN.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
<h3>The final whistle</h3>
Whilst the quotable statistics are not released by FIFA, the project result hit the back of the net. We’d taken a complex backend system and placed a user-friendly, uncomplicated interface over the top – despite the inner-workings of the project being technically complex that required a significant level of detailed analysis and build.
Far from an own goal, FIFA was extremely happy with the result, engaging us to help with the provision of enhancements, general maintenance and support. Strike!

Digging into the archives of the world’s most well-known sports association – building a MAM for FIFA

With video-on-demand swiftly becoming the viewing platform of choice for consumers up and down the UK, Channel 5 badly needed to whip its service into shape. With a total rebrand in motion, the all new My5 needed a UX design overhaul from the inside out, guided by its viewers.
Around half the total population in the UK use video-on-demand (VOD) to stream their favourite TV shows. So popular are streaming services that the VOD market is projected to grow 7% by 2027, with linear TV – live shows on the box – falling rapidly.
With strong competition from the likes of Netflix, Amazon Prime, Channel 4’s ‘All 4’ and the Beeb’s ‘BBC iPlayer’, Channel 5 was getting left behind. It came to UI Centric for help with a total rebrand, turning its outdated ‘Demand 5’ VOD platform into the all new ‘My5’ – which we’re sure you know (and love) by now.
With this major rebrand came the opportunity to gut the inner-workings of Channel 5’s existing streaming platform. Disjointed, inconsistent, old and clunky, it left viewers frustrated by a poor user experience (UX) and hampered any meaningful improvement. Channel 5 asked us to wipe the slate clean, integrating new smart TV and mobile apps, a website redesign and a back-end update into My5. The big picture? Increase viewing numbers, advertising revenue and overall user satisfaction.
<h3>Watching viewers watch us</h3>
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-740" src="https://cms.uicentric.net/wp-content/uploads/2022/08/ViacomCBS-1-4x3-1-300x225.jpg" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2022/08/ViacomCBS-1-4x3-1-300x225.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/08/ViacomCBS-1-4x3-1-1024x768.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/08/ViacomCBS-1-4x3-1-768x576.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/08/ViacomCBS-1-4x3-1-1536x1152.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/08/ViacomCBS-1-4x3-1-1568x1176.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2022/08/ViacomCBS-1-4x3-1.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
Channel 5 initially asked UI Centric to focus purely on redesigning its Roku platform. However, this soon grew to bringing the entire suite of Channel 5’s apps and website in line with My5, based on the success of our team’s technical excellence and user-focused expertise with Roku.
Our approach was to make sure the entire project was rigorously user tested and entirely based on user research – from real people, up and down the breadth of the UK. This stretched from running individual user interviews to mass research projects involving 10,000 people. Some people like to watch on mute, others from bed or on a second screen. So we wanted to understand exactly what viewers needed from a VOD platform, to learn about their viewing habits and use the findings to make key design decisions. We also turned up the volume on market research, using listening and competitor analysis to set benchmarks for viewer expectations.
Once we’d run an in-depth technical audit of the platform, our UX design team began in earnest. Working with Envision prototypes, we created a fake living room in our offices, so we could bring in viewers to road test and validate every design iteration, then feed it back into the next round. We then launched products in a series of stages – MVPs that would be constantly built upon – moving from a basic VOD platform to adding in live channels, like Milkshake.
Throughout all of this, every round would sit in front of groups of users, constantly stress-tested and scrutinised, with bright ideas wrapped into the next round of features and functionalities – like adding ‘Live TV’. Although, clearly, revenue was an important factor for Channel 5, our design approach put the viewer first, it gave them a voice. We believe, if you do this, success will always follow.
<h3>Back to the cutting room</h3>
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-742" src="https://cms.uicentric.net/wp-content/uploads/2022/04/ViacomCBS-1-16x9-2-300x169.jpg" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2022/04/ViacomCBS-1-16x9-2-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/04/ViacomCBS-1-16x9-2-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/04/ViacomCBS-1-16x9-2-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/04/ViacomCBS-1-16x9-2-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/04/ViacomCBS-1-16x9-2-1568x882.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2022/04/ViacomCBS-1-16x9-2.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
&nbsp;
Of course, a project like this doesn’t come without a few mountains to climb. Today’s VOD viewers have incredibly high expectations – with services like Netflix to compare to – and these expectations also change all the time, as the market evolves. Equally, Channel 5 itself has a vast network of stakeholders, each feeding into the vision and bringing with them many moving parts. The refresh also needed to cater to everyone and anyone in the UK, including best practice accessibility requirements. So we did bags of UX testing, on text size, legibility, structure, with those who had poor eyesight guiding the way.
But, above all, Channel 5 had an old CMS and a huge library of existing content that needed integrating into the new designs in a logical and rational way. When the old system is a dinosaur, that’s a little scary. Of course, Channel 5 had to make changes to their existing systems to make this happen, namely its configuration service and APIs for video metadata that tell the platform things like where to store half-watched programmes. But as they couldn’t completely rebuild, we had to be smart about sending data from the backend to the frontend.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-842" src="https://cms.uicentric.net/wp-content/uploads/2022/04/my5-multple-tablets-laptops-300x169.jpg" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2022/04/my5-multple-tablets-laptops-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/04/my5-multple-tablets-laptops-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/04/my5-multple-tablets-laptops-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/04/my5-multple-tablets-laptops-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/04/my5-multple-tablets-laptops-1568x882.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2022/04/my5-multple-tablets-laptops.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
We also had to find an efficient way to build the frontend, to deadline, whilst the backend was still in flux. It’s a bit like calmly taking someone’s order whilst the kitchen is on fire. Add to that multiplatform delivery, across Roku, iOS, Android, TV and synchronising three different teams to all deliver the same closely matched architecture and it’s…tricky. Luckily for us though, we caught a break with the ad integration. My5 uses server-side ad integration, which means the ads are stitched into the programme from the source. So the pre, mid and post-roll is all served beautifully.
<h3>Viewership on demand</h3>
My5’s design overhaul worked. Hooking in millions of new users, video consumption increased by a whopping 66%. It represents a massive shift in viewership for Channel 5, bringing its VOD service into the present and future-proofing it for years to come. More importantly, great UX put it back on the map, increasing user satisfaction with a new app store rating of 4.7 stars.
Overall, the work was a resounding success. During 2022, My5 saw its third consecutive year of growth across streams and watch time. Echoing its success on the linear channel, drama was a key growth driver, with three of the top four launches of all time during 2022 – The Teacher, The Holiday and Maxine. And it continues – UI Centric remains a trusted partner for Channel 5 as its video technology grows. It’s not always about what’s on the box, it’s about what’s outside of it.

Increasing viewership by 66% with a UX design overhaul of Channel 5’s VOD platform

When Technicolor called us up with an urgent request for help, we responded swiftly. After a previous tech partner let the business down, Technicolor needed a major restart to its advanced, cloud-based content management system for film professionals. There were only 12 weeks to get the job done, but we’re no stranger to working at pace. The race was on.
Five BAFTAs, four Academy Awards, two Emmys and nearly 100 D&amp;AD Pencils – these are just some of the accolades awarded to Technicolor (with its supply-chain and logistics arm now rebranded as Vantiva), an international community of VFX artists and technologists. As a business, it creates, supports and distributes extraordinary content experiences all over the world. Wonder Woman, Harry Potter, Sonic The Hedgehog; all of these wouldn’t have made it to the big screen without Technicolor.
In the film business, project hitches are common. For Technicolor, an existing tech partner had failed to deliver to rave reviews and its project was left unfinished. It would need a total restart, if this industry-leading behemoth was to ever meet its agreements with a variety of famous studios. Technicolor came to UI Centric in need of help, with a time-sensitive, multi-million pound project that would become one of the most advanced media distribution systems on the face of the planet.
This system was called Technicolor Showcase, a cloud-based content management system for film professionals that gave around the clock access to content on any device, from anywhere, anytime, on a single, intuitive portal. That includes production services, content approvals, ops management for archives and orders and sales support for authorisation, sales collateral and content distribution.
With our deep broadcast video experience, Technicolor felt confident leaving the product in our hands.
<h3>Join us in the war room</h3>
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-575" src="https://cms.uicentric.net/wp-content/uploads/2022/06/Technicolor-2-16x9-1-300x225.jpg" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2022/06/Technicolor-2-16x9-1-300x225.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/06/Technicolor-2-16x9-1-1024x768.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/06/Technicolor-2-16x9-1-768x576.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/06/Technicolor-2-16x9-1-1536x1152.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/06/Technicolor-2-16x9-1-1568x1176.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2022/06/Technicolor-2-16x9-1.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
Whilst the design and development of Technicolor Showcase was still early on in its lifecycle, the project itself was quite far down the line. It meant an extremely tight deadline loomed to launch a completely new cloud-based infrastructure and modern user interface. To get it done, we went onto a war room footing, with all hands on deck and even key stakeholders at Technicolor coming on board to work from our London office during the project. This is how we like to work at UI Centric, with collaboration as one team at the core of all we do. It means collaboration, decision-making, speed and quality are all optimised to maximum effect. When we say we’re by your side, we really mean it.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-672" src="https://cms.uicentric.net/wp-content/uploads/2022/07/technicolor-1-300x223.jpg" alt="" width="300" height="223" srcset="https://cms.uicentric.net/wp-content/uploads/2022/07/technicolor-1-300x223.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/07/technicolor-1-1024x760.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/07/technicolor-1-768x570.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/07/technicolor-1.jpg 1212w" sizes="(max-width: 300px) 100vw, 300px" />
From a technical perspective, the portal needed to work seamlessly across web and iOS platforms. It’s built using Angular.js and Javascript, giving us the flexibility to respond dynamically across features and devices. A responsive layout made sure that, no matter what screen you’re viewing from, Technicolor Showcase could be used anywhere, on anything. It also uses HTML5 and LESS stylesheets, keeping web development streamlined – the former for richly programmed features and the latter a preprocessor for CSS to make styling efficient and organised.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1190" src="https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
For tablets, Technicolor Showcase is written in Objective-C, one of the best programming languages for iOS. It means the user interface is optimised for tablets, with a layout and design tailored to a tablet’s larger screen without losing any engaging features.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1191" src="https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-2-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-2-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-2-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-2-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-2-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-2-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/16_9-SUPPORTING-2.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
Within just three months, we produced a digital hub that turned heads, the first of its kind in the content space and at the leading edge of transformative design and technology. A perfect match for Technicolor. As a creative engineering company, we’ve got an unwavering commitment to quality, never sacrificing this in place of time, speed or budget.
<h3>Coming good on our promises</h3>
With this mantra – and our tried and tested formula of bringing specialists together – we delivered a portal that not only showcased Technicolors technical prowess but also came in on time, on budget and became a commercial success. We pride ourselves on always doing right by our clients, on transparency, ownership, honesty and delivering on our promises. On building close relationships with our clients that foster trust, whilst using deep technical, design and delivery capabilities to hit the mark as a team.
With over 5M+ assets and five petabytes (that’s over 1,000 terabytes) of content stored since its launch, the project was a true success. And it didn’t just showcase Technicolor’s industry-leading capability, it stopped the show.

Rescuing an award-winner

When the BBC first asked UI Centric to help rework the BBC Worldwide Store, it was the start of a long and fruitful relationship. One we’ve nurtured and delivered upon for nearly a decade. Now, with complex technical projects for services like BBC Learning English as our foundation, we’re the BBC’s agency of choice for UX, UI, development and design support, with nearly 20 of our own embedded in its teams.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1170" src="https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-3-4x3-1-300x265.png" alt="" width="300" height="265" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-3-4x3-1-300x265.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-3-4x3-1-1024x905.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-3-4x3-1-768x678.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-3-4x3-1-1536x1357.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-3-4x3-1-1568x1385.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-3-4x3-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
The BBC is the world’s oldest national broadcaster and also the largest, with over 20,000 staff. Globally, it reaches just under half a billion people and is widely respected by countries all over the world as being the finest example of a public service broadcaster. If you’re reading this from the UK, doesn’t that make you feel lucky? With such a huge following, schedule of programmes, suite of apps, websites and services, running the BBC on all counts is a huge undertaking. Specifically, its tech, UX, UI and design needs are vast, with constant innovation in motion. And despite its huge size, sometimes even a goliath needs a helping hand.
In 2015, help arrived. Working hand-in-hand with the Beeb, we were first asked to help with the UX and development of the BBC Worldwide Store, a service that gave anybody outside the UK the opportunity to buy and watch programmes anywhere in the world. Although the service was eventually wound down in 2017, UI Centric would be the main port of call for ongoing support and maintenance throughout – setting the tone for a long and fruitful relationship with the BBC that still stands strong today.
<img decoding="async" loading="lazy" class="aligncenter wp-image-1167 size-medium" src="https://cms.uicentric.net/wp-content/uploads/2023/03/BBC-TV-Sherlock-1-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/BBC-TV-Sherlock-1-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBC-TV-Sherlock-1-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBC-TV-Sherlock-1-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBC-TV-Sherlock-1-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBC-TV-Sherlock-1-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBC-TV-Sherlock-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
Based on this foundation of work, we have become the BBC’s trusted delivery partner for projects, large and small, across UX, UI, development and design. It’s a relationship so successful, we’re now embedding teams of our people in teams of their people, working alongside one another closer than ever before. As the story shows below, it demonstrates our ability as an agency partner to form long, trusted relationships with our clients that stand the test of time. 
A foundation of complex delivery
We’re now woven within the fabric of the BBC’s tech and design teams but, before this, we had to build on our reputation for delivering complex projects with evolving flexibility. We achieved this with nearly a decade’s worth of ongoing, high impact work, for services like the BBC’s Learning English programme.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1166" src="https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-2-4x3-1-300x225.png" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-2-4x3-1-300x225.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-2-4x3-1-1024x768.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-2-4x3-1-768x576.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-2-4x3-1-1536x1152.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-2-4x3-1-1568x1176.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/BBCHybrid-2-4x3-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
As part of the BBC World Service, BBC Learning English has been teaching people how to speak the language since 1943, with free audio, video and text to students globally, from Latin America to China. The resources are often delivered by full courses but much of the material is also available standalone, giving students the freedom and flexibility to learn how they learn best.
In 2018, we were tasked with helping the BBC take back ownership of its Learning English content, often scraped and plagiarised by unofficial rip-off merchants pushing their own programmes – occasionally even impersonating the BBC itself. Working closely with the BBC’s own Learning English team, we created a hybrid team built of product and backend owners within the BBC, combined with our own project managers and React Native app developers. 
Originally on the radio and later a dedicated website, the answer was to create owned and operated iOS and Android mobile apps, to wear the badge and make clear the official source of the BBC’s Learning English programme. It would also bring BBC Learning English into the modern world, available on the go and in bite-sized chunks. Being as the data only existed in web format, making this work for two mobile app UIs was a technical challenge. Using a web-based API, we had to be smart about client-side caching, scheduling data downloads and, of course, designing a UI and BFF (backend for frontend) solution that only pulled this data as and when necessary to optimise performance for the user. Shortly after launching, the app received a 5-star review in Web User magazine, 1M+ downloads in the first month and over 5M+ downloads on Android to date.
Move forward to 2020, and the BBC again asked us to step in to help with its internal branding facility – a service that manages the approval and distribution of brand assets to partners, advertisers and organisations that feature the Beeb. Within a tight timeframe, we built the backend and frontend, including infosec penetration testing. Although not available to the public, this unknown facility is crucial to the BBC, enabling managers to sort requests, allocate workflows for approvals up the chain and issue contracts. It’s a complex beast. Years later, the BBC is still using this internal tool without issue and zero bug fix requests.
<h3>Using hybrid teams for the modern age</h3>
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1168" src="https://cms.uicentric.net/wp-content/uploads/2023/03/20230328_114622-286x300.jpg" alt="" width="286" height="300" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/20230328_114622-286x300.jpg 286w, https://cms.uicentric.net/wp-content/uploads/2023/03/20230328_114622-976x1024.jpg 976w, https://cms.uicentric.net/wp-content/uploads/2023/03/20230328_114622-768x806.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/20230328_114622-1464x1536.jpg 1464w, https://cms.uicentric.net/wp-content/uploads/2023/03/20230328_114622-1568x1646.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/20230328_114622.jpg 1920w" sizes="(max-width: 286px) 100vw, 286px" />
Although our partnership started from humble beginnings, it has morphed into a hybrid team approach where we are one of very few agencies to provide domain experts and team support to the BBC. Having started at just one or two designers in-house, we now supply the BBC with around 20 staff in hybrid roles across a myriad of projects. Those roles span UX and UI designers, frontend and backend developers, full stack engineers, business analysts and project managers. And they all work on very different projects ranging from design and frontend development for the BBC’s Top Gear website to an integrated Java development team and QA tester for Britbox.
Of course, these in-house specialists always have tech support back at base too, with our team at UI Centric backing up the roles if anything gets blocked. From Javascript to AWS, our people provide microservices across the full development chain, on services like the BBC’s login portal or the video player used across platforms like BBC iPlayer. We also provide testing, manually and automated, writing test cases on an ongoing basis. 
In essence, whenever the Beeb has a tech or a design gap, we fill it. 
It’s true to say we have a special relationship with the BBC, one that has been built on prosperity, trust and hard work. It’s what we specialise in at UI Centric – creating hybrid solutions for clients that need a long-term partner they can rely on – and an area we so dearly love too. Perhaps, one day, we can do that for you.

BBC’s trusted delivery partner

When Harry and Meghan Markle got married in 2018, the world went mad for a Royal Wedding. It was a total and utter media frenzy. Sky News was looking for an opportunity to stand out, to give viewers an experience like no other. With groundbreaking UX and UI, facial recognition and the power of AI were about to seriously make headlines.
<h3>Innovation on a royal scale</h3>
Try to look past what you know now, back to 2018, when Harry was still a Prince and Meghan Markle was still that talented actor you knew from Suits – it was a year fit for an historic Royal Wedding. On Saturday, May 19th, 2018, around 29.2 million people tuned in to watch Prince Harry of Wales marry American actor Meghan Markle at Windsor Castle, England. It sparked a global media frenzy, with broadcasters fighting for the competitive edge to win viewers.
Sky News was one such broadcaster. Often at the leading edge of news journalism and technology, it approached UI Centric to help bring a powerful user experience to viewers during the Royal Wedding. One that would bring added value to its coverage and make it stand out from the crowd.
With public intrigue around the Royal Wedding at an all-time high, the who’s who of Harry and Megan’s guestlist was the ideal opportunity to be different. Of course, scrutinising the couple’s royal wedding guests is clearly must-watch TV for the British public, so Sky News decided to develop an interactive user experience that would deliver it.
<h3>An AI-powered game-changer</h3>
The idea was to use AI technology to power an automatic ‘who’s who’ of the crowd using facial recognition, with profiles brought up alongside live coverage, to gamify the news and gratify its audience. Working alongside AI specialists GrayMeta, we first designed the frontend single page application and video player to bring the viewing experience to life, harnessing Sky’s machine-learning workflow as we went. This involved using Angular.js, Typescript, HTML5 and SCSS Stylesheets.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-573" src="https://cms.uicentric.net/wp-content/uploads/2022/06/SkyNews-1-16x9-1-300x169.jpg" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2022/06/SkyNews-1-16x9-1-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/06/SkyNews-1-16x9-1-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/06/SkyNews-1-16x9-1-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/06/SkyNews-1-16x9-1-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/06/SkyNews-1-16x9-1-1568x882.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2022/06/SkyNews-1-16x9-1.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
Sky’s Royal Wedding ‘Who’s Who’ functionality used facial recognition to highlight public figures arriving on the day, stored as a makeshift guestlist to the right of the video player – with profiles to read about whichever you clicked. That might seem fairly standard in today’s world but, five years ago, facial recognition technology was cutting-edge. Just think about it – Apple had only just made it standard on iPhones and just about the only other place you’d see it was at the fiddly automatic passport gates through UK Border Security.
Once a celeb was spotted by our AI, it gave you details on who they were, how they knew Harry and Meghan and used on-screen captions and graphics to keep things visual. It meant viewers could search through to find their favourite celebs without needing to leave Sky’s live royal coverage for even one second. Hands on and self-guided, it was a celeb spotting session to rival any paparazzi reporter.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1189" src="https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-4-16x9-1-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-4-16x9-1-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-4-16x9-1-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-4-16x9-1-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-4-16x9-1-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-4-16x9-1-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-4-16x9-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
After the big day, Sky published a video-on-demand version of the Royal Wedding that gave viewers the option to pause and rewind, as well as follow an individual guest arrival.
<h3>No challenge too great</h3>
We had to design, build and deliver this app in only two and a half months. Not only that but no official royal guestlist was published before the event, so our facial recognition technology had to work fast and efficiently. It was tricky at best. To solve the problem, we worked alongside Sky journalists to scour social media and news articles looking for clues about who might be coming. That work resulted in a list of 800 anticipated guests – and our AI would need 10-15 facial images of each uploaded to stand a chance on the day. That’s over 8,000 images! It took us two full months to pull it together.
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1188" src="https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-3-16x9-1-300x169.png" alt="" width="300" height="169" srcset="https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-3-16x9-1-300x169.png 300w, https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-3-16x9-1-1024x576.png 1024w, https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-3-16x9-1-768x432.png 768w, https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-3-16x9-1-1536x864.png 1536w, https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-3-16x9-1-1568x882.png 1568w, https://cms.uicentric.net/wp-content/uploads/2023/03/SkyNews-3-16x9-1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" />
The functionality was built using cloud infrastructure from AWS for speed and access to scalable machine-learning. Combined with GrayMeta’s data analysis platform and our interactive UI design, Amazon’s Rekognition video and image analysis platform cherry-picked our celebs from the crowd in real-time, whilst tagged metadata put the faces to the names and got stored in the video player. Footage from an outside broadcast van near Windsor Castle’s St George’s Chapel sent a live video feed to AWS, where it was run through its AWS Elemental MediaPackage and distributed back to Sky through the Amazon CloudFront content delivery network.
<h3>A royal success</h3>
The broadcast raked in over 10 million views and over 100,000 concurrent views. It picked up worldwide PR coverage, ranging from The Observer to The Verge to The Hollywood Reporter and The Washington Post. As far as news coverage goes, it was the talk of the town.
This is just the start. Second-screen viewing, information-rich content and gamified video-on-demand is coming into a boom. Look at Sky F1 – you can ride on-board any driver on the grid whilst live coverage plays side-by-side. And, whilst the technological advances are there, UX and UI must keep up, to give viewers the best watching experience around. Which is why we’re here, as a creative engineering company you can trust to take the moments that matter most to the next level through game changing design, UX and technology.

Innovation on a royal scale

Heard of Pix? Unless you’re a film professional, probably not – but this production management powerhouse helped bring some of your favourite movies and TV shows to the screen; Spiderman: No Way Home, Squid Game, Top Gun: Maverick, Disney’s Mulan, to name just a few. Pix is an industry-leading production management platform built for creative collaboration, without less admin. Leading movie studios, directors and producers use Pix for remote access to pre-prod. and production content that brings creative teams together with a suite of collaborative tools. 
Although loved and respected by movie producers the world over, over time its products had become outdated, hindered by technical debt and slow development. Regular feature updates had all but stopped and its loyal fan base turned frustrated. Partnered with a degrading user experience, this became a major driver for change whilst new competitors began emerging and taking up a larger piece of the pie.
So, Pix came to UI Centric for a makeover – a total redesign and rearchitect of its platforms, and refresh on agile ways of working within UX and UI. Pix needed a next-gen level up that would see off the competitors nipping at its heels and dominate the space, and we would provide it.
<h3>A crowd-pleasing redesign</h3>
&nbsp;
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-570" src="https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-2-4x3-1-300x225.jpg" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-2-4x3-1-300x225.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-2-4x3-1-1024x768.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-2-4x3-1-768x576.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-2-4x3-1-1536x1152.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-2-4x3-1-1568x1176.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-2-4x3-1.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
Our approach was user-centric, bringing in new designs that we knew users would love – because we asked them. When you’re creating a product for a unique set of specialists, it’s crucial to understand exactly what they need. To develop a deep understanding of how a film professional prefers to work, collaborate, create and edit. We ran a series of workshops, product sessions and user interviews to identify and prioritise the workflows and feature requests that mattered to them. Then, using our experience and client feedback, we used this as a foundation for rebuilding Pix’s usability, functionality and, ultimately, its reputation for being great value.
With this under our belt, we began wireframing and creating prototypes. Again, we sent these back into user testing, with feedback harnessed to optimise the designs and constantly refine. It formed an evolving, iterative process that helped to land Pix at the core of what a film professional needs, whether you’re a director, a sound designer or a VFX artist. It placed the audience at the heart of the project, its community integral to the outcome. And when the community is small, tight-knit and dominated by word of mouth, that means a lot.
This is based on our fundamental belief that products should be designed for the user, not for the designers or the technology. Real people first.
<h3>Facing down the plot twist</h3>
&nbsp;
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-569" src="https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-1-4x3-1-300x225.jpg" alt="" width="300" height="225" srcset="https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-1-4x3-1-300x225.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-1-4x3-1-1024x768.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-1-4x3-1-768x576.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-1-4x3-1-1536x1152.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-1-4x3-1-1568x1176.jpg 1568w, https://cms.uicentric.net/wp-content/uploads/2022/06/Pix-1-4x3-1.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" />
Of course, no plot comes without a twist. We ran into several obstacles that needed to be overcome. Firstly, Pix had never worked with an outside agency before. So, we gradually introduced new ways of working over time, giving internal teams at Pix to learn and lean into it. For example, UX and design was previously seen as one combined discipline at Pix, but the team recognised the need to separate them out. This meant a change to the roles and structure within the team. With us as their guide, they were happy to shift.
From a technical perspective, the challenge was to switch away from a monolithic codebase in Angular to an updated architecture and framework in React. This needed a smooth transition that wouldn’t interrupt service to existing clients. We first analysed the existing codebase for limitations and dependencies, before breaking it down into smaller chunks that would work within the new React architecture.
Working extremely closely with Pix’s internal developers, we migrated the system over one module at a time whilst maintaining backward compatibility and feature parity. As our UI components were designed to be modular and reusable, it meant separating the view from the business logic. The code was then also refactored using modern Javascript syntax and best practice.
The iOS app was also redesigned and technically overhauled. After linking up with user research to identify its key needs, we based a new architecture on modern iOS dev concepts like modularisation and reactive programming. Similarly, we broke down the app into smaller, bite-sized chunks that could be developed, tested and deployed independently. We also used a reactive programming paradigm using RxSwift, for easier handling of asynchronous events and consistently responsive UI.
The upgrade thoroughly brought Pix into the modern age. 
<h3>Back in front of the lens</h3>
The overall results lit up the room. With this redesign, products were given a new lease of life and greater features, like a custom-built video playback, review and edit tool that gave editors multiple playheads and side-by-side playback. Pix customer satisfaction shot up, delivering greater value, an enhanced user experience with new features released regularly. The competition? Didn’t make the cut.
The project shows how design that puts users at the core of everything it sets out to achieve, ultimately wins more customers in the end. Pix is back in the spotlight, the modern age and now continually innovating in the space, now and in the future. 
That’s a wrap.

Redesign and technical overhaul for award-winning film industry leader Pix

The BBC wished to launch a Learning English app to extend the service beyond their website offering. We were delighted to be awarded the contract that complimented the work we had done previously with the BBC.
We engaged with the BBC team and undertook parallel development of the iOS &amp; Android apps, adopting a collaborative approach using Agile project management principles. The development required close working between us and the BBC team with daily meetings to ensure we were fully aligned.

English learning application

In a partnership exceeding 5 years, we have collaborated with NBC on the technical delivery of a suite of mobile and 10-foot streaming.
Through implementation of advanced analytics and A/B testing we helped NBC optimize the overall product as well as targeting personalization, driving up user engagement and content discovery.
<img decoding="async" loading="lazy" class="alignnone wp-image-565 size-full" src="http://ec2-13-40-64-63.eu-west-2.compute.amazonaws.com/wp-content/uploads/2022/06/NBC-2-4x3-1.jpg" alt="" width="1920" height="1440" srcset="https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-2-4x3-1.jpg 1920w, https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-2-4x3-1-300x225.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-2-4x3-1-1024x768.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-2-4x3-1-768x576.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-2-4x3-1-1536x1152.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-2-4x3-1-1568x1176.jpg 1568w" sizes="(max-width: 1920px) 100vw, 1920px" /> <img decoding="async" loading="lazy" class="alignnone wp-image-564 size-full" src="http://ec2-13-40-64-63.eu-west-2.compute.amazonaws.com/wp-content/uploads/2022/06/NBC-1-16x9-1.jpg" alt="" width="1920" height="1080" srcset="https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-1-16x9-1.jpg 1920w, https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-1-16x9-1-300x169.jpg 300w, https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-1-16x9-1-1024x576.jpg 1024w, https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-1-16x9-1-768x432.jpg 768w, https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-1-16x9-1-1536x864.jpg 1536w, https://cms.uicentric.net/wp-content/uploads/2022/06/NBC-1-16x9-1-1568x882.jpg 1568w" sizes="(max-width: 1920px) 100vw, 1920px" />
&nbsp;
&nbsp;
&nbsp;

Streaming experience driven by data insights

When Channel 5 went out to tender to rebuild the My5 stream service away from the incumbent platform provider, they were looking for a partner that would not simply deliver against their requirements but would also bring pro-active thinking and a pragmatic delivery approach into a multi-provider environment.

MY5 multiplatform OTT 

Whilst undertaking the design and development of the new Wilderness Reserve guest website and apps (please see <a href="../wilderness-reserve/">here</a> for more details), UI Centric were also tasked with designing a brand-new back office management platform, including a custom CRM, new booking engine, bespoke activity configurator and staff management tools. 
Learnings from a 1-month discovery phase highlighted shortcomings in the existing systems and processes as well as informing the design of new tools and capabilities required to facilitate the offerings available through the new guest website and apps.  
Bookings can be taken on the phone or via email and made through a bespoke, interactive property availability calendar. Activities, from the simple to the complex and be completely customised and configured, allowing Wilderness Reserve staff to set pricing, availability, staffing requirements and additional ‘in-activity purchases’, amongst many other things.  
Complex and variable pricing models can be applied to each individual property which in turn feed into the booking engine presented on the guest website.  
Permission-based access to features and content enable each staff member to have a customised view of their schedule and activities.  
Tech Stack 
Our aim was to build a maintainable, flexible and scalable solution using a technology stack that is aligned with the expertise of the in-house technology team at Wilderness.   
The backend infrastructure was built on top of Azure Cloud to leverage its fully managed services, such as Azure AD and AD B2C for authentication and authorisation, Azure Functions for serverless worker processes executing various background tasks, Azure WebService to host the automatically scaled backend application, Azure AKS to build a Kubernetes cluster around CMS behind the marketing website with built in redundancy and scalability. 
All application data is persisted in a PostgreSQL database cluster to achieve a greater resilience. The infrastructure was created and updated via continuous delivery pipelines using Infrastructure-as-code and powered by Azure DevOps services. The backend system, which provides a centralised data access, business logic and API layers is built with .net core (c#) framework.

Back office management platform and booking engine 

Wilderness Reserve approached UI Centric to improve the digital offering to their guests. The incumbent website and processes in place had numerous usability issues, in addition to creating unnecessary work and overheads for the sales staff, management and guest ‘hosts’.  
The project commenced with a 1-month discovery phase, giving the UI Centric team an opportunity to observe and interview staff and guests as well as deep-dive into the processes and technologies that underpinned the operation to truly get under the skin of how the business was being run.   
As a result of the discovery initiative, we proposed a full digital transformation and strategy roadmap for the next two years.  
From a guest perspective, a brand-new website was designed, developed and deployed, enabling guests to book and pay for accommodation, browse and purchase food, drinks and activities, in addition to inviting guests to join them as part of their stay. 
Complimentary iOS and Android apps were built to enable guests to manage their stay (including the booking of activities and catering, signing of disclaimer forms) as well as acting as their digital key for them to gain access to their property  
Additionally, a full back-office management platform was designed and developed to compliment the guest-facing platform – full details of which can be found <a href="../wilderness-reserve-2/">here.</a>
Tech Stack 
Our aim was to build a maintainable, flexible and scalable solution using a technology stack that is aligned with the expertise of the in-house technology team at Wilderness.  
The frontend web applications, such as the Marketing website, Guest portal and Backoffice portal are developed with React.js and Typescript and the mobile applications use the React Native framework to achieve a high level of code reuse across all frontend apps and provide a native user experience. All frontend applications access the backend services via GraphQL API endpoints. 
The backend infrastructure was built on top of Azure Cloud to leverage its fully managed services, such as Azure AD and AD B2C for authentication and authorisation, Azure Functions for serverless worker processes executing various background tasks, Azure WebService to host the automatically scaled backend application, Azure AKS to build a Kubernetes cluster around CMS behind the marketing website with built in redundancy and scalability.  
All application data is persisted in a PostgreSQL database cluster to achieve a greater resilience. The infrastructure was created and updated via continuous delivery pipelines using Infrastructure-as-code and powered by Azure DevOps services. The backend system, which provides a centralised data access, business logic and API layers is built with .net core (c#) framework.

Book and manage your Suffolk stay 

In conjunction with the launch of their 4th member’s location in Knightsbridge, London, Pavilion approached us to reimagine their online offering with a new website and members-only app. 
The Pavilion website was redesigned from the ground up to highlight and facilitate the booking of additional offerings the new location would provide; member’s only events and talks, office and meeting room hire and a new restaurant. 
Additionally, a custom membership application process was designed, built and integrated into Pavilion’s existing CRM.  
Once their application was approved, members could download the iOS or Android app to manager their membership and bookings from the convenience of their phone.

Private members’ club – a digital transformation

Diageo is a global leader in beverage alcohol with a large collection of brands across spirits and beer, sold in 180 countries.
We were approached with the goal to create a product that gives customers the ability to easily purchase a personalized bottle of some of Diageo’s high-profile brands including Bayley’s, Captain Morgan and Don Julio, and to ultimately increase brand loyalty. Creating a unique gift through personalization enables family and friends to celebrate some of life’s unforgettable memories and occasions.

Product personalisation

Iron Mountain’s ‘Smart Vault’ is a digital content repository and media asset management platform at enterprise scale for the unique needs of content owners and creators. Smart Vault features a world class security to protect assets across their entire lifecycle &#8211; from analog or physical format to digitization, digital preservation, and distribution.
We were entrusted with the project to completely overhaul the user experience and visual design to bring the Smart Vault from a very dated looking interface with unintuitive workflows and too much complexity to a modern and reimagined media asset management platform.

Monetizing your media archive

The Club One Las Vegas App is a mobile portal and loyalty program for Las Vegas’ downtown casinos including The D, Golden Gate and the brand-new Circa Resort, which opened in late 2020.

Digital loyalty application

PIX System is a market leader in offering remote access to production content and tools that enable creative collaboration for film professionals and studios. In 2019 we have embarked on a journey together with PIX to completely re-envision their platforms for web, desktop, iOS, tvOS as well as the administration dashboard, and create a whole new generation of products.
Through a series of workshops, product sessions and user interviews, the team has learned user priorities, user journeys, preferences and feature requests, and subsequently optimized workflows, improved the usability and added new functionality to further enhance the value that PIX is offering to their clients.

Video production platform 

With its Lightfield Backlighting technology, Leia created the basis for the next generation medium that lets users experience 3D imagery with a natural sensation of depth without using 3D glasses or eyewear. With Leia’s technology as a cornerstone RED Digital Cinema launched the Hydrogen One phone in 2018 to break into the smartphone market.
To support the launch of this ground-breaking technology, we developed an entire ecosystem of tools to enable third party developers to submit, publish and monetize their holographic games and applications onto the Hydrogen One. This body of work consisted of a full-blown web-based developer dashboard, with the main purpose to submit, publish and monitor applications. But developers could also retrieve documentation on Leia’s SDKs as well as our custom built In-app purchase and subscription SDK.

Holographic games and apps ecosystem

10x are developing a cloud-native technology platform to enable their client banks to engage their customers with more timely, relevant and personalised experiences.
With 30 plus delivery teams working across definition, architecture, backend, back-office, integration and front-end development, the 10x solution is large and complex. We were originally asked to assist finalising the user experience and design for a customer specific front-end and to lead the front-end development across iOS &amp; Android.

Making Banking 10x Better

Three Media provide media consulting services and specialist products and applications within the media sector.
When they were looking to evolve their complex XEN: product suite, they came to us to assist them in redefining the user experience and designing the user interface.
The complex XEN: Pipeline enables users to:
&#8211; discover, analyse and identify assets and files
-provide a master metadata and artwork repository
-manage the receipt, creation, curation, validation and delivery of packages
-provide comprehensive “What If” workflow design and optimisation capability
&#8211; enables supplier self service facilities.

Simplifying a complex product

Nevion’s market leading VideoIPath application suite is used by broadcasters, service providers and other organisations across the world to control their media networks and to orchestrate their services.
With clients including BT, BBC, CBC Canada, France Télévisions, Optus, Singtel and TV 2 Norway, Nevion identified the need to redesign the interface for the entire suite of applications, ensuring that the user experience matched the functional capabilities.

Network configuration solution

The new Time Out experience went beyond a redesign. In the years spent collaborating – with our multidisciplinary team collocating with Time Out– we together built a sophisticated yet intuitive multiplatform customer experience.
We understood how important it was for Time Out readers to access valuable content anytime, anywhere, and on any device. And with our commitment to continually develop stronger and more innovative solutions across all devices and consumer touch points, the experience had to be truly responsive.

Print to digital evolution

When Technicolor approached us with a time-sensitive, multi-million-pound project hanging in the balance, they knew that our deep broadcast video experience was key to delivering one of the most advanced media distribution systems in the industry.
With the platform’s design and development still only in its infancy – and at an advanced stage of the project – UI Centric were drafted in to tackle an extremely tight deadline and deliver a new cloud-based infrastructure and modern user interface. We invited key stakeholders from the Technicolor management team to co‐locate in our London office during the project to maximize collaboration and create an environment that would produce optimum project velocity.

Secure media distribution

FIFA had identified issues with their legacy technology which had been impacting their ability to promote and sell FIFA archive content directly to its customers.  We began working with FIFA in 2017 to identify opportunities to make their archive video content available directly to its partners via a self-service facility.
Led by an in-depth analysis of their requirements and the design of the user experience and associated workflows, UI Centric designed and developed a transformational, class leading front end solution. We worked closely with EVS, FIFA’s incumbent media asset management provider, to integrate all the required processes and workflows into their back-end MAM application.

Custom video archive system 

DXC engaged us to undertake an end-to-end redesign for their new electronic medical record (EMR) application. Available as both a native application and web UI, the EMR needed to comply with strict clinical design requirements encompassing accessibility, patient record security and cross device compatibility.
A ‘white label’ user interface was created to allows the branding of individual healthcare providers to be applied. Particular attention was given to the visual hierarchy of content, ensuring that important health-related notes and diagnoses are always prominent and easily accessible.

Digital healthcare management

With a host of unofficial quizzes available, Audible, in conjunction with Pottermore, wanted to release the definitive official Harry Potter quiz on Alexa devices
With custom graphics for the Echo Spot and Echo Show devices and custom audio for all voice interactions, the game provides new questions for each player on a daily basis. Players have a choice of either multiple choice or unprompted answering, and the game allows multiple players to play on a single device/account.

Official Harry Potter Alexa quiz

Zest provides over 350 medium-to-large businesses with the technology to power their employee benefits programmes. We were selected to completely reimagine the employee experience for choosing, managing and taking advantage of their company provided benefits.
A strong focus was placed on providing a user experience that facilitate employee self-service, which in turn reduced support overheads.

Self-service employee benefits platform

Millions of viewers from across the U.K. and Europe flocked to TVs and connected screens the Royal Wedding of Prince Harry and Meghan Markle. For Sky News the historic event has become a singular opportunity to bring viewers a powerful, interactive experience and a world first in the way it uses machine learning to enhance the user experience of a live-streamed news event.

Live video enhanced by machine learning

The governing body of European football began working with us back in 2010 to redesign their media asset management solution to specially enable external customers to access, order and receive archive footage under strict user permissions. This external facing B2B solution therefore needed a customer experience that rivalled that of high-end consumer digital products.

10+ year collaboration

NEP wished to redesign and develop their Mediabank application in order to provide their customers with an exceptional media asset management experience.
They were also looking to add more features appropriate to customer and business requirements, something made difficult with the existing platform.
Whilst incredibly capable and rich in functionality, Mediabank’s overall user experience was complex and unintuitive.