While we were testing the visual hypothesis with our website redesign, I wanted to refine the visual system between our product and marketing surfaces.
BUSINESS NEED:
The marketing site and the in app experience should feel like one cohesive experience.
The marketing site and the in app experience should feel like one cohesive experience.
BRANDING CHALLENGE:
How might we bridge our product and brand into one cohesive brand visual system?
Broad Explorations
I started by familiarizing myself with the product and experimenting with how color and typography can bring more unity into the way the two surfaces could look like.
Defining Type
Working with the product designers, we came up with a few criterias for our new type system that could scale across both product and brand.
Accessible - The typeface had to work across web and mobile
Scalable - The typeface had to be accessible for both the product and brand design teams in Figma, Adobe, and the larger organization, Google.
Distinguished - The typeface had to help distinguish us from our competitors and work across marketing assets.
Width - The typeface had to be the same as or less than the current product typeface, Roboto, so it doesn't radically change the way the UI is spaced in the app.
Creating our Color Ramp
In parallel with type, we explored and defined our color ramp. Of the exercises, this was the most time intensive because of the accessibility color contrast tests we had to run for each of the color waves. We wanted to narrow the color ramps down to colors we could use both in product and in marketing campaigns.
Color and Type
And finally putting the two together, we landed on a type and color system that is able to scale across product and brand in a tangible way. We published our first draft of Shippo's Brand Guide in January 2024.
Implimenting in product
With engineering and product, we launched the new type and color system into the Shippo app. This was a huge effort that involved a lot of players across the organization. A look at the side by side changes of the implimentation.
We launched the new type and color in the Shippo App on March 2024. And in parallel, brought the visual system into our Shippo website redesign.
Sponsors:
Team:
Role: Design Lead
Type: Brand Redesign, Product Design, Interaction
Status: Launched March 2024
