IntelyCare

Project Overview

I led the UX redesign for IntelyCare's rebranded website, making it more user friendly and aligned with their new brand guidelines.

During the process, I created a set of rules and styles for all IntelyCare web pages. This resulted in a design system that sped up the rate of pages going from concept to production by 80%, and provided the marketing team with the tools they needed to design pages themselves.

Client

IntelyCare

Timeline

September 2023 - February 2024

Role

Lead UX/UI Designer

Deliverables

  • Design System including 7 distinct components
  • 13 responsive web page designs

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?

Background

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:

  • Typography
  • Grids
  • Buttons
  • Cards
  • Forms
  • Heroes

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.

Typography

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:

Spacing

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.

Buttons

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.

Components

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.

Heroes

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):

Reflection

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.

Other Works