The problem
UCSF often talks about complex news, and we need to speak about that news flexibly, engagingly, and intuitively.
The solution
Using our content management system, create a flexible design system that will allow us to easily group stories, pull in multimedia elements, create impactful landing experiences, and provide high-touch moments of delight.
The process
While every new element has its own backstory, the procedure is almost always the same.
Step One: Clarify the Need
Whether the need is a result of routine user testing or a raised stakeholder concern, confirm what we’re trying to do.
Step Two: Prototype and Validate
Before investing in development, create a responsive design to test assumptions while gaining partner buy-in.
Step Three: Design and Iterate
Working with cross-functional teams, create a high-resolution design that meets technical requirements.
Step Four: Development and QA
Work with the dev team to implement and QA the new design before integrating it into our CMS.
Step Five: Training
Ensure that all content editors are aware of the new feature and know how to use it effectively.
The results
Designing our news experience has been an iterative process. From new parallax features to a variety of banner styles, here are some of the things I’ve created.
These have resulted in higher engagement, increased page views, and positive feedback.
Animations
Subtle animations that give a sense of responsiveness without overwhelming the user.
Content Cards
Easy and branded integration of article cards in either a landscape or square display.
Banners
A variety of landing heroes ranging from edge-to-edge video to split-screen vertically-oriented displays.
Interactive Embeds
Accessible, responsive ways to add interactive elements, from 3D embeds to charts.
Parallax Moments
A full-width image and overlay treatment that pauses a user to help them register an accompanying quote.
Calls-to-Action
A broad range of call-to-action styles, driving users toward desired behaviors.
Image Displays
A variety of image placement styles, including gallery and carousel components.
Device-Level Design
The ability to reorder, shift, and change out content across desktop and mobile.
Examples