Project Overview
HMH is an e-learning company that delivers learning solutions to over 50 million students in more than 150 countries. This project's objective was to develop an interactive learning pattern library to enhance design processes and streamline content creation for a range of e-learning products.
I led the design systems team in creating a comprehensive pattern library consisting of 23 learning patterns, specifically tailored to meet the unique needs of K-12 students across three grade bands (K-2, 3-5, and 6-12) and various subjects, including Math, History, and Literature. And eight authoring Patterns for content creators.
Visit HMH Pattern Library for the work.
My Role
Pattern Library Development & Maintenance
Wireframed, designed, and owned the Pattern Library site, serving as a centralized resource for product owners, project managers, business analysts, designers, learning architects, and engineers.
Ensured design consistency and usability across the organization by providing training sessions on pattern customization and leading usability testing initiatives.
Design Training & Education
Tailored training sessions to meet the diverse needs of UX designers at various levels of experience and team maturity.
Facilitated knowledge transfer and adoption of design patterns, promoting efficient and consistent design practices.
Usability Testing & Optimization
Led usability testing projects for the Pattern Library, from planning to execution.
Analyzed test results to identify areas for improvement and conducted follow-up workshops with relevant stakeholders to address usability issues and refine the pattern library.
Collaboration & Stakeholder Management
Worked closely with learning architects, engineer leads, and designers to ensure alignment and effective implementation of pattern library updates.
Played a key role in establishing a baseline for version 3 pattern library perfection, incorporating improvements in content, design, technical aspects, and usability.
Skills
Design Process and Methodology
Design Thinking
Systems Thinking
Systematic Design
User-Centered Design
Agile Methodologies
Prototyping
Design Systems and Libraries
Design Systems Development
Pattern Library Creation
User Research and Experience
User Research
User Experience (UX)
User Interface (UI)
Interaction Design
Information Architecture (IA)
Accessibility
Product Adoption and Strategy
Driving Product Adoption
Case Study
Audio Gallery
The Audio Gallery pattern was initially developed by the Next Generation Science Standards (NGSS) team, but the design was specifically tailored for that product and had become outdated. To enhance broader reusability, accessibility, and alignment with current pedagogical requirements, I evaluated and improved the design.
Challenges
The Audio Gallery pattern needed to be highly reusable and customizable for various types of learning content, including Literature, Social Science, Math, and more.
The pattern had to adapt seamlessly across six screen sizes, from portrait mobile to large desktop.
It was essential to meet pedagogical requirements and comply with WCAG standards at the AA level.
User Research
I took on the role of lead UX/UI designer, overseeing the entire lifecycle of a pattern design, from user research through UX, UI, interaction design, and user testing.
User Testing
I tested the pattern and discovered the following:
All users perceived it as a single audio track with an image or as a video player.
Users had to scroll back up to play audio track 10, which was particularly challenging on mobile devices.
With the Audio Gallery set to autoplay, users immediately searched for a volume control option, but no such option was available.
A student was testing the Image Gallery pattern in the HMH user testing lab.
Design & Scoping
I shared the testing results with the product owner, a learning architect, and our lead engineer. I then conducted additional workshops on content and technical aspects for the Audio Gallery design update.
Content
Maximum 10 Audio tracks
Audio Gallery cover image (optional)
Single track image (optional)
Single-track instructional text (optional)
Functionality
Add volume control
Add the previous and next button
Make a single audio track playable
Cancel autoplay
Accessibility
Add keyboard control
Add full transcript
Design
Align icon, button style, and update status
Add and align paddings
Limit font choice, size, and weight
Add audio number indicator
Design Iteration
There were four design iterations created to determine the Audio Gallery’s anatomy.
Iteration 1
Auto play: No
Main player: Track indication + Previous/Next + Play/Pause + Volume Control
Singletrack: See Final Design. Progress bar: Yes, Transcript: Yes
Iteration 2
Auto play: Yes
Main player: Track indication + Previous/Next + Play/Pause + Volume Control + Progress bar
Track instruction layout: 2 columns
Singletrack: Progress bar: No, Transcript: Yes
The Audio Gallery design structure iteration 3.
Iteration 3
Auto play: Yes
Main player: Previous/Next + Volume Control + Transcript control
Track instruction layout: 3 columns
Singletrack: Progress bar: Yes, Transcript: No
The Audio Gallery design structure final design.
Final Design
Auto play: default: yes or author define
Main player: Previous/Next + Volume Control
Track instruction layout: 2 columns
Singletrack: Progress bar: Yes, Transcript: Yes
Audio Gallery Anatomy
I implemented the final design within the container, showcasing the complete content to illustrate how it flows across various containers and screen sizes.
Conver image placeholder
Main Audio Player
Accordion: Expended audio track
Accordion: Collapse audio track
Responsiveness & Adaptiveness
I had to implement seven content combinations (design assemblies) across three containers for six different screen sizes.
For instance, when displaying the audio gallery on a horizontal tablet with a wide (two-column) container, the content featured a cover image, a single-track image, instructional text, and ten tracks. The content creators defined the image shapes through the authoring interface (see below).
Authoring Interface Design
I designed and refined the authoring interface for each pattern and created a UI kit that ensured design consistency and reusability, ultimately saving development time.
Here is the final authoring interface for the Audio Gallery.
Results
Previous Design
Previous Audio Gallery Design
Updated Design
Audio Gallery pattern version 3 prototype. Size: desktop, wide container.
The updated version 3 of the Audio Gallery pattern includes:
An active "Next" button signals that multiple audio tracks are available for playback.
Individual audio players for each track allow users to select and play specific audio without scrolling.
Volume control and options for toggling audio autoplay on or off, which authors can set as the default preference.
Result & Impact
Documentation Access: The Pattern Library site has enhanced accessibility for product owners, project managers, business analysts, designers, learning architects, and engineers, streamlining their reference process.
Training Sessions: I conducted training sessions to accelerate the adoption of design practices among various levels of UX designers, fostering greater consistency across the team.
Pattern Usability Testing: The usability testing established a solid baseline for the third version of the pattern library, leading to significant improvements in content, design, technical aspects, and overall usability.
Standardized Design Practices: The pattern library provided a unified framework for designers, fostering consistency and efficiency in content creation.
Enhanced User Experience: The interactive student interfaces and intuitive authoring interfaces improved the overall learning experience for both students and educators.
Streamlined Content Development: The pattern library simplified the process of creating and managing e-learning content, reducing development time and costs.