Mercer | Mettl Assessment Platform 2.0

Product Case Study

Built for Modern Web

Mercer | Mettl's Platform is a robust online testing platform for conducting remote online examinations. With its ready-made question-bank, end-to-end exam management and 100% cheating-free environment, now brought to modern web.

This case study explores the problems identified, methods we used to solve them and the end-result.

See Text-only Version

Overview

Quick Glance

Recreation of Mercer | Mettl's Assessment platform was aimed to solve the usability problems that were part of the platform from the very beginning.
But now affecting the UX and Usability of the platform drastically.

Another objective for this project was to bring the platform to modern web standards and organisation's design system, which will enable to cater to an international audience.

My Role #1

Lead Designer

To lead the project, manage multi-disciplinary teams and create product documentations.

My Role #2

Interaction Designer

For creating designs, components, elements and overall structures.

My Role #3

Visual Designer

For Design handover, version control, File management and easier develper hand-off.

Identifying Problem

What seems to be the problem, Officer ?

Anchor #0

Heurisitic Evaluation by Design Team

First step of recreating the product is to understand what the product is, and how it wagers against the heuristic metrics.

This way, we can understand the product and see where the problem lies before initiating the interviews.

Anchor #1

Feedbacks anchored the investigation

Combining years of direct client feedback and the platform feedback mechanism.

We identified certain vital aspects to anchor further investigation, conduct user interviews, and identify actual pain points.

Anchor #2

The Interviews guided us on da wae

We’ve managed to conduct a series of interviews

The people we interviewed, ranged from experienced to new users and, from general to advanced audience to understand the behaviour of a candidate and the assessment journey holistically.

The Problems

These are the problems that were identified.

Problem 01 / Design - Oriented

Lost Navigation

The main navigation elements were placed in an unorganised way, which causes severe lag in continuous navigation and is challenging to identify when using higher screen resolutions.

It leads to adding more frustration in an already frustrated test-taking environment.

Problem 02 / Design - Oriented

Outdated UI

People unanimously agreed that the platform looked visually dated and out of touch with modern website design.

Problem 03 / Design - Oriented

Un-Intuitve Test

The test experience is not intuitive; interaction feels out of place and doesn’t sit right with the modern websites people are used to.

Problem 04 / Backend - Oriented

Slow Website

The platform was slow to load and/or appeared to look slow compared to similar websites, and people were frustrated.

They expected the website to be as fast as modern websites, if not faster.

The opportunity discovered....

Can we re-create a platform which is blazingly fast,
easy to navigate, modern and intuitive?

The Goals

Defining the milestones for the project.

Clear, crisp and concise goals needs to be defined which will be used to focus on what's really important and upon finishing the project, these Goals will be metrics that measures the overall success of the project.

These are the main goals for this platform that needs to be conquered to be considered successful.

Goal #1

Easy to Navigate

People should not be left wondering to identify the next steps.

The navigation pattern of the new platform must conform to the modern and responsive navigation paradigm, with highlighted identifiers, and scalable on high-resolution screens.

Goal #2

Make it Modern

The platform's user interface should be visually refreshed and use the organisation's new dynamic design system, and extend the support to incorporate new functionalities in the future.

And resonates with modern web sensibilities.

Goal #3

Intuitive & Natural

The interface, interactions, and elements should feel intuitive, native to the device, and assist people with their tests without overloading information.

It should NOT push them to learn new interaction patterns.

Goal #4

Make it Fast!

The new platform should have a competitively fast performance by improving Time-to-Interaction.

This will increase the overally perceived interface responsiveness and push it in the realms of modern web.

Ideation and Iteration

Let's start the Design phase

Design Tool #1

Pen-Paper

For getting started, ideation, brainstorming, and lots of experimentation

Design Tool #2

Adobe XD

For creating designs, components, elements and overall structures.

Design Tool #3

Zeplin

For Design handover, version control, File management and easier developer hand-off.

Design Tool #4

The power of failing....fast.

Team went through several rounds of ideation and enforced a fail-fast methodology to experiment.
We started trying out new and innovative design patterns, which builds upon the exisitng UX and make the interactions more cohesive.

We spent ~ 1-1.5 months for the ideation and iterations before finalising a shippable design candidate.

Design Workstation and the WIP

The new designs were thoroughly vetted by the teams involved and necessary improvements and changes were done to contain the scope of the project but without comprising the underlying UX of the new product.

The heurisitic analysis of the new system was done by the Design team for each iterations of the new design to see if the solution proposing are effectively solving the problems at hand or not.

This is what we had...

Take a closer look.

Two sizes. Four finishes. Stainless steel and glass design.

