University Hospitals Component Library

Derrick Boyd

0

UX Designer

Design Systems Specialist

UI Designer

Adobe XD

When I started at University Hospitals we were already halfway done with a total redesign of the company website. I had to pick up where another designer left off in finishing the redesign. We didn’t yet have a design system so I thought taking the giant Sketch file I had and distilling it down to a unified design language would be the best way for me to dive into my role. It continued to evolve over the years as we iterated on things and improved components.
My Role
UI design and curating design elements
Who I Worked With
Front-End Developer, Designers

Research & Discovery

I did a bit of research into how other companies were going about things and what best practices were. I decided to follow the Atomic Design methodology . This was a great way to combine a lot of smaller pieces to create useful larger parts. It allowed me to work much quicker and not “reinvent the wheel” whenever I create new feature was being worked on. I was really inspired by the design systems of companies like MailChimp, SalesForce and Airbnb.

Software

At different points in my journey I’ve used different software. I started out using Sketch and at one point tried to support both Sketch and Adobe XD. I quickly realized that I didn’t have the capacity to do that all by myself. I decided to work exclusively Adobe XD a couple years ago for all UH projects and have been enjoying it.

Color Palette

Typography

Buttons

When I started working on the UH Design System we had many different button styles without any real reasons defined on why one would be used versus another. We’ve over time pared it down to just a few to bring more consistency to what we do.

Iconography

Form Elements

Like this project
0

Posted Aug 3, 2023

A continually evolving design system that made it easy to reproduce the University Hospitals design language across a multitude of products.

Likes

0

Views

55

Clients

University Hospitals

Tags

UX Designer

Design Systems Specialist

UI Designer

Adobe XD

PLAN: Event Planning App Design
PLAN: Event Planning App Design
Cleveland Clinic Web Appointment Form
Cleveland Clinic Web Appointment Form
University Hospitals Account Dashboard
University Hospitals Account Dashboard