Role
Lead UX Designer
Year
2022
Content modeling and DSM documentation
A new CMS and Design System that is beautiful and easy to use for content authors, designers, developers, and patients.
Overview
The Digital Experience and Web Development teams sought to improve the look, feel, and performance of our public sites. We planned to migrate our sites to a new CMS. The new CMS presented an opportunity to revamp our design language.
The UX/UI team created a new Design System that was based on Atomic Design, followed UX/UI best practices, met WCAG 2.0 AA accessibility requirements, and looked clean and friendly.
The new CMS also allowed us to create content models, define labels and help text, and outline design options that connected directly to the components in the DSM.
Goals
Create a DSM that fully documented the stylistic and functional requirements for reusable components.
Design simple, user-friendly content models for designers, developers, and content creators.
Team
Product managers
UI designers
Web architect
Web developers
Users
Sharp.com site visitors
Content authors
Designers
Developers
Results
Sites are live using the new CMS and DSM components.
With foundational blocks and components in place, building pages and new sites is substantially faster. A single page can be built and published in a few minutes.
We have a single source of truth that anyone on the Digital Experience or Web Development team can access.
Process
Identifying the opportunity
The Digital Experience and Web Development teams chose to use Contentful as our new CMS tool for our web entities. Contentful provides a very open-ended content modeling system, in which we can choose our fields, their labels and help text, and how they are displayed to the content author.
From previous experience with other CMS tools, I identified an opportunity to design the content authoring experience. My goal was to bridge the gap between development and design and make the content authoring experience as easy as possible.
Creating models aligned with design
As I created new models, I worked very closely with the design team and Web Architect to ensure the models supported the design features and behavior. This was a collaborative process with thorough review to make our components flexible, reusable, simple, and clean.
Over time, I created a shared document outlining the different components, blocks and templates. I organized recurring design review sessions to pull in designers, developers, and product managers to align on the requirements.
Once documentation for a component was complete, I created the content model in Contentful and formally outlined the specs within the DSM as the official source of truth. All decisions needed to be documented before marking the component as ready for development, ensuring that developers had everything they needed before they started work.
Throughout the development process, I managed discussions with developers and designers to make adjustments and resolve conflicts. Developer and designer feedback was crucial to eliminate unecessary complexity and improve usability. We closely reviewed all components before they were marked ready for release.
Training and handoff
After the site launched, I facilitated training sessions for content authors to learn the new process and CMS tool. We held office hours to handle any questions that arose as they built out new content.