Creating a design system
Modernizing legacy software and improving usability
Results
An immediate 23.33% increase in user satisfaction for projects using the new styles
Users polled described the new styles as Clean, Modern, and Clear compared to the old styles
Projects using the new styles fixed up to 10+ accessibility issues
Editorial Manager (EM)
20+ year old scholarly publishing submission system, highly configurable but inconsistent
Issues
Outdated UI, complex workflows, visual inconsistency, minimal brand presence
Goal
Modernize the UI, improve usability, and increase user satisfaction
Examples of old EM designs
The challenges of multiple brands
Challenges
No existing user research
Multiple conflicting design styles
Needed to support multi-brand flexibility
Align with parent company branding
Preserve deep customer configurability
Ways of aligning
Line height was used to align brands and create visual consistency
Areas of alignment
Text styles and sizing
Page grids
Content spacing
Page layout
Using neutral colors on certain components
Creating components: Buttons
Button component results
4 variants to align with page action priority
Visual alignment with the main company, parent company, and designed to work with third party brands
New variant, a danger variant, which was created and then adopted by the parent company for their design system work
Usage guidelines established for devs and designs working on these in the future
Examples of primary, secondary, text and danger button variants
Usage Guidelines
For each component, I created detailed usage guidelines to ensure correct and consistent implementation across teams.
Guidelines Covered
Design specs - spacing, color, typography, states, and variants
Usage rules - when and how to apply each component
Recommendations/Accessibility considerations - color contrast, keyboard nav, ARIA roles
Audience - written for both designers and developers
16 sets of guidelines were created to support scalable, brand-aligned, and accessible design.
End results
Results
An immediate 23.33% increase in user satisfaction for projects using the new styles
Users polled described the new styles as Clean, Modern, and Clear compared to the old styles
Projects using the new styles fixed up to 10+ accessibility issues
Elements of the new visual styles began to emerge even before official work on the design system commenced. Over the course of a year, I contributed to the design system intermittently, refining components, fine tuning the usage guidelines, and establishing visual consistency. Eventually, the business recognized the need for a more unified approach across its entire product suite and the company opted to pursue a single, consolidated design system. Work on this system was paused but eventually incorporated into this broader initiative, where my work was used as the foundation for the the visual components and usage guidelines.
The Editor Main Menu using the new design system styles
The Reviewer Selection Summary page using the new design system styles
