Behind Growth Rocket’s New Look

Most digital agencies have mediocre websites. And we can’t blame them. They’d rather spend their time and energy on making clients happy, the same way most architects take decades to design their own homes. But, one way or another, agencies have to eat their own dog food to put their foot forward and set a good example. And that’s exactly what we decided to do, starting with renovating our digital home. 

What’s deemed a good website is constantly changing. So our CEO Mike Villar formed a core team of experts in various disciplines to get the website redesign project running. With whiteboards up and coffee brewing non-stop, we discussed goals and ideas. While we already knew what Growth Rocket is—its personality, philosophy, and values—our old website didn’t really communicate that. 

This time, we wanted our brand identity to leap off the screen. On top of that, the diversity in the team made it easy to scope the redesign based on the latest best practices across all channels. We were off to a great start.   

The Redesign Blueprint: A Rocket in Motion 

It all started with a new logo. I asked Aviana Rogado, our talented Creative Director and head designer for this project, about her process behind the redesign. And this is what she said:

“I picked out a display font that had personality but was still readable. Ambient is a simple sans serif with upward slants on its letters, just the right hint of decor that also alluded to how we were always providing better results for our clients. The word “Growth” is now stacked on top of “Rocket” for better readability, and also because the GR team is the rocket that boosts the growth of our clients, lifting them up. The graphic from the current logo has been trimmed, resized and tilted, going from an unwieldy spaceship stationary on the launchpad, to a streamlined rocket that’s already in motion.”

If you’re also planning to redesign your website, we’re letting you in on our secret. I’ve asked Aviana to share her design process. It goes like this: 

1. Understand the objective of the design, and always keep it in mind.
2. Look at what your competitors are doing and identify what’s working and what isn’t, and how you can adapt that knowledge for your project. Also, chat with other people involved in the project to get their thoughts.
3. Let the ideas simmer for a bit and combine everything you’ve accumulated so far until concrete plans start to form. 
4. Start with wireframes: I prefer to draw out tiny thumbnails on paper before working on the actual design.
5. Create multiple iterations and refine with regular feedback from the stakeholder/s.
6. See how it performs in the wild, and refine further as the results come in.

Page Flow: Getting Straight to the Point

At Growth Rocket, we cut to the chase because it helps us get things done faster. We don’t overwhelm our clients with jargon and complex ideas. We are direct and honest across all communications, and we highlight this in the new website in various ways. First is the navigation. The site map is pretty straightforward: the goal is to let visitors know who we are and what services we offer from the get-go. No fluff, no fuss. Second is the layout and visual elements. To achieve balance and coherence, Aviana pulled the color palette from the logo around which we planned the site’s information structure. Third is the copy, because what better way to get the message across than clear, plainspoken language and imagery.   

Visual & Content: The Fun Part 

Here, Aviana had the freedom to pull her thoughts together in terms of color, style, typography, and any website inspiration that was discussed during our initial meetings. The goal was to walk visitors through our core competencies and outline the benefits of outsourcing digital marketing without shoving it down their faces. So what we did was structure the web pages into small sections, each with short, crisp copy and simple graphics to enhance the readability and overall experience. Following the visual and content guidelines we’ve laid down beforehand, we were able to elevate the “rocket” theme in a way that’s not too contrived and make our brand identity shine. As Aviana puts it,   

“The writing and design showcase a perfect balance of professionalism and wit. And this isn’t just on the site, it also spills over our other platforms like email and social media. Everything, down to the smallest detail, should be in line with the brand.”

A favorite element among the team is the footer animation of a rocket launching, which wasn’t originally supposed to be animated, but Jesel, the project’s front-end developer, made it into a fun, little Easter egg for people who scroll all the way to the bottom of the pages. It’s not really useful, per se, but it shows that Growth Rocket has a playful side, too.

Prototyping: Nailing the Design

This project wouldn’t have been possible, given the tight schedule and bandwidth limitations, without collaboration and open communication among the team members. Slack and Figma have been indispensable tools. It was Mike who pioneered the switch from Adobe products to Figma so that it would be easier for non-designers in the team to pitch in and comment on Aviana’s work. But it was also incredibly useful in terms of handing off the design to Jesel for development. 

What’s great about Figma is that it has prototyping capabilities, so some of the behaviors and elements in the final website can already be mocked up on a design level. It’s easier to explain something when there’s an accompanying visual. Figma also creates CSS codes based on the design which ensure we’re following the same values on the styling level, at least. Jesel did the exporting directly from Figma and based the formats and scale sizes from there. To keep the web pages lightweight, we used SVG for the icons and vector elements and optimized PNGs or JPGs for image files.

Launching to New Heights

Finally, with the website’s design and code in place, it was time to make the finishing touches. Here, our goal was to humanize the brand. So we squeezed in a company photoshoot and rewrote the team lead bios in the first-person point of view to make them more intimate and friendly. We’ve also overhauled our image repository. Moving forward, we plan to publish proprietary visual assets, like infographics and blog cover photos to reinforce the brand. This is because we want to deliver more value to our clients and visitors through relevant and enjoyable content. While Jesel and Aviana polished the website, the rest of the channel experts scrambled to connect the pieces (read: SEO, content, email, social media) to make sure our efforts yield maximum impact. 

“And this is how we brought the site from just another website to the Growth Rocket website,” as Aviana puts it. The old website had a good run, and we’ll miss it, but we must forge on and explore new possibilities with a more advanced, well-oiled rocket engine. As of writing, the redesigned website is on the launchpad and we’re all thrilled. All systems are a go. 

Watch out for more new changes in the coming weeks. In the meantime, explore our new website and read our awesome blog!