Children’s Hospital at VCU Health Website
Role: UI Designer

I was the UI Designer for The Children’s Hospital at VCU Health website. They decided to do a brand refresh and wanted an updated website design with a “on brand” experience. My objective was to design a look and feel for the site that delivers on the Children’s Hospital brand and translate that into a comprehensive library of digital guidelines.

Presented here is an insight into the process and the design of the website. I have included a range of the template designs, responsive designs and the design system. Some of the work is still FPO but the idea was to get the site built and continue to evolve the look.

Brand Experence: Fun, Bold, Simple
Key elements to Brand’s visual expression
-Should be easy to work with and have family look and feel-Needs to be simple and orderly
-Should work with any age patient, can’t be too babyish
-Should have a dose of fun but still be purposeful
-Our kids are bold and we have to be bold too
-Should have the same DNA as VCU Health but also some independence

Page Layout
The creative brief from the discovery phase inspired the new visual expression for the website. Also, the creative brief identify the page styles to be used as the base of the site’s design.

With one concept selected and refined, the visual ingredients captured in the context of these designs will become the core of a new Children’s Hospital digital design system.

Visual ingredients include:
-Page layout
-Type hierarchy
-Rollover states
-Forms / Login
-Menu bars
-Use of iconography

Responsive Design
I designed the site to a basic responsive grid, aligning headlines, titles, images and lots of content at different indentations to create a visually interesting flow to the page. This grid easily adapts to different screen sizes.

I selected Quicksand because it was used in their print and marketing materials. Quicksand is a playful, bold, easy to read typeface which fits their core brand elements.

Production Design
The production design consisted of the selected template pages that translated into atomic assets. Paired with guidelines, these atomic assets form a system with which on-brand digital applications can consistently be built.

I develop a digital specification system and guidelines document. The system was delivered as high fidelity mock-ups in Zeplin for engineering

Just a few places that I’ve worked at