A cross-platform visual language rooted in our brand identity.
In 2019, a rebrand led by our Design Director brought a modern look and feel to our latest MVP - The Dyrt PRO.
In 2020, our rebrand's contribution to a successful subscription service got us buy-in to dedicate time to establishing a design system.
role & process 1.1
The 2019 rebrand introduced much needed modern styles to our UI. In 2020, we replatformed from Ember to Next.js. It was an opportunity to redesign a core page of the experience - the campground details page.
This page was the first step in componentizing patterns on The Dyrt. I designed each pattern with the design system in mind, leveraging our new brand and thinking atomically and responsively.
role & process 1.2
In 2021, a second product designer joined the team. We dove into a pattern audit. We identified one-off instances, variations to consolidate, and interactions that needed clarifying.
Working closely with engineering, we generated a set recommendations based on engineering lift and usability impact.
The S'mores Design System makes configuring and editing a days-long road trip easy in our Trip Planner feature.
We used large tap targets for radios buttons and checkboxes, which were helpful for our older audience.
Our custom iconography and bright active state styling sustain our brand voice throughout the flow.
s'mores as collaborative space
A design system is a bridge between design and development. Part and parcel of establishing a design system is refining lines of communication between these teams. This communication was critical to The Dyrt's broader success. As the design team grew, S'mores became a meeting place for Brand, Product, and Marketing designers to explore, borrow, and learn from neighboring disciplines.