As an early stage start-up, M.Gemi was accelerating in growth and was moving at a rapid pace. With the addition of each team member, it proved increasingly difficult to streamline and optimize workflows without constantly recreating the wheel. This resulted in significant inconsistency across the site.
The solution was to create a shared library of UI patterns and individual components that both creative and engineering teams are able to reference and use simultaneously.
To create efficiency, cohesiveness, clarity and collaboration among different teams within a single organization. To intelligently anticipate needs to help people work better, smarter and faster.
Promote UI consistency and cohesion: more conversion and more money
Faster production: roll out more features and iterations faster
Shared vocabulary: more time collaborating and less time in meetings
Easier to test: more responsive, performant and accessible experiences
Atomic design approach: prevent future inconsistencies
(project owner)
Research
Site Audit (existing features)
Interface Inventory
UI & Visual Design
Infield top aligned labels require as few visual fixations as possible when scanning. Each field contains both the label and user input. When users scan a field, their fixations hit the label and input at the same time. The close proximity and lack of visual barriers allow users to process each field quicker.
Native and custom dropdown, select menus.
Feedback blocks are used to provide action-based feedback messages or to convey informational and/or crucial account-related messages.
Include a left and right padding of 16px for both the text and associated icon within the block itself. Padding above and below the text should be 12px.
A toast notification is a small message that shows up at the top of the screen (spanning the full width of the screen) to notify the user that the action they performed has been successfully taken place or taking place. These should stay on the screen for 5–6 seconds, so that they do not block the information behind them for too long, but allows the user to read the message.
We follow a 4pt baseline grid to achieve a vertical rhythm with typography across the site.
The images above and below show how certain atomic elements make up molecules within this design system.
We use a flexible grid system which means our column sizes change dimensions once they reach certain breakpoints. Our grid system uses 16 flexible columns with a gutter between columns of 16px and a margin of 8px. We use this grid in tandem with a 4px baseline grid for typography.
Our different column sizes automatically change dimensions once they reach certain breakpoints. The following table shows the media-query breakpoints.
There are two major icon size groups: small and medium. Small is 16x16px and medium is 20x20px. Both types have an outer container of 24x24px.
