Design System:
Harvard Business Publishing Education
-
Expertise
ux design
product design
research -
Platforms
figma
sketch
jira
confluence
usertesting.com -
Colloborations
users: educators
developers & QA
product owners
customer service
sales
marketing
Project Overview
This design project showcases the journey of creating, implementing, elevating, and maintaining a robust design system. As a seasoned designer, I worked with the team and a vendor on developing a comprehensive design system for the Harvard Business Publishing Education Website, resulting in a streamlined, fully accessibly, and cohesive user experience and development process.
The website already existed, and was in use by many educators. Our team partnered with a vendor who evaluated the User Experience of the existing site looking for usability improvements. I joined the team post-audit and worked with our vendor on our new design. We team created our new website design system using some general branding guidelines from Harvard Business Publishing and expanding to fit our audience and goals.
audit image from vendor about accessibility of the old design
audit image from vendor about variety of pop up and modal styles in the old design
Wirefame of simplified layout
Creation Phase
Once the design system was finalized, I lead its implementation across various stages expanding and fine-tuning as we worked on more complicated elements like Coursepacks. Working alongside a multidisciplinary team, I ensured the seamless integration of the design system into the existing site. By establishing clear guidelines and providing detailed documentation, I empowered the development team to leverage the design system effectively.
Implementation Phase
Elevation Phase:
After the initial implementation, I continued to refine and elevate the design system to adapt to evolving design trends, user needs, and technological advancements. Through iterative feedback and continuous user testing, I enhanced the design system aiming for consistency, usability, and accessibility across all platforms. I fostered collaboration with stakeholders, encouraging their involvement in the design system's evolution, resulting in a collective sense of ownership.
Maintenance Phase
Figma was introduced into the company well into the redesign process. So we learned as we created. As we learned more and more, our previous components needed updating and cleaning up. We made sure to always upkeep our Design System File as a navigable Source of Truth for any team member to explore. Furthermore, I provide training and support to any new team members, ensuring their proficiency in utilizing and extending the design system effectively.
Product Owner
“Post-launch, [the website] averaged 25 more Educator registration completions per day (YoY) when the [new page design] was the entry page in the visit. Heatmap tracking shows significantly more activity on the [free trials] & Videos… for Simulations. Survey results showed 67.2% of participants responded it was easier to find information on the redesigned page”
Outcome
Through the creation, implementation, elevation, and maintenance of this comprehensive design system, I enabled the team to achieve a cohesive and delightful user experience across their digital platforms. The design system acted as a foundation for future design initiatives, promoting efficiency, scalability, and brand consistency. It significantly reduced design and development time, empowering the team members and stakeholders to focus on innovation and user-centered solutions.
