Design Collaborators
Objective
Transition entire D2C subscription site, purchase/onboarding flow, account management, and admin from a fully custom solution to a headless Shopify/Next.js platform.
Constraints / Challenges
There was a lot of anxiety around implementing too many changes to the existing user experience
However, there was also a lot of hunger to change key elements of the brand, and to perhaps do an entire rebrand later in the year
There were also several in-flight projects and product launches that needed to be supported concurrently
This project would involve both internal teams and an external agency, Graveflex
Facilitating team alignment
Every department had their own comprehensive wish list for the new platform. We had no CPO, so it was up to our small product team to synthesize and triage these asks into a product strategy that we could actually implement within the year.
I led a series of audits and story mapping exercises with the larger team to help us zero in on the must-haves.
Feature alignment / user story workshop
Subscription onboarding UX audit
Fixing the fundamentals
PetPlate’s existing design system lacked some design maturity and could be difficult to work with in a digital setting. Before starting any major design work, we secure=d buy-off on a series of improvements to the color system, typography, iconography, and general approach to the user interface.
Improved and expanded color palette with proper, hue-based tint scales and accessibility guidelines.
A more usable type system based on a harmonious scale and the 4pt grid.
Improved symbology optimized for accessibility, scalability, and optical balance.
Extrapolate!
We built a more modern, scalable user interface system, including detailed documentation and code examples.
Interactive Figma components were meticulously crafted and documented both in Figma (for design usage) and in ZeroHeight (for engineering and stakeholder usage).
Each component included documentation for anatomy, states & variants, interaction guidelines, and usage examples.
Components were then combined to form patterns, blocks, and templates, each carefully documented.
Once a component had been implemented in code, its StoryBook story was added to the ZeroHeight documentation.
Better is better
Most of the site layouts remained largely the same, and we even simplified many of the site blocks to create a less opinionated foundation to iterate upon. However, certain areas of the site were too problematic to leave alone (user accounts being chief among them).
We ran a series of moderated and unmoderated user tests to determine major pain points and missing features. The result was an improved visual hierarchy and aesthetic foundation, as well as a list of new features and improvements to add to our roadmap for further exploration.
Before
After
Helping the team get un-stuck
There were many in-flight projects, some of which had been stuck in revision limbo for over a year. There was also a general lack of focus, along with some lack of experience. I helped the team mature their design process, while also offering guidance around content strategy, UX copy, parsimony, and high-conversion patterns.
Before
After
Expanding the visual language
It became clear that a major rebrand was not in our near future, so I initiated a series of exercises and explorations with the team to further mature existing brand elements.
We improved the original illustration style by adding more dimension and personality, moving away from flat, almost hieroglyphic postures.
This was expanded into a series of dog breed profile shots that could be used as default account avatars.
We started experimenting with a more illustrative pictogram system for use in marketing materials.
We wanted to move away from sharp, rectangular frames and explore more organic shapes. These made it into our email template system.
We also explored using bento-box grids as a way to create contextual groupings and visual stories.
Finally, we expanded our new color system to including color pairing guidelines, optimizing more just enough vibration while still remaining accessible.
PetPlate wins
PetPlate retrospective
I’m glad we…
Successfully launched several new products while knee-deep in a major site overhaul
Built and documented a robust design system
Leveled-up design thinking and execution at PetPlate
Breathed new life into the existing brand
I wish we'd…
Not assumed that Series C funding was inevitable
Pushed for a more radical redesign, given the harsh economic reality of 2023—Playing it safe rarely pays off
