One of the big milestones in launching the new brand was aligning the visual system across marketing and product.
Working with the product designers, we created a robust visual system that can scale not only across marketing assets but in app.
Design Problem
Currently, the discrepancy of where the marketing page and the in app experience was felt disconnected. How might we create more unity between the two surfaces?
Broad experiments
I started by familiarizing myself with the app and experimenting pretty broadly how color can impact and change how it feels. After working with the product team, we came to an agreement to keep the product relatively neutral so the user can focus on tasks.
A broad study of how color and typeface can bring more unity between the two surfaces.
Deeper dive into finding the right typeface
Between the product team and I, we determined that the criterias for a brand typeface should be:
Distinctive - Stand out from our competitors
Accessible - Read well across mobile and web
Scalable - Able to be used across Figma, Adobe, and Google products
Width - The width has to be comparable to Roboto, our current in-product typeface, so it doesn't radically change the way type lives in the app. This was the most formulaic criteria we used to start and narrow down a few typefaces.
Color Ramp Explorations
In parallel, we explored color ramps that would work for both product and brand. This study was especially intensive because of the accessibility and contrast tests we had to run.
Type & Color
And finally putting the two together. Making sure they would work not only for marketing campaigns but in app statuses, order page, and websites.
After multiple iterations, we were finally able to land on a typeface and color system that was able to scale across product, brand, and marketing. We were able to finalize this by publishing our first versions of the Shippo Brand Guide
Implementing changes to the Shippo App
Working with engineering and product, we were able to implement the type and color changes into the Shippo App. This was a huge effort across the organization that luckily didn't disrupt the overall product experience on a substantial level. Here are some side by side comparisons from that change.
We launched the new visual system in March 2024. You can experience the changes in the Shippo App.
For more, see how we continued expanding the brand visual language in our Website Redesign.
For more, see how we continued expanding the brand visual language in our Website Redesign.
Sponsors:
Team:
Role: Design Lead
Type: Brand Redesign, Product Design, Interaction
Status: Launched March 2024
