Cover-websites-mockup2.jpg

Cover Design System - One system to rule them all.

Cover is AFSI’s Design System.

Project + My Role: AFSI’s internal workflows were severely outdated and in need of a design facelift. As part of a front-end team building out several applications, I worked to craft a collection of guidelines, principles, and assets to instill universal consistency amongst all AFSI apps.

Execution: These elements include style, content, and design guidelines, as well as UI/Component libraries. Further still, I carefully crafted dozens of illustrations for user interactions, components, best practices, and rules.

Solutions: As AFSI’s design system was being created in tandem with other internal apps, Cover evolved into a user-friendly system adopted across the application board. Cover is constantly evolving, and we focus on adding essential elements as they are proposed through the design/development process. My team and I are also currently working on updates to these standards, which include a potential dark theme or theme switcher for easier readability.

 
cover-loader.gif
Cover-D.jpg
Cover-7.jpg
Guidelines-Hero.jpg
Cover-Components-SS.png
Components-Hero.jpg
Cover-Guidelines-mockup.png
Practices-Hero.jpg

Content Design Principles

Non-aesthetic elements that describe Cover language, principles and objectives.

Cover-6.jpg

Accessibility illustration

One of many thoughtfully crafted illustrative compositions explaining color and accessibility. While it is important to the structure and design of AmTrust sites and applications, color alone should never convey information. When choosing colors, we considered users who are colorblind or have low vision. Cover’s palettes comply with the latest (WCAG) Web Content Accessibility Guidelines.

Cover-E.jpg
Cover-Main.jpg
Cover-Main-illus-Comp.gif

Consistency, Clarity, Efficiency and Aesthetic.

Applications should provide the same means of use for all users, regardless of ability, system, or device. Using WCAG, research, and testing, my team successfully built a working design system. By eliminating all ambiguity, Cover has streamlined and optimized AFSI user workflows.

Cover-Validation-Comp.png
Cover-Components-Breadcrumbs-Comp.png
Cover-Submission-Completed-Comp.png

Illustrations with a purpose, showing micro interactions for use case examples.


image007.gif
image004.gif

Micro-interactions

Clean and subtle interactions for clickable elements

 

Previous
Previous

Internal App Workflows (AFSI)

Next
Next

OCM Logo Design