Translating Editorial Style Guides to Digital Content Management Systems
In my work with Zehno both on the agency staff and as I contractor, I had the opportunity to work with a stellar editorial strategy and design team on a variety of magazine projects.
For most, my role consisted of site architecture, UX planning related to laying the groundwork for a modular design system, and interface design, working to adapt the work of the print design team into layouts and components that would work for the magazine’s online editions.
Bucknell Magazine was one of my favorites from this set of work.
Agency
Zehno
The Team
Lauren Sanders, visual design
Shane Shanks, strategy and UX writing
Myself, UX and interface design
More work by this team
My role
Led stakeholder workshops and interviews
Created site architecture
Created low fidelity wireframes
Designed high fidelity web interface
Produced HTML/CSS/JS
Worked closely with developers on CMS integration
Trained editorial staff
Bucknell Magazine
Homepage system
The homepage These designs show the homepage system assembled, with variations on the featured story image display to allow for options across color, typeface, and cover image orientation.
Feature story theming options
The system sorted feature stories and standard stories into two distinct article page types. For feature stories, the goal was to bring the richness of the print magazine to the web in a way that would not tax an already overworked staff, so we aimed to provide a varied set of content components that could be combined without the need for heavy art direction. We began by auditing the print magazine feature stories to identify these building blocks: story ledes, pull quotes, etc. We created a new context for the Story Cover component used in the homepage slider to allow for quick choices to be made between image orientation and typefaces. I created a theming option on the article page level, to allow a choice between two themes that let editors take advantage of some of the typographic and stylistic variety of the print magazine. These styles had variation in the primary typeface used throughout and stylistic flourishes for the other component pieces of the feature story toolkit, swapping out separator styles, dropcaps, and other small touches.
Prototype Testing & Refinements
We tested our navigation and homepage designs using a high fidelity InVision prototype with a group of 10 alumni readers of the magazine. Our findings suggested that a more traditional navigation structure would serve users best, so we made that adjustment. We also added a scroll prompt after it became clear that the large featured story size was stopping up some of the older users from making their way further down the page.
Other Page Types & Components
Outcomes
With the tandem print and online design launch, Bucknell won awards from UCDA, Cuppie Awards, Education Digital Marketing Awards, Educational Advertising Awards and CASE.
