Problem Statement

How might we create a system of rules and styles for IntelyCare's website to enhance the speed and efficiency of the marketing team's web page production?

I began my work with IntelyCare by familiarizing myself with the web pages that had already been designed prior to my arrival.The point of the design system was not to reinvent the wheel. The design system was built to streamline design decisions in order for the marketing team to create pages more efficiently. With insights gained from analyzing previous designs, I developed  a proper understanding of what was working well and what could benefit from improvements. In collaborative discussions with the team, we came up with several areas that would benefit from global design rules:

Additionally, the developer was using Tailwind CSS for the website and requested responsive designs in 5 sizes (1280px, 1024px, 768px, 640px, and 320px) and to only use fonts in even pixel sizes. A constraint of my work with IntelyCare was that the color choices, specifically the Cosmo (pink) buttons with white text, were imprinted into the brand guidelines before my time with them and do not comply with Web Content Accessibility Guidelines (WCAG).  While the team appreciated me bringing this up, they ultimately felt ok with not complying as their target demographic (nurses) are hardly ever visually impaired.

Naturally, analyzing the font hierarchy of a brand's website was one of the first things I did, but in terms of documentation, it was the set of rules that evolved the most. Documenting typography in a design system requires knowledge of various use cases you may come across in a website or product, so the rules for this were not completed until a wide variety of components were developed. Below are the rules for all five sizes:

Properly spaced and aligned designs allow people to effortlessly flow through content. With rules for margins and spacing between elements, web pages do not look like they are laid out and randomly. Furthermore, it allows designers to think about the actual elements of the page rather than the amount of pixels it is away from something else.

Similar to learning how to implement rules for typography, it was necessary to dive into lots of different use cases with buttons in order to create global rules. This more than most elements in the design system required a fair amount of collaboration between myself, the marketing director, and the creative/brand director in order to develop button concepts that satisfied cross functional needs.

Aside from writing global rules, a big part of a design system is clearly documenting components. This way they are easily reusable and identifiable for both designers, developers, and stakeholders.

Once the rules were set in place for the majority of content on the page, I went back to the top to create spacing templates for heroes. With this, the marketing team now has everything they need to design heroes with imagery, with imagery and a CTA, and heroes that are text only. Below is an example of the rules for XL screen sizes (1280px):