Case Study: Media Carousel
Overview
Developing a media carousel for improved conversion and a better user experience.
Company
Beats by Dr. Dre
My Role
UX Designer
Web Developer
Key Skills
UX/UI Design
Interaction Design
Motion Design
Visual Communication
My Role
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.
Competitive Analysis
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.
User Story
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.
Storyboards
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.
Wireframes
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.
Key Takeaways
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.