* due to the discrete nature of this project this case study is purposefully vague
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.
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
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
FLAT BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
GRADIENT BUTTON
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.
PRODUCTION
APPS
BUSINESS
USERS
ACTIVE MARKETS
LOG DEVELOPERS