AdobeDesign

Project Overview

This page is a compilation of my favorite projects at Adobe.

Media Carousel Component - Milo Design System

Its fall of 2024 - Adobe is launching Photoshop Mobile in February. It's all hands on deck on the web design team as we move to build a new product page suite for Photoshop Mobile and Photoshop. These pages utilize the Milo component library, which my team maintained. As part of the design exploration for the page, the lead creatives determined that there was a need for a carousel component that could support rich media. The carousel would feature short videos of creators utilizing the new features in Photoshop mobile, as a selling point this component was critical for user discovery. The current carousel in the library was not up to current accessibility (A11Y) standards, nor was it capable of hosting media content in a mobile optimized frame. My task was to design a new carousel component for Milo that met all the build requirements of a fully responsive, accessible modern carousel. This component needed to meet the styling of the Spectrum 2 design system.

Design Process

I began by assessing the problem statement as it was communicated to me by the project stakeholders (photoshop page) and my creative collaborators on the page. My key challenge here was creating a component that was effective both for the individual instance of this Photoshop page, but also extensible to the Milo design system for use across the entire Adobe web ecosystem. This would not be a one-off component, but something to use and evolve with our design system. After the challenge was clear, I moved to a competitive audit or best in class carousels. We looked at high end marketing web experiences like Apple, but also more transactional and discovery experiences like AirBnB and Instagram. From there, I needed to consider all the use cases and layouts needed. What would this component look like on desktop? on tablet? Should we create rules for the capacity of media items in the carousel? What would the media controls look like?

Initial Designs

The result of our design exploration was a navigation system that was center aligned with nav controls below pagination dots. The pagination dots had a microinteraction system in place that indicated whether there was more content to the left or right of the presented content. All of the color selections and sizes passed A11Y standards as well. There was one key issue to be addressed. The vertical stack added height to the component.

Further Iteration

In our next iteration, we nested the pagination dot interactions inside the navigation pill for the carousel. This decision came about in a review session with our engineers. This saved us the vertical height we needed and tightened up the controls without sacrificing any usability. It was a huge win!

Media Controls

Our next step was defining the media controls for this component. Short form video was a crucial part of the Photoshop marketing page, so this element was critical to get right. Accessibility and contrast with the media behind the play/pause button were key considerations.

Final Tweaks

For the final iteration of this component we built in more customization into the final component. Releasing this as a component within Adobe's Milo design system requires lots of specifications and configuration. In the end, we decided to create an option to turn off the pagination dots altogether. Simplifying and streamlining the UX.

Results

This component is now live across the Milo design system with validated A11Y standards and configuration built into the component!