TOP TIER

INVESTMENT BANK
Design SYSTEM
* due to the discrete nature of this project this case study is purposefully vague
OPTIMISING THE DESIGN SYSTEM FOR FINANCIAL MARKETS APPS
The Markets Toolkit was developed as an expansion of the existing design system. The reason being that financial markets apps have a set of unique requirements that needed to be achieved.
One of the first priorities during my time was to take the existing Markets Toolkit in Sketch and convert it to a Figma component library.
EVOLUTION OF BUTTONS
FROM USER FEEDBACK
The generic CTA button in the global designs system was inadequate for our user needs. The Financial Markets apps had multiple complex actions that needed to be taken into account in an app and that a single Call-to-Action wouldn’t suffice where a user might want to for instance BUY or SELL. After a while our users asked us to further distinguish between other colour blocks and buttons. This is when we introduced gradients to the buttons.
CTA BUTTON
CTA BUTTON
FLAT BUTTONS
CTA BUTTON
CTA BUTTON
CTA BUTTON
CTA BUTTON
GRADIENT BUTTONS
CTA BUTTON
CTA BUTTON
CTA BUTTON
CTA BUTTON
BUILT ATOMICALLY
Working closely with our development we utilised the Atomic Design methodology to build components that could scale. We focused on keeping the system nearer to Atoms than to Templates to allow the designer to be able to find the most optimal solution for each application.
STATS
166+
PRODUCTION
APPS
1100+
BUSINESS
USERS
431+
ACTIVE MARKETS
LOG DEVELOPERS