Podcases

CLIENT

Harvard Business Publishing 

YEAR

2020

BRIEF

Craft a mobile-friendly product page for Harvard Business Publishing's launch of Podcases, audio "case studies" targeted at modern business undergraduate students. 

Expand on the existing design system to highlight the audio as a "product". 

PLAN

The original product page (image on right) was hastily crafted for a pilot. Clean and simple, it delivered the content directly to professors, but didn't feel like a premium product. 

For the new product launch, I had 3 design goals: 

  • Make the product page and audio player feel like a product in itself.

  • Address both professors and students. 

  • Make it mobile-friendly for students on-the-go.

Old Version - Reference.png

ADDRESSING MULTIPLE STAKEHOLDERS

The product page needed to address JTBD at different moments for both professors and students. 

For professors during their purchasing decision, the site needed to make the audio file feel like a comprehensive product (worth the money) and clearly applicable to their lesson focus. 

For students during their assignment, the site needed to quickly give them the information they needed and feel real-world (comparable to other professional media). 

Podcase Flow.png

IDEATION & EXPLORATION

Since the default audio player was basic and fixed, I explored variations of images and light animation (e.g. carousels, page expansions) to enrich the media experience. To maintain cohesion with HBP's design system, I based these components on existing modules. 

I brought three approaches to the team for input, that varied from cinematic to minimalist. 

Screen Shot 2021-05-20 at 7.02.24 PM.png

FINALIZING A DIRECTION

The final version used a stripped-down aesthetic and expanded the size of the audio player. On mobile, the background became even simpler. 

Additional design decisions:

  • Audio player features a large photo of the featured guest's face to mimic a face-to-face conversation. 

  • Modular components let the team highlight different important context for each Podcase

  • Supplemental materials are previewable in browser to invite deeper exploration by students 

ezgif.com-gif-maker (2).gif

HANDOFF TO DEVELOPMENT

The final mockups in Sketch, with desktop and mobile breakpoints, were exported to Invision for easy communication and feedback with the development team. 

Screen Shot 2021-05-20 at 7.38.49 PM.png