Biometrid Platform - increasing engagement and designing a clean, easy-to-use tool
INDUSTRY
Biometrics Tech
PROJECT
Administrative back office
COMPANY
Biometrid
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
Overview of the features produced during this time
Videoconference Panel
SDK Customisation
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.
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!
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
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.
Design System
Design Library Kit
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.
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!
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
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.
Educational sources that helped me during the project
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
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!
The evolution of component where the agent can choose actions to start building a new flow
Tool Bar
Flow Builder
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 🪄
Customisation
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.
Customers' Merge
