Case Study - 2020

Designing a theme editor for editorial websites

Company
Chorus x Vox Media
‍
Year
2020
‍
Skills
User Research
Information Architecture
UI/UX Design

Project Type
Design Systems
Chorus set out to create a design system for editorial websites. The foundation of this system being a core framework of design tokens. Using tokens provided two key benefits 1) it would make styling a website easier and 2) it would allow editorial teams to style their site however they liked.

Our goal was to create a workflow that allowed anyone regardless of their design or development proficiency to spin up a new website and quickly style it to their liking. This goal was largely dependent on finding a balance between standardized and customized styles. With this in mind, I explored possible UI solutions for how a tool like this would work. Below, I breakdown the key steps (user flow > wire flow > wireframes > prototype) I took to create Chorus's vision for a flexible theming system.
User Flows
Our design team observed a handful of editorial teams paying close attention to how they themed their site and managed them day to day. We surfaced patterns that presented opportunities for optimization and illustrated them in a series of user flows which is summarized below.

This new workflow would make creating a new theme and styling it to completion not only easier but a lot faster. This meant that new customers would be able to onboard themselves without doing too much of the heavy lifting.
Wireframes
After getting a general sense of the workflow, I started to explore possible UI designs. Initially, my ideas were very abstract drawing inspiration from other theme editors. Ultimately, those screens evolved, landing on a strategy that capitalized on our optimized workflow and created space for any user to play around with different styles, preview them and publish.
Final Wireframes
The final wireframes illustrate the core principles we set out to encapsulate in this theming experience: ease of use, accessibility and customizability all while still holding true to a strict design token structure.
Harmony Theme Tooling
The Harmony Theming UI highlights Chorus's optimized approach to the editorial design process. It balances proscriptive design standards while giving the user freedom to be creative and unique.
Upload custom fonts
Easily switch between different modes like white & dark mode
Final Prototype
Open the prototype and walk through several basic theming workflows like uploading new fonts, adjusting type elements, adding new colors, toggling dark/light mode and previewing.
Open prototype >>

Redesigning the story curation experience

There’s no formula for a well-designed product. Let’s work together to figure out your unique UX/UI challenges.
Read case study >>
Check out more of my work.
An image of The Washington Post Arc Publishing logoHivewise logo
Back to top button