case-study-hero-bbd

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.

Asset 14

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.

Screen Shot 2022-04-22 at 1.05.17 PM
Screen-Shot-2022-04-22-at-1.06.28-PM2
Screen Shot 2022-04-22 at 1.04.50 PM
Screen-Shot-2022-04-22-at-1.06.28-PM2

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.