Globacap - Design System & Audit
Role: Senior UX/UI Designer | Stakeholders: Head of Product, Head of Development, Front-end Lead, Project Manager
Method: Agile - Kanban | Principles: Atomic Design, Material Design| Tools: Adobe XD
Visit Globacap
Overview
Globacap offers everything you need to manage your capital in one place, they offer the only equity management software that can support the entire life cycle of capital, from private placement and cap table management to EMI Option plans and secondary transferability, taking you from day one to exit in one simple, cost-effective solution. And by embracing advanced blockchain technology, they ensure data is always accurate and secure.
Equity administration platform - design debt
Globacap's equity administration platform had incurred design debt, this is the natural decay that accrues as a project matures and can happen for a number of reasons — new features are added, old features become unused, good design methodologies or solutions are skipped in order to reach short-term goals, etc.
​
The legacy design became stretched beyond its original intentions, resulting in elements that felt unsuitable and provided an unsatisfactory experience as well as this it was causing issues when looking to quickly prototype, test and iterate features.
Why did Globacap need a design system?
In order to quickly iterate with confidence, design teams and developers need access to a single source of truth that allows for a scalable UI language and streamlined UX guidelines. With brand touchpoints reaching over multiple channels and platforms, consistent user experience can be assisted by leveraging a central design language.
Building a library of design patterns, rules, and UX guidelines prevent inconsistencies when shipping products at scale.
Out with the old, in with the new
Implementing a new design system at Globacap was not going to be easy as we had to consider the capacity of the company. Developers needed to work on shipping existing releases in the products roadmap, and I needed to work on more urgent features that were promised to customers using the legacy design system. So I dedicated a day or two each week to the development of the new system over a years period
Transfer shares before:
Transfer shares before:
Security before:
Security after:
Deal management dashboard before:
Deal management dashboard after:
Creating an accessible colour system
After exiting the FCA's sandbox and becoming a fully regulated company, Globacap completed a $9 million Series A extension to fuel the roll-out of its private placement platform. This included a rebrand and a complete overhaul of the companies digital presence.
​
Working with a well-established independent UK Top 50 creative agency; "Chaos approached the brand strategy for Globacap with meticulous rigour. This involved a full competitor audit, an in-depth look at rival brands’ propositions, and a thorough knowledge of the growing area of tokenised securities."
Chaos delivered an extensive brand toolkit that included an online accessible palette to pass WCAG 2.0 guidelines for
Globacap's main website.
I was then tasked with expanding this to create an enterprise-level accessible colour system.
My first step was to audit the current platform. I found that we had a colour library without a decent naming convention in place with a total of 45 colours not fit for purpose, as the library had become outdated with hotfixes over the years.
Looking to apply the brands' style guide to the UI and colour system in a meaningful and impactful way I took inspirations from Google's Material Design colour system and followed their principles closely. Simplifying and grouping the system into 4 groups (brand, accent, semantic and neutral) I expanded the palette to 54 variables in total.
Once this was in place I tested against WCAG 2.0 Success Criteria making adjustments as needed. Ensuring a minimum pass rate of Level AA for all edge cases. The final stage was to come up with a simple naming convention that made sense to anyone that viewed the system with basic rules that were easy to follow by developers and the wider team.
Finished Result
View Globacaps Colour System here
