WHO
A.D. Banker & Company
MY ROLE
I led the research, design, and implementation of creating and disseminating the design system.
WHAT
Design System is a robust, all encompassing, library for designing and utilizing components, visual design, and code in an efficient and consistent manner when creating across platforms, systems, and products.
This was created to establish an efficient and cohesive visual identity and coding system across each of their four platforms. It additionally helped establish digital components beyond the four main platforms, allowing access to marketing to utilize many visual elements.
GETTING STARTED
As I audited and documented elements of each system for WCAG Accessibility requirements, I noticed many variations of similar elements across, and even within, each platform. After reviewing my findings, I began simplifying and reducing the redundancies found.
Next, I relayed my instructions to the development team on how and where to implement compliance improvements. Since the team was already in the code to make these updates, I took initiative and the opportunity to additionally provide the changes needed to simplify the visual design, and subsequently the css and html.
Working in tandem with the development implementation, I began documenting the design changes in Adobe XD. Using Adobe XD, I was able to provide an accessible solution for the development and marketing teams to reference, providing a single source to reference. This document was able to provide visual examples of components, code snippets for developers, and downloadable iconography and design guidelines for the marketing department.
PROCESS & RESEARCH
I began by using the Compliance audit and brand style guidelines as the base to start simplifying the design component. Then I began building out each of the elements in Adobe XD, creating the overall layout base on a competitive analysis of other similar, popular, and well known Design Systems (i.e. Hubspot, Trello, Atalissan, etc)
Because I worked as a centralized gate keeper of the design changes, I was able to work in tandem to implement and iterate on design changes as development also implemented the changes in each system. Additionally, since this project was wrapped into the Compliance overhaul initiative, I was able to get buy-in from leadership easily, especially as it would help simplify processes and provide a resource guide for the development team.
SOLUTION
In the end I was able to create a well thought out, organized, and centrally accessible Design System library with components, code snippets, downloadable iconography, established themes, and guidelines all created in Adobe XD.
Ultimately the goal would be to have developed within an intranet of sorts, but until resources are able to be allocated, this document helps provide clarity and ownership to all helping build these platforms without having to rely on one person to provide guidance.