When our User Experience Design team had the opportunity to create new templates and page elements for www.hopkinsmedicine.org, I got to design the components our content and production teams would use to display their work.

We realigned some of the editor styles that had been used generically to bring them back to a defined purpose with styles to match. No longer would we have generic styles, or styles that could be confused for something they’re not. One of the most satisfying updates was adding quotation marks to the quote style. It previously only had a background color which gave it real credence as a generic-use style, but the markup was wrong. That’s bad for accessibility and our efficiency at controlling the platform for easier maintenance and growth.

What our content and production teams also needed was a simple way to build complex components in the content management system (CMS). The solution for this was to design about a dozen functionally different modules that are built through a series of editable fields and uploads. Once all the needed and required fields are filled out, the component is placed on the page without engaging in the difficulty of the CMS. For as much as I preach designing systems that are device-agnostic (in many ways you can think of this as mobile-first design), it’s a little ironic that I’m only showing the desktop layouts of these modules below. One of the best parts of this work was laying these out for small screen and then elaborating on the style for large screens. (The core functionality remains the same regardless of size.) If you’d like to discuss the mobile version of these components, or their many variations, just ask!