Building rules so everyone can design
IntelyCare is a leading healthcare talent platform that provides nursing professionals with work opportunities, education, and resources. I was brought onto their marketing team to lead the UX redesign of their website to coincide with their new rebrand. This included redesigning both old and new web pages to fully align with their new brand positioning and creating easy, intuitive interfaces for their customers to work with.
While designing, I created rules and styles that all IntelyCare web pages should follow. This resulted in a design system that sped up the rate of pages going from concept to production by 80%. It also gives others on the marketing team the proper building blocks they need to design pages themselves.
IntelyCare
September 2023 - February 2024
Lead UX/UI Designer
Systemization of typography, grids, buttons, cards, forms, margins, and heroes while simultaneously designing 13 responsive web pages.
IntelyCare needs a system of rules and styles for their website in order to increase the speed and efficiency of their 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):
This experience opened my eyes to the power of design systems. Every time a new rule was implemented, the marketing team would get more efficient in both design and development. It was a pleasure to work with IntelyCare and I look forward to the opportunity to systematize team designs again soon.
