BRIGHTFLAG
Implementing Machine Learning
Machine learning is a vital part of Brightflag’s product and it has saved their customers millions. Now it was time to explore how machine learning can be used internally to improve workflows and save more than €500.000 in operational costs as an added benefit.
50+ Affected Employees
4 Weeks
€ 500.000 Yearly Savings
1 New Design System
Overview
My Role
Product Design Lead
UX/UI
UX Research
Timeline
4 Weeks
The Team
Product Designer
Front + Backend Engineers
Product Manager
Machine Learning Engineers
Legal Analysts
Tech & Design QA
Deliverables
Stakeholder Interviews
Workshops
User Flow Optimization
Mockups
Prototypes
Design Language Update
01
Goal:Achieve a 95% reduction in manual checks by implementing workflow automation.
Legal Analysts are the biggest employee group in Brightflag and most of their day is spent checking invoices using several outdated tools and tedious workflows. By updating their workflows, redesigning their main tools and by implementing machine learning to automate manual processes, we expect to save around €500.000k a year.
"Checking invoices sometimes feels like looking at an Excel sheet for several hours. It’s a challenge to keep concentration up, especially when the tool randomly decides to crash because it didn’t like to work that day."
Ciara S. - Legal & Business Analyst Team Manager
Overview of the old dashboard
The old dashboard was slow, crashed often and didn’t follow any design rules. In addition it had tons of dead interactions, non-interactive functions, dead user flows and outdated functionality.
Research activities and outputs
The old dashboard was slow, crashed often and didn’t follow any design rules. In addition it had tons of dead interactions, non-interactive functions, dead user flows and outdated functionality.
2
Training Decks
By analyzing the new hire training, we gained a better understanding of what core functions are most important and complex.
36
Pages of Documentation
Developer notes, feature explanations and workflows. All of these contributed to understand the current systems and how they work.
76
Feedback Tickets
That accumulated over the years were analyzed and evaluated for the new design.
2
Shadowing and Q&A Sessions
Shadowing analysts and asking questions about their workflow vastly improved the understanding of the workflow and it enabled the creation of early sketches.
8
Zoom Meetings
By interviewing analysts with different seniority levels, we were able to identify important changes and document the current workflow.
23
Progress Meetings
Meeting twice a day with different teams of the project allowed for quick feedback integration.
02
Fine-tuning user flows to define design and engineering tasks required for an MVP.
Extensive research allowed us to fully understand the workflow of legal analysts and what part of their work was essential. These insights were then being translated into an updated user flow. This highlighted were new designs were required and what items the developers needed to work on first to get to a working MVP as quickly as possible.
"We need to move quick. We can’t wait until everything is ready, our engineers need to start now. "
Ashley H. - CTO
Updating the user flow
The old user flow was documented in FigJam to allow for easy sharing and as an asset to present to senior leadership teams when changes were implemented. In addition to the flow, task times were added to identify the areas of improvements with the biggest impact.
03
Pen and paper sketching
Several ideas were sketched to explore possible solutions. The biggest issue was the introduction of several new components because the old system had interactions that weren’t accounted for in the main product.
"Let’s just implement R.A.G indicators! It will show everyone right away what they need to be doing and we can have everything on a single page instead of several modals."
Kim S. - Product Designer
Sketches
The sketch below shows a few ideas that were mapped out for the R.A.G interactions and how they could be implemented in a first prototype.
Sketches outcomes
The sketches were shared with the product team to ensure that the components we were looking to build are compatible with our design language system. It also helped to get feedback from other designers because we were able to solve the R.A.G issues quicker.
1
R.A.G Status System
Fully implemented a new R.A.G status system that could be extended to the main software at a later stage.
18
Components
New components were developed for the internal dashboard.
6
Icons and Variants
Some of the R.A.G assets were icons and icon variants, so these were added, too.
2
New Colours
The existing design language system didn’t account for all the R.A.G interactions of the internal dashboard, so they were added after checking for accessibility.
04
MVP and design language update
After the sketches had been approved, they were translated into a functioning high-fidelity prototype. This included the new components, colours, rules and documentation changes to ensure ongoing consistency.
"Okay, this is actually a lot easier to read than what we had before. I was a bit concerned about the new design because we’re so used to the old one, but this works."
Paul N. - Legal Analyst
Design Overview
The image below shows the newly designed dashboard.
Design language update
Each updated and changed component were implemented in the existing design file to ensure that they could be easily used in the future.
Component Documentation Example
05
€500.000k a year in savings and future steps
The first machine learning implementation saved enough productivity hours to save the business more than €500.000k in yearly operational costs. Needless to say, the success of this project paved the way to implement the same workflow for other teams as well. The current implementation also needs more fine-tuning because many of the created components won’t be relevant in the future any longer because the automation can be fully trusted
"Great work everyone! This is a massive success for us."
Ian - CEO