top of page

Biometrid Platform - increasing engagement and designing a clean, easy-to-use tool

INDUSTRY

Biometrics Tech

PROJECT

Administrative back office

COMPANY

Biometrid

cover-img
 MY ROLE / TEAM

Lead Designer

2 Product Designers

CTO

Tech Lead

10+ Developers

MY CONTRIBUTION

Design Audit

UX & UI Design

Usability Testing

First Design System

TIMELINE / YEAR

12-18 months, 2022

ABOUT

An infrastructure platform that automates end-to-end compliance journeys and significantly reduces clients' user processing time.

CHALLENGE

Originally designed to cater to the needs of small businesses, the user experience began to suffer when expanded to encompass intricate workflows and high volumes across diverse industries.

IMPACT

I initiated the first design system of the platform, bringing consistency to service and increasing dev efficiency. I designed the flow builder and customisation - two features that increased business results and brought new customers.

OUTCOMES

🏆 With the addition of Flow Builder feature, now stakeholders can set up journeys without a single line of code, building automated identity verification flows.

🏆 By improving the monitoring panel of processes, stakeholder can hold in-depth investigations and process many clients simultaneously, evaluating flagged cases and ordering extra checks whenever necessary.

🏆 Biometrid has witnessed a surge in sales by 15% within the first year. Its impact reverberates across government agencies, banking institutions, and diverse organisations, streamlining UXs and bolstering efficiency.

🏆 Portuguese Administrative Modernisation Agency 🔗 reduced by 90% bureaucracy and enabled a fully remote service, increasing citizen satisfaction noticeably.

🖱️ Hover around to explore

What were the pain points of the platform?

🔍 Heuristic #1
📉 Flexibility and efficiency of use

The version 1.0 could not handle high volumes of workflow that are common in large institutions and enterprises - our system tend to break down.

🔍 Heuristic #2
🥴 Consistency and standards

The onboarding process was complicated and lacked proper information architecture. Since 2015, the language used was complex and confusing.

🔍 Heuristic #3
🖥️ Aesthetic and minimalist design

Outdated UI paradigms from an old tech stack (pre-template), with critical usability issues.

old-version
Version 1.0

Identifying problems through UXR

💡 Understanding Biometrid

First and foremost, I met with my team to get familiarised with the product's history and design decisions made so far. I helped asking the right questions:

We observed demo sessions with stakeholders, conducted a heuristic analysis and rounds of user testing. We had enough data to dive in.

What doesn't function well with our product?

Who are the people using our service?

Why do we need to make a change?

Defining design principles for the revamp

Consistency

Composing a powerful design system to ensure consistency and build fast a complex product.

Simplicity
Neat and minimal design, helping users navigate in a modern environment and complete tasks.
Flexibility
Adapting and changing over time to meet different consumer needs and requirements.
Accessibility
Design for all - taking into consideration all type of personas will use the platform.

User Scenarios & Design Explorations

Hover on  to learn more!

chat-before
chat-after

A task list agent should follow to complete the process

Script & Checklist

A way for the agent to communicate with the end user

Chatroom

Relevant documents associated with the profile of the customer

Attachments

Opportunity to schedule the videoconference for another time

Agenda

User Problem #1

During demo sessions, we observed that the call panel had missing actions that agents should have been able to perform.

Design Solution

We aimed to improve the layout by grouping similar actions, simplifying copy, and streamlining configuration options.


Now agents can

✅ invite another agent in the call,

✅ chat with the client,

✅ reschedule a call in case of an unpredictable event,

✅ can exit or return to the panel without interrupting the call,

✅ can access the process page associated with the client.

Videoconference
Simplicity
Flexibility

Note by author: All copyrights of  ideation and new design layouts are differentiated and only created for the portfolio showcase purpose.  Problem statement, users, process, impacts are based on true facts. Concepts of the features belongs to Biometrid.

User Problem #7

