Problem Statement
Jumio needs a central library of colors and styles that is to be used for common UI components, icons and illustrations that are used in the unified portal, web, and mobile design systems. This is to help the UX team better manage and control CSS changes to our components when there is a branding update or refresh.
Goals
Consolidate all design system color files and check for discrepancies
Document color use with consistent naming conventions
Ensure that all color and text combinations are WCAG compliant
Apply new styling across UI components, icons, illustrations, etc
Research
Gathered screenshots of how inconsistent the look and feel across all of our apps into one file for meeting with the marketing team and other exec leaders. This is so that they can quickly grasp how each product team is using a different design system styling and remedy the issue.
High fidelity UI mockups
Provided concepts of how the new proposed design styles would look like applied to the current products so they can have a more realistic idea of what was being proposed. All of the colors were checked to meet WCAG compliance as well.
End Results
Now there is one cohesive file dedicated to managing the fonts and css colors to be applied to the UI components, icons and illustrations for mobile, web sdk and web applications.