KAUS Design System
Foundational Design System
A high level overview of a case study for building a design system covering an insurance product. For further details or questions please reach out via email.
Duration
40hrs
Role
Designer
Tools
Figma
About
A design system providing consistency and proficiency to the design organizes what has worked as well as will improve the design process and spark ideas for future iteration. It is one of the most useful structures to understand and communicate the product's design.
I utilized Figma to design, organize and document all content with an understandable hierarchy. This is the foundation of the design system which can be easily expanded and maintained for future use across teams.
Methodology
For this foundational design system structure, the molecular approach was used to build components and patterns. This helped maintain uniformity and a consistent architecture for any project use case.
Molecular Structure
Atoms these are the smallest element such as icons, colors, images, buttons, etc.
Molecules the combination of atoms together creates a molecule, icon + text header + button
Organisms the combination of molecules to form a section, such as a navigation bar
Templates take a group of these organisms together and then rearrange for each section
The page takes the template and replaces with real content unique to that page
Video Overview
Design system molecular build designed with Figma.
Typography
The typography with selected typeface and organized hierarchy and weight, which provides communication with the right sentiment and accessible sizing for everyone. Bolds are for emphasis and titles. One typeface was chosen for optimal readability.
Nonlinear Scale Value 1.125 | Base size 16px (100%/1em)
Note: font sizes with floating numbers have been rounded for ease and rendering.
Typography System
With insurance policies containing a large amount documentation for policies via online, this is expected to be as legible as a paper document yet prevent eye fatigue on screen.
The default size
The default size for all body text and paragraphs that can translate across most device sizes. The size utilized in this design is the most common base size at 16px. The typeface x-height and line height should also correlate with the sizing legibility. Line height with enough breathing space to easily read paragraph text. Increase size for larger text.
Colors
The colors for KAUS’ branding work cohesively with the UI and adjacent colors for emphasis or hover states are utilized across the product design.
Grid System
Column Grids
The column grid system was used for evenly spaced content throughout the designated screen. This spatial system helps consistency and proportional balance of content of various sizes and shapes. This systematic structure changes with responsive design across the product. Depending on the device size, the column grid specs can vary.
The following device sizes have their own unique selection of constraints for the grid system. For this product, desktop, tablet horizontal orientation, tablet vertical orientation, and mobile were designed.
For this to have the best visibility with body text and containment, the gutter and margin spacing should be utilized to hold each section proportionately. Doing so avoids lack of cohesion across each screen.
Elements
Buttons
The buttons should have a generous size to fit within the context and text should be legible and spaced accordingly within the button.
Controls
Check boxes, toggles, radio selections, etc. must have the same standards as the rest of elements for a complete design.
Check boxes
Radio Buttons
Toggles
Inputs/Dropdowns
Input and dropdown fields should be placed where they can be accessible. Depending on the device, the UI should accommodate these fields in screen responsively. There are estimate/quote form fields which require input and dropdown selections by the user.
Branding
Primary Logo
Alternate
Dark background
Submarks
Icons
Base Icons
Profile Icons
Social Icons
Product Icons
Example
Image use
CTA section and other sections and supporting visuals have images to promote marketing and engagement.
Design Patterns
Navigation
Desktop Navigation - Header
Desktop Navigation - Footer
Profile page menu
Mobile Navigation
Header
Slide out menu
Footer
CTA Section for Insurance
The CTA section is one of the most prominent aspects of an insurance website. Most if not all insurance homepage or landing page has an immediate Call To Action for the prospective customer to engage and see more about what products are right for them which can in turn lead to a purchase. With this section that can gain customer interest much faster than just hidden in a menu.
The quote or estimate button allows instant response of what the estimate costs will be for anyone choosing a particular service.
Mobile CTA
Desktop CTA
Other Projects
Coursera App
Recalled Foods
KAUS Insurance