Case Study: Media Carousel
Developing a media carousel for improved conversion and a better user experience.
Beats by Dr. Dre
As lead UX designer for the project, my job was to guide the design process, communicate with stakeholders and collaborate with the creative and engineering teams throughout the entire development lifecycle.
I owned the product, led design and research and created prototypes while working closely with frontend developers and engineers.
I started by working with my internal team to perform competitive analysis. We gathered insights and inspiration from multiple sources and compiled our findings in a shared document.
When creating user stories, I embrace the concept of vertical slicing. I break each story down into self-contained, actionable sections that describe the user interaction and expected behavior. I build wireframes and storyboards, highlight design specifications down to the pixel and include static and interactive prototypes.
Each user story is a living document meant to be iterated upon during the development cycle. The user story is both a guide and collaborative document where team members can comment and contribute.
Since the component is highly interactive, I created storyboards to describe the user flow. The storyboard is a supplement to a detailed description in the user story.
The storyboard shown below (fig. 1) illustrates the user interaction flow for both media types, video and image.
After the user story is initiated and user flow is mapped out, I then begin working on basic, low-fi wireframes that describe the design in more detail.
The media carousel was developed in response to a need for more product-focused videos. Designing a robust component that could host video along other media types ensures that we are able to meet user needs now and in the future.