OVERVIEW & BACKGROUND
As we started to make a B2B application for Transaction Reconciliation 💳 and some other products related to same domain, we felt the need to create and maintain a consistent style and visual language for all the products which lie under the same client.
The Initial goal was to make a group of reusable components, led by clear standards which can be put together to rapidly build many consistent experiences.
ROLE & TIME
Product Designer | Avanza Solutions
Information Architecture, Design System, Style Guide
2021
- Design System
- Intuitive & Easy Navigation
💡 Solution
The main solution was to come up with the pattern library or a design system that was led by principles and best practices. Furthermore, document each decision and component to make sure the visual consistency and efficiency of work.
The other goal was to think of an intuitive and easy navigation across the application so that user can easily be able to find the right result for an action.
- Getting everyone on same page
- Prioritizing & Organizing
- Getting clients onboard
💪 Challenges
The Design System doesn't only depends upon the designer but the whole team. If we want to make it a success 🎉, we need to take every member onboard, specially the frontend developers to ensure the technically correct design.
We needed to make sure that along with the Design System, we should also be able to work on features, it's research and wireframes so we prioritized and organized the tasks according to it.
We also needed to keep the client updated about the look and feel and brand identity that we were creating for the product so we get on the same page and do the necessary changes if required.
Pic: Transaction Reconciliation List page made using Recon Design System (Light/Dark mode)
🧱 Defining Foundation
We created the system using the principles of atomic design.
Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.
The basis somewhat define our typography, color scheme, icons, spacing, navigation & information architecture which were important for defining our work in a consistent direction.
Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.
The basis somewhat define our typography, color scheme, icons, spacing, navigation & information architecture which were important for defining our work in a consistent direction.
What is Recon?
Recon short for reconciliation , is a financial term used in Fintech domain to describe operational, technical and financial control activities which provide assurances to the validity of payment transition lifecycle, balance sheet accuracy, daily cash position, among others.
as most of our products are linked to the transaction and reconciliation, our approch is to define "Recon" through our design.
as most of our products are linked to the transaction and reconciliation, our approch is to define "Recon" through our design.
Personality
Trustworthy • Simple • Serious
our personality is based on our mission, values & promise to customers.
Principles
Consistent • Intuitive • Simple
our principles are based on the industry norm and customer needs.
Grid
We used 12 flexible columns grid system to space out the elements on a page with 20pt gutter between each of the grid.
Colors
Our primary color is composed of neutral, white and blue. We also tried to make sure to comply with accessibility like AA standards contrast ratio.
Primary
Neutrals
Supporting/Graph
Typography
We used Montserrat (Google Font) as the base typography across the entire product. Here is a showcase of different ways to structure content:
Buttons
We used Material Icons (Google) as the base font across the entire product. Here is a showcase of icon sets:
Icons
We used Material Icons (Google) as the base font across the entire product. Here is a showcase of icon sets:
Material Icons
Components
We created components for all the neccessay elements used in the app.
