Overview
Zaner-Bloser needed to migrate their handwriting education marketing site from static HTML to a flexible CMS, standardizing dozens of custom product pages while adding a new blog section—all while maintaining brand consistency and giving content teams independence.
UX Lead & Designer
Figma - Zeplin
4 months
The Problem
Zaner-Bloser's marketing site had dozens of custom HTML product pages that created significant operational challenges:
Each page required developer time for content updates, creating bottlenecks
Inconsistent layouts and user experiences across product pages
No scalable way to add new products or manage existing content
Needed to add a blog section to support content marketing efforts
High maintenance overhead and slow response to business needs
The Process
1. Content Analysis
Audited existing product pages to identify content patterns and design a single, flexible Drupal content type for all product variations.
2. Wireframing
Created wireframes for the standardized product template, ensuring the structure could accommodate diverse product information.
3. Design System Development
Built a comprehensive UI style guide and component library for consistent branding and reusable design patterns.
4. Blog Design & Team Leadership
Designed wireframes, components, and initial mockups for a new blog section, then provided design direction to the team UX/UI designer for phase 2 completion.
5. High-Fidelity Design
Applied the design system to wireframes, creating polished designs that met WCAG 2.1 accessibility standards.
6. Development Handoff
Used Figma-to-Zeplin workflow and provided ongoing design direction throughout agile development sprints.
Solutions
A unified content management system featuring:
Single Content Type – One flexible template that accommodates all product variations
New Blog Platform – Integrated content marketing capabilities with consistent design standards
Modular Design System – Reusable UI components ensuring brand consistency across products and blog
Accessible Design – All pages meet WCAG 2.1 standards
Business Empowerment – Content teams can update pages without developer support
Team Leadership – Managed UX/UI designer to ensure cohesive execution
The Outcome
Successful implementation of dynamic CMS templates
Blog Platform Launch – Successfully launched integrated blog section with consistent design standards
Business Independence – Content teams control their own updates
Consistent Experience – Unified layout and navigation across all products
Scalable Growth – New products added quickly using standardized template
Reduced Maintenance – Significantly streamlined content update process and reduced development bottlenecks
Future-Proof Foundation – System supports ongoing business expansion
© 2025