Revamping G4S client Portal
Overview
G4S, a client who I’d worked with on several other projects, approached us to redesign the client-facing portion of their bespoke data-driven all-in-one system. Unfortunately, the portal had been rushed into production by inexperienced developers, without any design thinking applied or designs for that matter, and it was very apparent.
Keen not to repeat their mistakes, we made sure to lead a discovery phase that shone a light on what worked and what didn’t. Design thinking was still new to G4S, so we had to guide them through the process, but the work we did allowed us to design a portal with an enjoyable user experience that met their clients high expectations.
The project took 10 weeks and was followed by a development phase where I worked with the client and developers in Ukraine and India throughout the build process.
Role
Lead UX Designer
Team
-
1 Product owner
-
1 UX Designer
-
2 front-end developers
-
3 back-end developers
My Contributions
-
Research and interviews,
-
Synthesis and artefact creation
-
Ideation and concept testing,
-
Low to high-fi prototyping,
-
User testing
-
Development oversight
Tools
-
Figma
-
Miro
-
Optimizely
-
Tableau
Project Timeline
Aug - Oct 2020
The Problem
An amalgam of mergers and regional subsidiaries, G4S naturally inherited a lot of disparate legacy tech, which seldom interoperated, as it grew. And for a multinational data-driven security company, this was a big problem. Enter their silver bullet solution - Arrow. Needless to say, Arrow failed to hit the mark, at least for the customer-facing portion, which was used by only a handful of users, had serious reliability issues and was rushed into production without any design thinking and built by an inexperienced team. Our job was to fix the portal.
Screenshot of the old seller portal dashboard before the resdesign
Design Process
1
Research
2
Define
3
Ideation
4
Design
5
User Testing
User Research
User Interviews
Surveys
From Cisco to Facebook, EDF to DPD the clients were as diverse as their needs and goals. It was all good information, but we quickly tightened our questions to get the info we needed and to manage expectations.
​In the end, we interviewed and tested over 20 portal users from around the world​
​
I designed a semi-structured questionnaire to explore:
-
routines actions on the portal
-
user frustrations
-
desired features
We surveyed 107 respondents from 20 different countries. We discovered that a high percentage of users wanted to see data relevant to them among other needs.
Key Takeways
-
96% users wanted to see data relevant to them.
-
89% of users wanted a better and more attractive interface with all charts on one page.
-
83% of users needed option to generate customized reports quickly.
-
76% of users needed a more robust onboarding process that makes it is easy for new, less tech savvy customers to get into portal.
Define
Since the existing journey flows in Arrow were going to be transformed quite radically we took the time to create couple of personas and journey flows, which became an important stake in the ground for justifying certain features. Plus we wanted to capture the diversity of the users we had spoken to and their unique perspectives on the Arrow solution.
Ideation
Aside from the existing features we needed to overhaul or remove, we also wanted to come up with some ideas for improving the Arrow MVP based on user feedback.
After running several 6-8-5 exercises and developing our concepts we ran another workshop with the client. We used this opportunity to get buy-in and to glean some feedback to help us prioritise what to design.
The six concepts cards we presented were ranked, based on our user data, and then voted on by the client, based on feasibility. It was a great exercise with us getting green-lit for two and shelving four for the next phase.
Low fidelity Wireframes
To ensure we were on the right track we needed to flesh these concepts out into low-fidelity designs for testing. Although very rough, these wireframes allowed our users to experience some of the user flows we had mapped, highlighting some problems with the information architecture that took quite a long time, testing and iterations to solve.
Moodboards, Style Tiles & Hi-Fi
Initially we developed mood boards for the new look and feel of the portal drawing on the work we had done during their visual discovery.
Using a ‘gut test’ we identified which designs were most desirable with the client before then developing some style tiles that went on to become Arrow's new aesthetic.
We then started creating the high fidelity designs and later the prototype and micro-interactions.
Testing and Iterating
As we developed the custom dashboard design we encountered more issues with the information architecture. Each widget on the dashboard had a page behind it where the user could interrogate the data more thoroughly. However, by giving the user the ability to add and remove widgets accessing those subpages became complex, especially if widgets were removed. Our solution was to create a secondary, fixed navigation on the dashboard itself, but with limited real-estate, especially on mobile, this proved a challenge. However, with plenty of testing we were able to iterate solutions fast.
FINAL DESIGN
Customizing the users’ experience: A major annoyance for the users was that the existing dashboard was fixed, and seldom showed useful information. By allowing the user to customise the data they saw, the dashboard was redeemed making it a useful pit-stop before accessing any other features.
Giving the users more detail: Given that the customer portal is an oversight tool for users to check G4S is hitting their targets, it made the data quite impenetrable. To solve this we totally redesigned the tables, filters and incorporated interactive graphs to make the data accessible, something our users greatly appreciated.
Keeping users up-to-date: Whilst Schedules was one of the few features that worked, it made finding vacant shifts - its sole purpose for users - very taxing. Our redesign made it as simple as possible to see which dates had ‘open shifts’ and then to filter the locations via a simple toggle, drastically improving the user experience.
Giving users the tools: A fairly major feature of the customer portal, the ability to report and track incidents, simply didn’t work. This was essential for managers and heads of security, which is why we tore it down and started from scratch to make it as streamlined as possible.
Launch and Initial performance
With the designs finished, the client was very happy, not just with the designs but with our rapid turn around and overall responsiveness - as a result, client picked up several more projects from other teams. With phase 1 to be launched by July 2021 the design team and I are poised for phase 2 and 3, work that should begin in August.
​
The findability of information increased from 24% in 2020 to 51% in 2021.
Challenges and Learnings
All of this happened with a completely overhauled product area, meaning in the midst of a storming phase of newly mixed and setup teams, so of course we ran into a lot of friction, which transformed our processes.​​
Next steps
-
Implement Feedback Loops: Allow sellers to submit feedback post-launch.
-
Monitor Usage Trends: Use analytics tools to track adoption and retention.
-
Make Data-Driven Improvements: Regularly enhance the dashboard based on real usage insights.
​Thank you for reading. Questions? Let's chat about this case study in detail.