As the Mogo team grew alongside the Mogo account ecosystem, it became increasingly important to maintain a consistent style and visual language across all areas of the product. With over seven products (and counting), it was clear that we needed a more systematic way to guide and leverage our collective efforts.
Led the creation of a collection of reusable components following an atomic approach, guided by clear principles, that when combined, create simple and complex experiences. As a result, reduced design discrepancies and removed the production of isolated custom components which improved development efficiency.
MISSION
Anchor design language on paper to make the Mogo experience consistent, intuitive, and delightful while increasing the efficiency and quality of development.
AUDIENCE
An internal project aimed to help the design and development team.
MY ROLE
Lead Product Designer
4 designers + 3 Lead dev
SOLUTION
A design system guided by principles and best practices. Documentation on each step to ensure consistency and efficiency of work.
#1– ATOMIC FOUNDATION
Mogo's design system is based on the principles of Brad Frost atomic design. The key idea behind this methodology is to breakdown distinct stages that combined together create interface design systems.
#2 – EXISTING PRINCIPLE
Grid 8 point system: We use multiple of 8 to define dimensions, padding, and margin of both block and inline elements. By using the same measurements rule we can ensure consistency through our design.
Colour-tone accessibility is a challenge that makes colour swatches hard to build. Thanks to google material design, we were able to adjust our palette complying with AA contrast ratio.
#3 – MOGO'S ATOMS
#4 – MOGO'S MOLECULES
#5 – MOGO'S ORGANISMS
