product & strategy
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.
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).
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.
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
_gif.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.
