Revamping G4S client Portal
With bluechip clients paying G4S millions for data-driven security services, G4S knew their patchwork of inherited semi-functional customer portals didn’t reflect the kind of service and quality these clients expected.
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
Project Timeline
Aug - Oct 2020
Tools
Figma | Miro
My Contributions
Research and interviews, synthesis and artefact creation ideation and concept testing, low to high-fi prototyping, user testing, dev handover and development oversight
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.
Design Process
1
Research
2
Define
3
Ideation
4
Design
5
User Testing
RESEARCH
Our biggest challenge was the independence of G4S’s myriad subsidiaries.
Different branches tended not to talk to one another, with different needs and expectations creating complex perspectives for us to tap into and unpack. Then there were the clients.
Our research included:
-
User Interviews
-
Surveys
-
some Usability evaluation
User Interviews
As an external agency we were unfettered by internal politics and able to ask all the hard questions, meaning we learned things that challenged our client’s initial assumptions about G4S and their clients.
​
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
Surveys
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.
Usability Evaluation
Aside from interviews, we conducted usability evaluation which pointed to major deficiencies in its usability and design.
To explore the issue and gather more data, each screen was carefully reviewed and notes were taken.
This gave us the ideas about adding or improving features.
Affinity Mapping
Like most other projects during 2020, we worked entirely remotely. So, to synthesise our data we used Miro, unpacking our findings and identifying some interesting trends.
Since G4S was so new to design thinking we also took the opportunity to involve them via a couple of workshops. This meant they felt invested and could see what we were doing and the value of our work.
On the whole, customers wanted a robust, streamlined portal. Interestingly though, data on staff training, intel reports and wage data were all in high demand - details that would become the scope for the next phases.
KEY TAKEAWAYS
96%
OF USERS WANTED TO SEE DATA RELEVANT TO THEM
83%
OF USERS NEEDED OPTION TO GENERATE CUSTOMISED REPORTS QUICKLY
89%
OF USERS WANTED A BETTER AND MORE ATTRACTIVE INTERFACE WITH ALL CHARTS ON ONE PAGE
76%
OF USERS NEEDED A MORE ROBUST ONBOARDING PROCESS THAT MAKES IT EASY FOR NEW, LESS TECH SAVVY CUSTOMERS TO GET INTO PORTAL
DEFINE
Thanks to our workshops and the frequent sprint meetings, my team and the client were on the same page, meaning we didn’t see the value in creating a problem statement. However, since the existing journey flows in Arrow were going to be transformed quite radically we took the time to create three 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.
Personas and Customer Journey Maps
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.
Concept Cards
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. Thanks to the UI team we were able to skip the mid-fidelity wireframes and launch into high-fidelity designs.
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 AND HANDOFF
Whilst none of the users we spoke to accessed Arrow via mobile or tablet, it was important to G4S we future proof our designs so they had the flexibility to incorporate more mobile-first features going forward. It was this consideration that caused us so many problems with the information architecture but we succeeded in creating a ‘robust and pleasing user experience’ on desktop, tablet and mobile that satisfied everyone for the MVP.
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 the 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.
HANDING OVER TO G4S
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.
