Derrick Boyd Product Designer

Case Study UH Design System

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 has continued to evolve over the years and is never fully complete.


The Team

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

Adobe XD
Sketch
Sitecore

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

Colors

Typography

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.
Buttons

Iconography

Design system iconography

Form Elements

Form Elements

Hire Me Today Let's Make Your Next Project Stand Out