Stellantis Carousel Meatballs

UI, UX, Wireframing, Prototyping, Art Direction
Project Overview
Old carousel meatballs were not meeting accessibility due to color contrast, background imagery, and changes in responsive design. An enhancement was required to make carousel meatballs visible and ensure the styling is more consistent across six different brand style guides.

*For additional Stellantis work, please reach out to me directly.
My Contributions
  • Creatively solution for design problems while keeping responsiveness, accessibility, and six separate style guides in mind
  • Test and iterate on color contrast to achieve web accessibility
  • Collaborate with software developers to ensure new designs are feasible
  • Present designs to client for feedback and approval
Old Design
New Design
Interactive States

Under Hero

Over Hero


Meatball: 12px
Padding: 12px
Opacity: (0,0,0,0.6)

Brainstorming
Accessibility

Tested each brand's GCSS colors using a contrast checker

Competitor Research
MasterCard
Size: 10x10
Padding: 8px
Chevrolet
Size: 16x16
Padding: 14px
Citroen
Size: 11x11
Padding: 20px
Home Depot
Size: 10x10
Padding: 14px