The problem

The existing demo divided closely related tasks across overlapping home, campaign, and search pages. It also depended on desktop-only hover interactions and used labels such as “Cart” for a free bulk-download workflow. Without a shared design system, new screens and concepts were harder to carry consistently across devices.

My role

I owned the UI/UX work from early exploration through high-fidelity prototypes, translating product needs into user flows, interaction patterns, responsive layouts, and reusable components. The work focused on making the demos more coherent and easier for prospective clients to understand.

Design system

Building the Pebble design system

I created a reusable foundation for the demo work, defining color, typography, icons, controls, navigation, templates, and responsive behavior. This gave new screens a consistent visual language instead of requiring each concept to be designed from scratch.

  • Brand Primary #D62027
  • Brand Primary Dark #AA1A1F
  • Brand Secondary #585454
Selected brand colors from the Pebble design system
Pebble design system typography and icon guidance
Typography and iconsOpen full image ↗
Pebble design system button components
Reusable componentsOpen full image ↗

Responsive redesign

Redesigning the digital asset demo

I consolidated the overlapping destinations into a unified search experience, replaced ambiguous shopping language with a clearer “My Downloads” workflow, and adapted the interface for desktop, tablet, and mobile. I also introduced masonry results and first-page lazy loading to use space more effectively while reducing unnecessary navigation.

Original desktop-only demo

Outcomes

The work gave the team a reusable design foundation, a responsive digital asset experience with clearer navigation and terminology, and a new concept for image-led search. Together, the three deliverables created a more cohesive way to demonstrate the platform to prospective clients.

Reflection

Some of the most consequential decisions were also the simplest: removing redundant destinations, naming actions precisely, and designing the same interaction across breakpoints. The project also gave me early experience translating an AI capability into an interface that remained understandable to users.