HMH Web Redesign

Define Main Challenges:

HMH has over 30 different learning products, such as Read180, Math180, System 44, etc. While other teams were focusing on the home page design, shopping platform, event webinar pages, my team was mainly focusing on rebuilding HMH product pages.
‍
The initial lunch was February 2018, we had only five months left to complete the first round of design.
‍
After conducting user interviews, usability testing, there were three main challenges:

#1: Inconsistency across products: HMH has over 30 different product pages, each had its own look and design. Lots of clients didn’t even know that these were HMH products when looking at product’s pages. There was a huge gap of branding awareness.

#2: Usability: Lack of meaningful information architecture. There were too many subpages and links and it was extremely hard for user to navigate. Users were overload with too much information at one time and content was really difficult to scan.

#3: Visual: Inconsistent use of color, fonts, cluttered pages, long paragraphs of text, outdated images, lack of emotion.

Solution: A Modular Experience

To solve the inconsistency and usability issue, our approach was to define a set of unique web modules in a CMS system. In this way, all the pages for different products across HMH have the same way of representing and conveying information. They also have a unique look and feel to articulate a clear brand mission and visual identity.

Also, each product page is a responsive “single scroll” webpage, user will scroll from top to bottom and information will be displaced progressively, this establishes visual narrative and prevents information overload. Users read the story in digestible, scannable chunks. We selected about 50 web modules that covers all kinds of content needs, here are some examples:

Solution: An Engaging Visual Experience

Based on HMH established new brand mission, “changing people’s lives by fostering passionate, curious learners”, we wanted to convey the message of taking actions. But too much action is chaos, balance is the key. Balance between dimensional and flat, active and stationary, expressive and restrained, playful and sophisticated.

We constantly asked ourselves these questions:

• Is it alive/active, not passive?
• Does it encourage thoughts?
• Does it invite interactions?
• Does it inspire curiosity?

Some guiding design principles we follow:

• Layer + Build
• Play with scale
• Reveal + Discover
• Envolve + Schift
• Create depth of field
• Define Gravity

Based on HMH existing branding and new design principles for web, we created a comprehensive web design toolkit for colors, fonts, renders, icons, geometric shapes and photos to provide visually appealing and compelling experiences.

1. Color: Pastel colors add more modern feeling to the color theme, at the same time, not overshadowing the main brand color (gold).
2. Photo: portrait shot of kids brings movement and emotion to the page, contextual photos bring stories to the page
3. Font: Gilroy font has a geometric shape structure, which is inline with the HMH logo.
4. Flat Geometric Shape: Connect to the HMH logo, useful for guide and chunk content
5. Icons: Connect to the HMH logo, represent complex ideas in a simple way
6. Render: Representation of concepts and theme, create more white space between content

Solution: Maintain Consistency by Keeping Proximity to the Parent

As mentioned before, HMH has over 30 different learning products, such as Read180, Math180, System 44, etc. Each had its own look and design. Lots of clients didn’t even know that these were HMH products when looking at certain product’s pages. There was a huge gap of branding awareness. After analyzing the existing HMH products, we grouped them into three categories and put them on the scale of proximity to the parent brand. This increased consistency but at the same time, provided customization for each unique product.

Lead the Design Process

As the lead designer of this project, I created a design process guide (click to see) to facilitate the collaboration between client, account manager, copywriter, designers and producers.

1. Account manager sets up project, conducts initial meeting with client and need analysis.
2. Copywriter brainstorms with designer to select CMS modules, assets, maps out the narrative of the page.
3. Designer works on creating and selecting assets. Copywriter creates content.
4. First round internal and client review. Writer and designer revise the wireframe.
5. Second round internal and client review. Writer and designer revise the wireframe.
6. Writer and Designer hand-off contents and assets to web-producer to put into CMS.
7. Third round review + user testing. Writer and designer revise the wireframe
8. Page live on web

An Unusual Wireframing Tool?

By industry standard, web design is usually using Sketch or Adobe XD. My team started by using Sketch, but soon we realized it was bringing lots of problem, because Sketch is not good at cross platform collaboration, only trained designers know how to use it. Our design process was highly iterative, we were constantly getting feedbacks from clients and testing with customers. Each page involved lots of stakeholders.
‍
After taking to the leadership team, I decided to use Google Slides as an “unusual” wireframe tool. It is highly collaborative: designers, writers and all stakeholders can work at the same time. Content always stays at one place/url and everyone has the most up-to-date wireframe. It is also very easy for making comments and feedback, etc.