Lead Designer
Figma - Zeplin
4 months
The Challenge
Zaner-Bloser's marketing site had dozens of custom HTML product pages that created significant operational bottlenecks. Each content update required developer time, creating delays and preventing the business from responding quickly to market needs.
The Core Problems:
Developer dependency: Every content change required engineering resources, creating bottlenecks and slowing time-to-market.
Inconsistent experiences: Each custom HTML page had different layouts and patterns, creating confusion for users navigating between products.
No scalability: Adding new products or updating existing ones was time-consuming and expensive.
Content marketing needs: The business wanted to add a blog for content marketing, but the existing architecture couldn't support it.
High maintenance overhead: Managing dozens of custom pages drained resources and prevented innovation.
The Process
I led UX strategy and design for this migration, working with a cross-functional team to transform a static site into a flexible CMS while managing competing priorities and tight timelines.
What I Led:
End-to-end UX strategy and design
Content type architecture and templating
Design system development
Blog UX design and team direction
Accessibility compliance (WCAG 2.1)
Cross-functional collaboration and stakeholder management
Phased implementation strategy
My Approach:
Audit existing content to identify patterns and create flexible templates
Build design system for consistency and efficiency
Navigate conflicting priorities through phased delivery
Empower content teams with self-service capabilities
Ensure accessibility standards across all pages
Cross-Functional Collaboration
Working with Development
Agile partnership: Used Figma-to-Zeplin workflow and provided ongoing design direction throughout sprints, ensuring accurate implementation.
Technical feasibility: Collaborated early with developers to understand Drupal constraints and design within platform capabilities.
Working with Stakeholders
Managing expectations: Navigated the blog scope addition by proposing phased delivery that kept the project on track.
Educating on value: Helped product owners understand the long-term benefits of building a solid foundation before adding features.
Empowering Content Teams
Self-service design: Created intuitive CMS interfaces that enabled non-technical users to update content confidently.
Training support: Designed the system to be learnable without extensive documentation.
The Solution
Challenge: Competing Priorities
Mid-project, stakeholders wanted to add a blog implementation to the scope. This created tension around timelines and resources—trying to deliver both simultaneously would have derailed the core migration.
How I Navigated This:
Proposed a 2-phase implementation strategy
Phase 1: Focus on product page migration and foundational design system
Phase 2: Build on that foundation to add blog capabilities
Educated stakeholders on the value of sequential delivery vs. trying to do everything at once
The Result: Project stayed on track, and the phased approach actually improved outcomes by allowing us to refine the design system in Phase 1 before applying it to the blog in Phase 2.
Phase 1: Product Page Migration
Content Analysis & Architecture
I audited existing product pages to identify content patterns and designed a single, flexible Drupal content type that could accommodate all product variations—from simple handwriting workbooks to complex curriculum packages.
Design System Development
Built a comprehensive UI component library and style guide that established:
Reusable design patterns
Brand consistency standards
Accessible design components
Developer-friendly implementation guidelines
Unified Product Template
Created wireframes and high-fidelity designs for a standardized product page template that:
Accommodated diverse product information types
Maintained consistent user experience
Met WCAG 2.1 accessibility standards
Enabled content teams to manage pages independently
Phase 2: Blog Platform
Design Direction & Team Leadership
Designed initial wireframes and components for the blog section, then provided design direction to the UX/UI designer for completion. This approach:
Leveraged the design system created in Phase 1
Ensured consistency across product and content marketing experiences
Allowed parallel work streams while maintaining quality
Measurable Outcome
Content team independence: Content teams can now update all product pages without any development work—eliminating the bottleneck entirely.
Consistent user experience: Unified layout and navigation across all products created predictable, accessible experiences.
Rapid product launches: New products can be added quickly using the standardized template, reducing time-to-market.
Successful blog platform: Integrated content marketing capabilities with consistent design standards.
Reduced maintenance overhead: Streamlined content update process freed development resources for innovation.
Accessibility compliance: All pages meet WCAG 2.1 standards, expanding market reach.
Scalable foundation: System supports ongoing business expansion without architectural changes.
Key Learnings
Phased delivery creates better outcomes. Breaking the project into two phases didn't just keep us on schedule—it actually improved the final result by allowing us to refine the design system before applying it to new features.
Stakeholder education is essential. Taking time to explain why phased delivery was better than simultaneous delivery built trust and prevented scope creep from derailing the project.
Content patterns drive template design. Auditing existing content thoroughly at the start revealed patterns that made the template more flexible and useful than if we'd designed abstractly.
Empowering users requires thoughtful design. Creating true self-service capabilities meant designing not just for end users, but for the content teams who would manage the pages daily.
Design systems pay dividends. The investment in a comprehensive design system in Phase 1 made Phase 2 faster and more consistent, and continues to accelerate new initiatives.
The Zaner-Bloser CMS migration transformed operational efficiency by eliminating developer dependencies and empowering content teams with self-service capabilities. Through strategic phased delivery and thoughtful design system development, we created a scalable foundation that continues to support business growth.
