This Design System is the result of years of evolution and learnings from the hyper growth phase of a startup, into a matured global $1.4B brand. Foundationally, it is consistent, self-contained, reusable, expandable and accessible. It is design thinking, considered for all aspects of a growing organization from product and brand designers, to product managers, developers, and marketers.
Challenges: One of the bigger challenges for creating a design system was conducting an audit for all existing components and documenting where they live in the org. To accomplish this, I compiled a list of brand and marketing applications. Afterwards, I filled in the blanks and created the missing components and then started building in Sketch and Adobe Libraries, so that there would be a 1-to-1 match between the teams’ files (in Sketch and Adobe), and what was in production.
As we conducted the audit, our team realized this was a good opportunity to rethink the structure and some design aesthetics of our brand. Working in parallel on both the design system and restructure was efficient because I was able to freely explore both design execution and application, which improved outcomes for both the product, and brand design teams.
Solution: Sketch was used to build the design system while making sure atomic design principles were applied. We did this by starting with the rebuild of our corporate website. By establishing basic foundation design elements including color palettes, text styles, iconography, etc and working up towards more complex components such as input fields, buttons and content cards, it allowed us to freely explore visual styles and quickly see them across multiple applications. Prototyping started happening almost simultaneously.
We used Design System Manager and Adobe Libraries to version control the design system, and tested in our actual project files. As the lead for this project, I established the overall workflow and organization of the design system, with the goal of having future designers create their own projects to do explorations, and after a few weeks conduct review sessions before merging ideas and notes. The goal was to hopefully allow us to have a consistently up-to-date design library. Finally, all design file locations and prototype links were housed in a design libraries for all members of the product and design teams to reference.
Results: Applying Atomic Design Principles to our design system, and maintaining it using Sketch and Adobe shared libraries, allowed our team to have a single source of truth for all design components. Our team did have challenges adapting to a process of version controlling, but we quickly learned that the upfront investment was well worth it. In the end, as all working files were centralized on our server, we drastically reduced time and problems, such as inconsistency in wide variety of aspects of projects that went to market.