Agents who manage and triage the long list of customers and processes daily have to scan across large volumes of users. Finding what you need can take a lot of time and effort.

Design Solution

With functional filters (instead of flat lists) and the ability to add new rules, modify filters, columns, sorting and grouping, agents can quickly customise to the exact view of the back office lists they need.

filters-feature
Design System
flexibility
accessibility

Design Library Kit

design-system

What differentiates us from our benchmarking?

What capabilities do they possess that we lack?

What makes us stand out?

Bucketing similarities, differences and more through team collaboration where everyone can contribute.

market-analysis

Advocating for product strategy in a tech-led domain 

🚨 The Challenge

Surrounded by tech and sales people that until then were ignoring the design team or what is a design framework was a red flag 🚩

💡 The Approach

We replaced meetings with workshops. Incorporating our triad (management, engineering and UX) into our weekly design workshops proved highly beneficial.

Hover on  to learn more!

process-before
process-after

Grouping fields for agent to be able to browse easier a load of daya

Navigation

User Problem #2

The actions of the flow, the script and the notes by the team leaders, were contained within collapsed menus, further hiding critical details from the agent.

Design Solution

Users can now

✅  easily search for actions and add new ones,

✅  request data review from another agent,

✅  choose view of tabs in one or two columns,

✅  access a strategic checklist,

✅  and approve or reject a process.

Process Panel
Simplicity
Flexibility
consistency

Lessons learned after almost 3 years

Development efficiency with design consistency

By establishing a robust design system, you can reduce design inconsistencies and improve development efficiency. It needs effort to convince tech people, but once it is done, results are amazing.

Better communication

Good communication is the key to success. With organised workshops, you help bridge inter-compartmental communication and give everyone the opportunity to be listened.

UX Lean again and again

By facilitating the agile in the design process, through UX Scrum and sprint orchestration, you can increase efficiency across cross-functional teams, and bring numbers business can understand.

processes-call

User Problem #3

During a video call, the layout of the customer's process profile allowed the agent to move the video console within the page, obscuring important information.

Design Solution

Agent needs to be able to make quick decisions and perform bulk operations

 

We tested different wireframes with users of positioning the panel within the user profile,

✅ We reorganised the tabs of the actions to ensure that agents have access to ample data simultaneously,

✅ Agents can arrange these tabs in one or two columns

Videoconference
flexibility
consistency
accessibility

User Problem #4

The flow builder tool addresses the critical issue of high drop-off rates during setup we encountered from our users during testing rounds.

Design Solution

✅ Pre-designed templates with the most commonly used actions in journey flows are helping users get familiar with the tool.

Improved UI components, not only visually captive, but minimising building errors, time to complete tasks, and increase engagement.

Hover on  to learn more!

flow-builder

The evolution of component where the agent can choose actions to start building a new flow

Tool Bar

Flow Builder
consistency
simplicity
flexibility
accessibility

User Problem #6

Old customisation, arguably was complicated with messy grouping. Stakeholders had trouble orienting and understanding how to choose the correct controls to get the job done.

Design Solution

✅ Modern user friendly interface, where navigation menus are simple and flexible

✅ Review the app in real time, within different breakpoints or operation systems

✅ Translation of the content into various languages using AI technology 🪄

simplicity
flexibility
consistency
Customisation
simplicity
flexibility
consistency

User Problem #5

Biometrid creates with automation through processes unique profiles of customers. Each time enriches these entities by merging them in the background, creating a powerful profile. 🚨 But what happens when this customer already exists? How do we resolve the conflicts?

Design Solution

Now, stakeholders can merge their clients manually and resolve conflicts. They can compare fields side by side and choose what is the most suitable, as per the example below.

merge-feature
Customers' Merge
simplicity
flexibility
accessibility
bg-next-study
ig-next-study
biometrid-logo-white-sdk
Accessible cross-device
authentication experience
bottom of page