And then we created...

Platform for New Generation

After a battling pandemic and the rigorous development cycles for more than a year, We were able to ship the first release of the new and improved Assessment platform.

It was loaded with a brand new interface, new features and revised implementation of existing features and overall better UX.

Watch in Action

New Generation.
New Platform.

The new platform was specifically created to solve the UX issues that I've highlighted in above sections.
It also aimed to refresh the interface and bring modern sensibilities for newer generations.

The added support of Responsive design, and end-to-end Internationalisation helped us open the platform to international audience - who can share the same assessment experience irrespective of geography and the language.

Turn the dial upto eleven.

By using latest technology stack and best practices, combined with an upgraded flow of the assessment journey.

We brought the platform to modern web.

2x

faster as compared to the Original Platform.

The Phases

Assessment Journey has been divided into 3-Phases

Phase 01

Diagnostics

Candidates needs to diagnose their systems, fill their credentials and prepare for assessment.

Phase 02

Assessment

This is where the candidate tests their skills and experiences the challenges.

Phase 03

Confirmation

Finally, candidate ends their assessments and completes its journey.

Let's take a close look

Phase 01

Pre - Assessment Diagnostics

Before the assessment begins, Candidate has to diagnose their systems, provide the  permissions, and verify their personal information to begin the actual assessment.

There are certain stages that candidate has to go through before the fun begins.

Introduction Screen

...where it begins.

Candidates begins their assessment journey by landing on this interface, which showcases the the most important information for a candidate.

Information about the assessment, as well as, the best practices to have a positive experience.

System Permissions

Candidate provides us with the necessary system-level permissions, and all the permission-level diagnosis is taken care of through an automated system.

Ensuring everything works before working.

Candidates begins their assessment journey by landing on this interface, which showcases the the most important information for a candidate.

Information about the assessment, as well as, the best practices to have a positive experience.

Choose your starting point.

Section details act as a perfect opportunity for candidates to review the sections, understand the assessment flow and plan ahead.

An important point in assessment journey to formulate the stratergy.

Phase 02

Assessment begins

This is where the magic happens.

New Assessment interface aims to solve the major UX issues - ranging from Navigation blunders, better implementation of exisiting features which pools towards a great experience for the candidates.

Upgraded Interaction

Navigation

By updating and categorising the navigation elements in the interface, We created a much better navigation paradigmn than previous iteration.

Element Restructuring

Focused

By reducing the clutter and focusing on what really matters for candidates, We created a simple yet powerful interface.

Ease of Use

Easy

By focusing on ease of use, we created a platform which is equally usable by candidates of any demographic.

Follow the Instructions.

By combining the information related to assessment as well as per-section instructions, candidate can consume the information from a single interaction.

And all this, without cluttering the interface whatsoever.

Assessment Overview

See the Progress

Before ending the assessment, Candidates wanted to view the progress they've made.

To solve the problem, we created an assessment overview segment which allowed candidates to view overall progress as well as per-section level progress, with clear indicators of how many questions they've answered, marked and left unattempted.

Phase 03

...and it ends

Responsive Platform

Available on multiple devices and resolutions.

This is where the assessment is marked as concluded.

Candidate is greeted with a cheery message, along with quick view of the result, real-time report generation and further instructions about the next steps in the assessment journey.

The Mobile

Responsive Platform

Accessibility Compliant

The new platform has also been assessed to the latest accessibility standards by WCAG to provide a better UX to all users.

And the new platform worked.

The new design was accepted by the users with positive thoughts.
And the feedback recorded via our analytic tools was exactly what we wanted to achieve with the new platform.

Key learnings

What did I learned?

Handling a product of this scale and size, and revamping it from the scratch was a huge opportunity that helped me understand the role of UX in a much greater sense.

These are four key learnings that I grasped from this project.

Learning #1

Identify & Verify

The actual problems faced by people needs to be identified with much precision, but keep that in mind that not all problems are as straightforward as they look.

It is important to verify the root causes of the problems before solving it.

Learning #2

Know your Audience

It is an indisputable fact that without knowing your audience, you cannot solve a problem.

So always have a crystal clarity on your demographic and WHO are we solving the problem for.

Learning #3

Accept the Limitations

Not everything we imagine can be part of the project scope. Sometimes features needs to be modified/removed to make it compatible with the system limitations.

Accept the system limitations and try to create best possible experience without sacrificing the business.

Learning #4

Feedback & Iterate

There's no perfect product created at first attempt, so what we need to do is, make the best product we can be, and let the audience help us navigate to the "perfect product" segment.

Ask for feedback and keep iterating the cycle to make the experience as positive as possible.