The Connected Teaching System is Houghton Mifflin Harcourt’s proprietary SaaS education platform.

I served as lead designer for the Connected Teaching System design team, collaborating closely with our development base in Dublin to provide brand supervision and user interface guidance. I was also responsible for developing and implementing a series of innovative, scalable illustrations that would elevate our brand and create moments of delight across the platform. User testing and B2B market research helped shape my approach to ensure a customer-focused result.

A desktop mockup of the login page featuring an illustration of a desk with a computer, lamp, water bottle, and plant

Empty states were an optimal opportunity to implement illustration in a way that drew platform users’ attention, prompting them to customize their experience while bringing a warm and friendly tone to their customer journey.

Illustrations framed by green organic shapes, featuring objects like a tablet, a calendar, an alarm clock, and a post-it note
A screenshot of illustrated empty states on the Ed dashboard
Illustrated guidelines for using tech hardware

The same treatment can also be leveraged to bring emphasis and visual interest to different points of engagement across the platform.

A set of unit completion prompts featuring illustrations of a medal and a trophy
A 404 error webpage mocked up on a desktop, featuring a dog eating homework; image reads "the dog ate our webpage!"

We also explored creating visual interest through the use of figure illustration, which created a more authentic lens for users to visualize themselves across the experience. The illustrations were created to be scalable and customizable for maximum flexibility:

Two person illustrations framed by organic shapes: one of a girl at a desk working on a laptop, and another of a teacher holding a tablet and book
A set of portrait illustrations featuring a middle-grade Black student with glasses, a professor who is waving, and an elementary-aged girl smiling
A set of portrait illustrations adjusted for scalability

Our subject banners also required a scaleable treatment to adapt to the needs of our interface. We shaped the banners through A/B testing and market research and provided responsive guidelines to developers for handoff:

A set of illustrated web banners and accompanying scalability guidelines

Accessibility was another important consideration in our design approach, especially as we looked at updating interface formatting. In addition to using alt text for all of our illustrations, we adapted our master brand palette and applied unique guidelines to ensure WCAG 2.0 compliance on all essential color applications. We also developed an interface palette to institute a more intuitive visual hierarchy across the platform.

A set of color palettes labeled "primary and secondary", "proficiency", and "interface"
A laptop showing a teacher assessment interface
A snapshot of a style guide detailing iconography, illustration, colors, and UI elements for the CTS platform