The current state of the Shopmonkey brand was a bit of a blank canvas for us to shape. The brand colors were somewhat established by the new logo that came to us, along with the help of the Creative Director on the Shopmonkey side (Kyle Marks). To get started with defining the brand quickly, instead of going through the usual pitch decks or extensive meetings, we built examples of the homepage and product page hero components, complete with the use of brand colors, new illustration styles, and micro-components such as buttons, links, styled typography, and more. We did this not only because of the incredibly tight timeline the Shopmonkey team had for this website (a funding announcement would be coming within 3 months), but we often found it was hard for teams to understand how rebrands + websites come together if they only see the traditional pitch decks. Once we came to a consensus on the direction that Shopmonkey would like to go, we went to work on finishing out all of the product pages and homepage. An unexpected perk of our team was the wide range of personal interests we had that aligned with some of Shopmonkey’s products. One member had their own vintage corvette, one member had a boat of their own that they do repairs on, and I happen to have a not-small obsession with bicycles (along with my family members owning a mobile bike shop). All of these experiences helped build into the illustrations that were presented to ensure accuracy. Building the blog, our main goal was to utilize the knowledge base that currently existed to make it as search-engine friendly as we possibly could, while maintaining a perfect user experience. Breadcrumbs, FAQs, and more were all built with structured data (markup schema) in mind, while related article, email subscription signup forms, and more were there to not only guide the user through their library, but also capture their information for further marketing. To make the website as light and fast as possible, it was incredibly important to us that we use all of the newest functional technology at our disposal. On the actual build side of the website, the developers built using a headless CMS (Dato) so that the team could publish on multiple mediums with ease. On the design side, we exported all still images with .svg when images were not present, and .webp and .avif whenever we needed to. All animations used Lottie functionality for ultra-crisp movements while not bogging down the page speed with .gifs. The second big decision was to make sure the Shopmonkey team could maintain this new brand voice through every medium. Design decisions were made with email-driven limitations, blog thumbnail limitations, and more in mind. Meaning, we made sure all components were attractive yet not overly complicated in a way that the less custom tools couldn’t handle. As an example, we all wanted these beautiful gradient buttons with custom outlines that really popped out of the page, but we knew that email systems couldn’t handle this kind of set up without ignoring some of the older email clients. All of these considerations come together to make one of the most accessible websites and overall brands in this space. When we first started this project, we didn’t establish a good way for the Shopmonkey team to all be on board with the new reflection of the brand. Reviews were often silo’d with either their Head of Design, their Creative Director, or their CEO separately, who all were loosely on the same page, but not exact. This of course created confusion and a lot of doubling back in our efforts to make sure all voices were heard and reflected. Ultimately, this prompted the Webstacks team (who I was working with during this project) to create their Design Discovery process, which I write about extensively in another article. Looking back on the final product (I’m writing this 3 years after launch of the site), it is still one of my favorites I’ve been a part of. The collaboration with a talented created team (looking at you, Ryan Duffy and Kyle Marks) always makes for a fun and little bit of an intense project that makes you learn a lot. From the unique video players, to the clean animations and illustrations done by Pawel, I think all of us have a bit of pride in this website. The website not only turned out to be much faster, but attracted a higher rate of website traffic and conversions, along with a much easier to use interface through DatoCMS. No matter who came on to the team at Shopmonkey, everyone was able to edit the pages as needed with little to no training (as intended!)