When you get on a flight, the routine safety video or stewardess tells you to put your own oxygen mask on before helping others in case of an emergency. At first pass it seems a little strange. Why should you help yourself first? Isn’t that selfish?
Well, not really. If you’re not sure how to take action, it’s tough to help others.
In 2018, we (Maestro) had a revelation—we needed to put on our own oxygen mask. We’d been so busy working on client projects that we’d forgotten about our most important client: ourselves. Our services and offerings had grown over the last 12 years, but our website and branding had stayed the same. Suddenly, showing our website to clients felt like showing up for a doctoral interview in a college jersey.
Our past look served us well, but our new growth had us stretching some seams. We’d gotten so caught up with helping our partners reach their goals that we’d lost sight of our own. The solution? A branding update and a new website.If you don’t have time for all the juicy details, feel free to skip to the end for the TL;DR
A website that works (for us and you)
We decided to design the new website to clearly break down the types of work we have grown to do, highlight the unique differentiator for each of our teams, and demonstrate how we work together to create amazing work for our partners. With that in mind, we approached our new website with two goals:
- Represent our maturing brand
- Simplify our visual identity, messaging, and offering
A lot of brain power went into refining our offering and messaging. (If you’re interested in learning more about that, you can check out these branding blogs about why branding is more so important or how to increase your brand’s value and create a consistent experience.) But, we’re here to talk about five highlights of design and development on our new website from the people that created the pixels and made them move: VP of Design, Zach DeYoung, and Senior Developer, Liz Klarecki.
Explaining a large offering simply
Zach (designer): To simplify our large offering, we developed four team pages: Branding & Marketing, Learning, Media, and Software. The team pages are definitely my favorite part. We explored each team and discovered their unique philosophy and approach, while also discovering how that team fit within the greater whole of Maestro. You can see this in the joint approach to visual design and copy. If you take a look at the team pages, each one has its own visual and verbal approach. But together, they all still contribute to the greater whole of our brand.
Liz (developer): The team pages are a definite favorite. We brought the personality of each team into the team pages while still staying true to the main Maestro brand. Working on this project also gave me a chance to collaborate with the teams—like Media—to animate a lot of the different elements.
Updating the bloop logo
Zach: Our bloop logo has been part of our company since the beginning. But we refined and simplified it even further.
Liz: We’re one big Maestro team, but each smaller team still has the trust and ability to pull away and work independently. Zach and I worked together to bring that intentionality into the animation of the bloop on the home page. We also want the bloop to integrate into more than just Maestro branding, but also in any situation. Because in the end, it’s not about Maestro. It’s about our clients.
Telling the stories of our clients
Zach: On our work page, we emphasized fewer case studies. We’ve done a lot of projects, but we wanted to highlight the ones that best let us capture the story of what we do. Many of the projects we featured involve all our teams at different levels, telling the story of Maestro as a whole.
Liz: With the new work page, we can show the quality and story behind each project. When clients get on the site, we want them to walk through each project and see the whole story from start to finish.
Zach: With the case studies, it’s not about us. It’s about our clients’ brands shining through. For example, in the case studies, we highlighted the colors of every client’s brand. While we keep the Maestro typefaces to thread the site together, we keep everything else in each study specific to the client’s brand.
Admins deserve the best, too
Liz: We like to develop websites that are easy to manage on the admin side of things. With the new site, any admin can easily add accent colors, upload new content, and integrate with outside sources. Any updates happen in just one location—and they get implemented everywhere.
Designing and developing to surprise and delight
Liz: Collaborating with Zach was one of the best parts of developing the site. We always talked through interaction pieces together, and he gave a lot of trust to my eye as a developer for enhancing the site. He always explained the intentionality behind each piece, which in turn, released me to be freely creative. Some of my favorite “delight” moments include:
Every time you open the menu, there’s a wave animation of Maestro’s brand colors.
When you load the homepage, the bloop logo starts as a single circle, then animates as a smaller circle pulls away
Every team page has animations, some subtle and some pretty obvious. It was a lot of fun creating animations that represented each team.
Did you know that you (yes, you!) can change the color of the Maestro logo on our building? (Try it now!) I worked with the software team to collab on front and back end development for this piece.
We had a lot of fun paying attention to the smallest details and working fun elements across the site. For example, each Insight post features a unique color for links and highlights, custom-picked to match the header image.
Behind the scenes
Throughout the whole process, we worked to be intentional about page speed, a great mobile experience, and thoughtful accessibility
Do people like simple and clear? The numbers say…
- 68% increase in users
- 70% increase in new users
- 47% increase in page views
- 3500+ views on case studies to date
Oh, the places we’ll go
You’ll be seeing our new designs out in the wild (in emails, marketing, and social). While we’ve redesigned our wardrobe, but we’re still us. Clearer, yes. Simpler, yes. And here to help you perform beautifully.
We updated our website. Go to the homepage and click the bloop for a fun surprise!
Have you explored our new website yet?
Start from the top! (Hint: click the bloop and try out the menu!)Explore on your own!