Fundomate is a startup that funds small businesses with working capital.
Over the course of 4 months (November 2019 - March 2020) I worked with our product manager and two engineers designing and developing a scalable design system. Before we began, the four of us read Brad Frost's book on Atomic Design and applied what we learned throughout the process. My goal as the designer was to create the entire design system in a Sketch library - making each component responsive across desktop, tablet, and mobile. I also worked closely with the engineers establishing a consistent naming convention and documenting elements so that the process of developing each component in React would be as seamless as possible.
When I arrived at Fundomate we had no unifying design philosophy or principles to guide us. This eventually became a problem as the company grew and our merchant application product began to take off. As a result, the product developed visual and UX inconsistencies because we were shipping one-off solutions without a solid design foundation in place.
Solve the UX and visual inconsistencies that grew across the components and pages of our merchant application by creating an atomic design system in Sketch.
The team and I kicked off the design process by taking inventory of what was already in production. In doing so, we identified, compiled and documented the visual & UX inconsistencies that became discernible throughout the product. After comparing our notes we worked as a team and built out the foundation of our design system via group white-boarding sessions. Throughout these sessions we observed the repeated applications of patterns (colors, type, icons, buttons, input fields, etc.) that would be unified throughout the product and design system. I also worked with the engineers establishing a clear and concise naming convention of elements (e.g. a-button-primary, m-dropdown-calendar, o-contract-one).
With an atomic structure and naming convention in place, it was time to work on the molecules. As I worked on designing the molecules, the dev team started working on the atomic bits of code in React.
I made each organism responsive by utilizing Anima's padding, margin, and stacking features. By doing so, I was able to quickly build new prototypes for testing, thereby enhancing our ability to test new features with users.
Creating an effective system for both design and development required a large amount of documentation. To do this, I utilized Design System Manager by InVision, which enabled the team and I to push and pull assets, as well as sync any changes that would be made in the future.
