Brand
Meredith
My Role
Product Designer
Year
2020
Meredith, Inc.’s digital portfolio of brands is vast. To maintain the dev needs for so many sites, they have been built using a templated system with shared components and room for personalisation. When features and templates are designed, it is important to have a good understanding of how the brands customize their look and usage.
In early 2020, I received design requirements for an audio player that could play audio tracks on a web page. These audio tracks would add some context to the pages the player appeared on. They would use clips of various lengths and appear on all types of brand webpages. There could also be multiple players per screen for something like a slide show where each slide is a different subject while all slides are on one scrollable page. So the design needed to be really flexible and dynamic while drawing the user in to play with it.
I started the process by taking notes and scribbling out some rough ideas on paper during the kick-off meeting. The flow I thought through was straightforward so I skipped mapping it.
The player could start as a call-to-action (CTA) that would live somewhere on the page. Keeping the CTA small, like a button, would allow it to live on just about any page type without issue. It also would not be distracting if the user decided to skip it. On click, it could transform into a larger player that might dock on screen. Maybe it could travel with the user between pages. Maybe between sites if you visited a sister brand. There could be a follow up after the track finished with a prompt to play again, go to the next track in a playlist, or browse a larger playlist. That playlist could then be tagged with similar topics and allow the user to either get lost in audio or introduce more interesting site content.
I worked through the wires in sketch. I had a few sketches, but when a design relies on a lot of content or deals with a bit of noise, I think digital wires provide an accurate representation that squiggly sharpie lines don’t. I flushed out a number of initial ideas. Some were simple while others offered things like associated imagery and expanding into descriptions. There was a lot of thought of how it would activate, be used, and discarded.
After getting feedback for my rough ideas with stakeholders in round one, I brought three dialed-in designs for round two. The higher fidelity comps were filled with real content and styling to understand how it could work with a brand, like People.com, which would launch the first test.
The first two designs tried different UI approaches to an idea where you would press and hold a button over an image to hear the audio. The first design used a visual that felt more like a traditional loading effect. The second felt more organic, like slowly pouring paint onto a flat surface.
The third design is the one ultimately chosen. It grew from the wireframes I have shared in this case study (which is why I’m showing them). The winning concept has a CTA that transforms into an audio player on click. It docks at the top when it appears to scroll off-page. When scrolling back, it would undock and scroll with the page surface.
I did some more fine-tuning on the CTA. Some ideas included a little intro before the CTA and everything was framed together visually. Others were just the CTA and relied on the page content for context. My final modular design was flexible enough to option both.
I explored so many different designs to account for CTAs, player designs, docking solutions, micro-interactions, transcripts, and playlists. I was working with well over 200 artboards at this point. To keep it simple, I’m only focusing on the player itself in this case study.
When we were ready, I built an interactive prototype in Axure. Our research team used that prototype to run 8 unmoderated tests in Validately: Four iOS users and four Android users.
So how did it do?
It tested so well, there were existing users that said they would come to the site even more often than they do already. It was a repeated statement and the feature proved delightful.
The design has since gone live on Meredith’s websites, but you can check out the prototype that was tested below. It built to be tested for mobile users first so this version is best viewed in your mobile web browser or emulated in one.
Once the design was fully polished, I added template designs for all breakpoints online to our Zeplin projects. Developers can easily pull specs, assets, and CSS using their web and native apps. I also documented all the design details in a white label iteration which contained specs, usage, states, and motion. The documentation was then replicated for each brand in the Meredith portfolio. A few examples can be found below.
