The new UI increase the traffic while taking care of customers engagement with products

Industry

Technology

Angular Angular Material AWS Bitbucket CLI cypress Docker Expressjs Github Actions Lighthouse OpenID Client Play Framework Postman Typescript

Introduction

We helped Universal Pictures increase traffic, create seamless login flows & improve customer product engagement with a new user interface

About Universal Pictures

Universal All Access (Universal Pictures Home Entertainment, the home video distribution division of American film studio Universal Pictures) Rewards portal is a social platform that enables automated targeting/re-targeting of shoppers to extend customer relationships beyond the store aisle. It allows customers to engage socially with the brand, which consequently influences their purchase habits and inadvertently encourages a similar kind of pattern among their connections to maintain a continuous channel of brand awareness through social media. The portal helps in maintaining a perpetual dialogue via contests and promotions, rewards and gamification, targeted couponing, and purchase validations with new customers while simultaneously establishing a rock-solid customer base.

Impact

Adapted the completely new UI on registration and login pages to increase the traffic spikes.
Extend the registration and login workflow to allow Universal to integrate the process into their games (e.g. The Forever Purge).

Challenges

The company wants to keep its visitors engaged while visiting its website. To achieve this goal, they want to integrate the Thrillworks game so that users should feel engaged with the portal.

The company needed a better Ul for the registration and login pages to increase the traffic spikes While taking care of customers and their behavioural engagement with products and the brand.

The main challenge is to extend the registration and login flows to allow Universal to integrate & align the process into their games. We’ve to track users with a unique identifier who register and log in through these games and, after that, create a validation/forwarding/redirect page on the All-Access site to push the users into the game once they are already logged in.

Approach

NashTech worked closely on the business requirements to identify key areas and integrated a section on Universal portal UI to play the Thrillworks game. We have extended the registration and login flows to allow Universal to integrate the process into their games as well. Our developers implemented a completely new UI on registration and login pages to increase the traffic spikes and simultaneously capture meaningful geographical information of customers and their behavioural engagement with products and the brand.

Solution

NashTech worked closely on the business requirements to identify key areas. After all the criticalities were identified, we started building the portal in Knolway (NashTech software development methodology) following a two-week sprint schedule. The user interface was built on Angular 8 with modern web libraries.

We optimised the user interface to adapt the game section and registration/log-in page to every possible extent to keep the user experience as smooth as possible. Architecturally, the entire portal was broken down into multiple logical services, distributed as microservices, each using Reactive Manifesto for development needs, making all API communication asynchronous and non-blocking.

This below figure shows the main features of the UNIVERSAL PORTAL.

Validate Purchase
Contests
Rewards
All-access (based on user subscription)
My all-access
My Movie features
Earn Points

While implementing this game feature, we considered all three perspectives:

User journey for new registration.
User journey for a registered user who needs to log-in
User journey for a registered user who is logged into an All-Access session.

1. If a new users register, then the journey would be like this:

The user allows redirecting to the registration page. With the new implementation, the intelligent UI can identify if the user is landed with some source parameter (e.g. src=TheForeverPurgeGame) and can take decisions for further action.
After completion of the registration, the user sees a thank you page and to notify the user an email is sent for verification.
When a user clicks on the above said verification link it is taken to our login page identifying URL params(e.g., src=TheForeverPurgeGame) .
The user visits a login page, enters the login credentials, and logs in to the Portal.
The user logs in, receives the regular welcome email, and is automatically moved to the validation/redirection page which will then open the newly implemented game’s page/tab. For Authentication JWT is implemented in sync with the games’ pages via HTTP headers or URL queries.

2. Already registered user, then the journey would be like this:

The user visits a login page that would include something in the URL like src=TheForeverPurgeGame, enters the login credentials, and clicks the login button.
The user logs in and is automatically moved to the validation/redirection page which will then open the game’s page/tab. For Authentication JWT will be passed onto the games’ pages via HTTP headers or URL queries.

3. User journey for a registered user who is logged into an All-Access session:

The user visits The movies page (e.g Forever Purge game) and does not need to log in. For Authentication JWT will maintain the session and will be passed onto the games’ pages via HTTP headers or URL queries.

The outcome

More user traffic achieved

They adopted the completely new UI on registration and login pages to increase traffic spikes. The user engagement was increased to the Universal Portal. We always care for customers and their behavioral engagement with products and the brand.

Performance of the application

The final product could perform extremely well under high traffic spikes because all communication was done in a non-blocking & async fashion and scale-up was easy under the microservices architecture spectrum.

Successfully implemented the non-blocking environment

The user interface was developed in such a way as to facilitate a non-blocking environment, essentially adding to the best user experience and allowing the generation of data holding critical value for branding needs.

Easy to maintain and debug

All the services & modules are now independent. This allows the developers to maintain the project better so that the faulty code is easily identified, debugged and tested efficiently.

Implemented Thrillwoks Game Architecture

To increase the user experience by enabling ease in routing & workflows throughout the application and also enhance the quality of the animations used in the application.

Extended registration and login workflow

Extend the registration and login workflow to allow Universal to integrate the process into their games (e.g. The Forever Purge). It also enables the collection of registration email content if registered from the game. SSO is implemented from a UI perspective as well.