Building a Design System to Scale Penn Foster's Website Redesign and Rebrand
Sector: eLearning, edtech, ecommerce
Challenge: Build a scalable design system in parallel with a rebrand and website redesign project with a small team, while managing complex technical constraints of the Sitecore CMS platform.
My Role: Creative Direction, Design System Strategy, Research, Documentation, UI Design
Collaborators: Penn Foster: Sarah Kinney (UI Design), Brittany White (Web Strategy), Bobby Mullins (Front End Development) | ZeroDegrees: KC Lee (Experience Design)
Timeline: 6 months (2019-2020)
Platform: Sitecore CMS, Adobe XD, Zeroheight
Deliverables: Component library, design tokens, brand documentation, developer handoff specifications
Executive Summary
I led the creation of Penn Foster's first comprehensive design system, "Hinge," during a simultaneous rebrand and website redesign. By conducting a thorough UI audit across multiple properties, establishing Atomic Design principles, and creating reusable components in Adobe XD, we built a scalable system that increased design and development velocity while ensuring consistency across all digital touchpoints. The system successfully bridged brand and product design, serving both B2C marketing and B2B partner experiences.
Research & Foundation
The Strategic Opportunity
During my time at Penn Foster, I participated in an Atomic Design Workshop with Brad Frost and became convinced that implementing a design system could solve many of our challenges. When the organization decided to rebrand and redesign our website several years later, I recognized this as the ideal opportunity to build a design system from the ground up. I successfully proposed a design system to efficiently scale the UX work produced by the external agency we were collaborating with, while ensuring long-term consistency and velocity for our internal team.
Cross-Functional Collaboration
We managed the rebrand internally and enlisted the UX agency Zerodegrees to assist with web strategy, comparative research, and UX design. Working alongside our Senior UI Designer and Front End Developer, I took charge of the design system project. Since our marketing website was built on Sitecore, we collaborated closely with our Sitecore content manager and backend developers to gather requirements and develop components that met the content management system's constraints.
UI Inventory
We dedicated several full working sessions to conducting a comprehensive site inventory using Brad Frost's interface inventory methodology. With support from the content team, we audited our B2C and B2B marketing websites, partner sites, blogs, and affiliate landing pages. We captured screenshots and organized them in a shared workspace. The audit revealed significant inconsistencies across all our web properties, providing concrete evidence that reinforced the need for a systematic approach to design.
Buttons
Forms
Typography
Cards
While this research was underway, our UX agency developed user flows and wireframes for the Sitecore redesign. Once the mid-fidelity wireframes received approval, the assets were handed off to our team. We then began designing atomic-level tokens, components, and templates within Adobe XD.
Building a Scalable Component Library
We applied our new brand guidelines to create atomic-level styles that served as the foundation for a comprehensive component library. These components were designed to be flexible enough to serve both our marketing and product needs while maintaining brand consistency.
Our development workflow ensured quality and collaboration at every stage. Components were developed in a front-end repository and deployed to a private staging site for visual quality assurance. After the design team completed visual QA, the validated components were handed off to backend developers for integration into Sitecore.
Artifacts
Impact: Establishing Design Operations and System Thinking
By creating a library of reusable components, we fundamentally changed how design and development worked at Penn Foster. The design system increased our velocity while establishing a more consistent and accessible experience for users across all digital touchpoints.
Business Impact:
Accelerated website redesign delivery by providing ready-to-use components to the development team
Reduced design and development time for new features by 40% through component reuse
Improved brand consistency across 8+ web properties following the acquisition
Established a single source of truth that bridged marketing and product design teams
Created a foundation for design at scale as the organization grew
User Experience Improvements:
Increased conversion rates through consistent, optimized user interface patterns
Improved brand perception by creating a cohesive visual language across all touchpoints
Reduced user frustration and bounce rates through standardized interaction patterns
Enhanced accessibility through systematic component testing and documentation
Team & Process Transformation:
Introduced Atomic Design methodology to the organization, establishing a shared design language
Created documentation workflows that improved designer-developer collaboration
Built the first comprehensive design system at Penn Foster, establishing design operations practices
Reduced back-and-forth during development through detailed component specifications
Personal Growth:
Discovered a passion for systems thinking, agile methodology, and documentation
Gained hands-on experience managing complex dependencies between brand, product, and technical teams
Learned to advocate for design infrastructure investments with executive stakeholders
Developed expertise in design system governance and maintenance strategies
Key Learnings:
This project taught me that design systems are as much about people and process as they are about components. The success came from involving developers early, documenting clearly, and continuously evangelizing the system's value across teams.
If I were to do this again, I would invest more time upfront in defining governance models and component ownership. We also learned that maintaining a design system requires dedicated resources; as the system grew, we needed clearer processes for updates and version control.
The most rewarding aspect was watching the system become embedded in how teams worked. When developers started requesting new components and designers naturally reached for the library first, I knew we had successfully shifted the culture toward systematic design thinking.