Global Relay is a Vancouver-born company providing archiving solutions for the finance industry. My 2+ years on the design team has been a crash course into the slow burning world of corporate enterprise. Throughout my tenure I’ve gained hands-on experience in both their core desktop offering and supporting mobile applications.
Inside a tangled web of decades-old dependencies and styles, our design team is tasked with shaping a universal visual language through persistent and methodical incremental change. With consideration to where components are used, we’ve worked to consolidate old component multiples across platforms. Streamlining the colour and font library and providing usage documentation are common tasks included in the upkeep of the system.
Despite UX and UI being split into separate roles at Global Relay, both cohorts are expected to collaborate deeply on projects and assist in research and design tasks. UI will frequently collaborate by leading competitor analysis, assisting in user flows, reviewing journey mapping, and running usability testing.
All our components are built in Figma using the atomic design methodology to craft flexible, easily adaptable drag-and-drop design elements for our many running projects. Each component is built from the start with Figma’s Auto Layout functionality for easy changes and adjustments to the design.
Global Relay’s customers vary wildly by age and demographic, and for this reason accessibility considerations are taken into account from the start of our projects. WCAG compliance checklists are used to flag for logical content structures, tabbing through elements, and ensuring colour readability.
In a team of roughly 20, communication is what delivers our projects on time and to spec. Not only do we need visibility among designers to know who’s doing what, but also direct communication with technical project managers and developers to assure projects meet business goals and are built correctly.
A10 is Global Relay’s flagship archiving solutions product. My time on the team that supported it started with upgrading how policy reviewers could more easily escalate flagged messages to their supervisors. The action of reporting was important because it had to capture all review actions to prove both internally and to regulatory bodies that a review was conducted. It also needed to show that any suspected violations were investigated, and that actions were taken when necessary.
In order for reviewers to specify which state an offending message was in, my UX designer and I developed a coloured coded iconography system. These icons represented the flagged, escalated, pending, reviewed, and closed states a message could be set in. From a newly deigned policy match side panel, reviewers could now easily toggle and escalate messages to their superiors, with the ability to include notes for added context.
Together we built several prototypes to test with both internal review teams and clients, which allowed for insights into how users actually interacted with the app. This gave us a better understanding of the language we were using, and which workflows made the most sense. By the time we were done, A10’s escalation features reached beyond parity with its predecessor A9, and became a selling point for new customers.
Keyword Hits was designed as a creative solution to compliment A10’s existing compliance feature set. Customers who upgraded from A9 were complaining about the lack of keyword statistics and reporting within the new application, so it became imperative for the business to build a solution.
The keyword highlighting that was available in A10 at the time wasn’t very useful. Having only been handled by developers, policy match highlights were a rainbow of colours. Through sitting down with clients, we learned that this confused many of them, being unsure if the colour differences relayed any hierarchy of meaning.
Together with my UX partner, we consolidated down the palette to just three highlight colours: red, yellow, and orange. Red for policy hits, yellow for searched matches, and orange for blended policy/search hits. Upon inspection of suspect documents and emails, users were now able to see previews of sentences containing offending keywords, colour coded to easily identify whether or not it was a policy or search match.
In the aforementioned policy matches panel, users could escalate their findings if needed.
The word Ling is actually an acronym, standing for Legacy Import Next Generation. Developed initially for in-house use only, this application will eventually allow A9 and A10 customers the ability to add external archival information into Global Relay’s database.
Ling’s design and development was a lesson in working within limitations. As the the sole UI designer, I was set to work on this brand new tool at a time when management was eager to avoid adding any new components to our library. This was because as a team we were only at the start of a heavy consolidation effort of our components, and management did not want to complicate things further. To restrict things more, we had only a single dev available for much of the first year of development, and one with no front end experience at that.
So what was a UI designer to do?
Working together with my UX designer, I adjusted the wireframes to accommodate for the limited component library at our disposal, and recommended structural changes to streamline pages for easier development. Ling started to take shape in the form of simple tables within responsive, stackable cards, with a sidebar navigation that changed in function as you drilled down in the app. I pushed for a shallower information architecture, one where the user could easily locate themselves among imports and individual batches, and helped to redirect our internal team to opt for more end-user friendly solutions.
There was only one woman in the company at the time who was actually running these imports for customers, and being our only user we stayed in constant communication, testing new designs and workflows with her regularly.
As you might’ve guessed, Message is Global Relay’s communications platform, allowing GR customers an easy venue for compliant conversations between employees and their clients. Currently, Message is given free to existing customers due to its feature immaturity, with a ways to go before reaching close to a viable competitor status.
In 2021, I asked to be transferred onto the Message team, in the hopes of working on more modern, mobile-first designs within an inherently user-centred platform.
While standard among competing software, the function of muting chats or directly mentioning users has only recently been roadmapped for development. My colleague and I were asked to take on the project, splitting duties between Message for desktop and mobile. Taking on the latter, I set to work on a competitor analysis, which allowed me to support my UX partners design decisions among the broader team, and suggest alternative UI to help modernize the experience.
Known as user or profile cards in other applications, Global Relay’s v-cards were initially little more than underdeveloped sheets of injected data. I was assigned the task of updating these containers by making them easier to scan for relevant user information.
Using available space more effectively, I placed individual data points at larger intervals, and prioritized proprietary GR phone numbers at the top of the list. Users could now simply click to call, text, or email their contacts instead of having to copy and paste inactive lines of text.
Mini V-Cards appear on hover of user avatars throughout the desktop version of Message. These elements not only needed a reprioritization of data, but also a way for users to contact their colleagues more seamlessly. This was done by removing redundant user avatars and incorporating a users top two contact methods. For further details, users could now move from mini v-card to full at a click of a button.
In order to ensure the hierarchy of our content was correct, my UX designer and I tested with internal teams to qualify our reasoning.
Are you passionate about your mission-based initiative, or working in an impact driven organization? Are you community minded, or employed in music or the arts? Let's touch base to find out how I can help make your next digital project a success.