Legacy
Design and development of digital products in HMH was initially set up with much print design legacy.
• Content division was based on print page sizes
• Was often excessively long on screens
• Excessive accessibility bugs
• Assets did not follow best-practice for digital content
• Design quality far below par for the market position
The process used patterns but was based on a vendor model where revolving teams of offshore coders worked on task-level only, constantly losing knowledge as the teams shifted.
• Disconnection between the back end, front end and the design produced bloated, conflicting code and sub-par visual and end-user experience
• The over-the-fence approach gave no platform for learning or growth between front-end development to the design team
• No holistic vision of product development
• Poor morale on internal teams
Change
• In order to succeed in the newly opened 2021 Florida market, an overhaul of the product was given a corporate green light and I led design into making more than was expected of this opportunity.
• An audit of styles led to strategic reduction and alignment, making decisions with a digital-first mindset
• Content divided by cognitive sections and load speed, not print page content
• To avoid outsourcing front-end dev work, I interviewed and mentored a new hire – a front end designer – who completely re-configured bloated baseline code and began coding our patterns inside the design team
• United a team around this vision to bring in QA, Learning Experience Design, and our internal back-end dev team through small trials, and constant communication
• Turned valid design research into an applied, repeatable design process
• With more ownership in the design team, I was able to direct a much higher quality of design based on a holistic vision
• Wrangled one of the US’s largest core education products from a 13,000-page complex experience into something we could build with just 27 repeatable patterns of precise, unified styling and in-built accessibility
Typeface Choice and Header Hierarchy
Colour structure to aid understanding
Text devices
Success
• Despite being the largest product ever developed in HMH, this version returned the fewest QA bugs in our digital product history
• Baseline code was reduced by 74%. Total code reduced by 91%
• Entirely removed the need to vendor out front-end coding, a saving of almost $100,000
• The product began in Florida and has (in 2021) taken the Open Territory sales wins from 35% to 49% in less than a year, in a $520million market
• Drastically reduced friction between design and development
• Internal resources kept low with efficiency greatly increased: My entire digital design team was just one junior designer and one front-end designer
• Created a reusable system on a best-practice, accessible design framework
The journey through the product
The following show the path a student takes through the product and what was designed to help them stay engaged and enjoy this journey.
Some tablet and mobile screens below plus a video walk-through of the digital experience.
Building future successes
Using Into Literature, we were able to create a new process flow which connected to the design vision, and the strategy. We used a design system that we also created on the back of this project, as well as building in accessibility to all patterns in the library where as we previously had to retro-fit this to the product.