When I was a kid, my Mom had an apron that I loved to wear. Emblazoned across the front was the adage “skinny cooks can’t be trusted.” When Engage undertook a new project, our own branding and website, I thought of that tongue-in-cheek apron. Because, if our clients are going to trust us with their time and money, we must show that our brand and site reflect the high quality work that Engage produces. We could not be skinny cooks.
Our new site needed to be our best case study, an example we would be proud to send anyone. And, it needed to meet the high standards of every employee at Engage (not an easy task). It would take brainstorm sessions, late nights, hard work, and collaboration—which is why I couldn’t be more excited to unveil our updated brand and site.
In anticipation of the company’s 10 year anniversary, our team started discussing what a brand refresh and website redesign would look like. When we started out, we believed we could do this project on the fast track. After all, we do this every day: did we really need things like our typical two rounds of revisions and approval on each template to build a good site? The answer is yes; we came to realize that the process we adhere to so closely with clients was absolutely necessary if we were going to succeed. How would we treat us if we were the client? We assigned a client strategist to the project who was to treat the partners as the stakeholders and coordinate communication between the design and development teams.
We started by asking ourselves the questions we ask our clients on a daily basis: What were our goals for the site? What emotions and messages did we want to convey with our brand? What is the essence of Engage? In various meetings between the partners and our Chief Creative Officer, a vision emerged.
As we do with our clients, we compiled our goals into a Creative Brief. This was our blueprint for both the branding and website build. It included our overall objective, user personas, a competitive analysis, a wish list, perception and design guidelines, and our timeline. In the Creative Brief, we stated our desire to use this redesign to set trends in the industry, utilize the latest web technologies and showcase our services, job opportunities, and past work. We also outlined our vision for the updated brand and site.
The redesigned logo should not be a full rebrand but an evolvement of the current logo and style introducing a mark to coexist with an updated type treatment. – Creative Brief
With our goals clear, our first milestone was branding. We made a moodboard that gave us some good starting points. Our design team then got to work picking bright secondary color options and sketching new logo marks—lots and lots of new logo marks.
Our designers produced more than 150 sketches before we began narrowing down the pool and using Illustrator to mock the top 7. There were countless revisions and color tweaks, changes to kerning, rounding, and spacing that I won’t bore you with. Ultimately, our new mark was perfected:
This new mark conveys the forward motion at Engage: we are consistently reaching for the future, towards growth, towards progress. At first, we couldn’t get away from E letter marks, and in a way, we didn’t. If you look closely, you’ll see a lowercase E in the negative space of this mark. You’ll also see a nod to the District of Columbia. DC is known for its diamond shape, albeit with a river running through it. The new mark invokes that shape, complete with its own Potomac cleaving Alexandria (our new home) from DC (our old one). Read more from our designers on the new mark here.
We believe the upgraded branding is a natural evolution from where we began. Watch the Engage mark transform over our last ten years:
With the brand mark finalized, it was time to design and build the website. Like with our clients, we performed an audit of the current site and, using the Creative Brief guidelines, settled on the number of templates we would need. We then got to work with wireframes.
In wireframes, we settled on much of the functionality and layout of the site. We knew we would be integrating with MailChimp to capture user emails and Jazz to funnel interested applicants into our job openings. We decided that our project page would have a few in-depth case studies, so we worked together as a team to write them. We laid out the footer to be the first step of our contact form. We also scrapped a few templates in the wireframing process, making sure we were creating a streamlined product. There were more things we would discover in design, but after wireframes were approved by the partners, we had the bones for our site.
The next phase allowed our designers to flex their creative muscles, pulling from the latest web design trends but also experimenting with new layouts, colors, overlays, patterns, and textures. Working in Sketch (our new favorite design application) helped our designers work fast, creating universal styles and symbols throughout the site.
The aesthetic goal was to put our team, our office, and our work front and center visually. We held several photoshoots in the office to capture our team at work. We wanted to give viewers a behind the scenes look at daily life at Engage.
Our design team was not the only one to try new things. Our development team wanted to use client-side templating, specifically VueJS, which allows for smooth page loading. In the build process, they also used Webpack, BrowserSync, and hot module reloading, which saved our developers a lot of time. These tools spared our developers from manually reloading and made for speedier code writing. We built the CMS (content management system) for maximum flexibility, making it easier for ourselves in the future when we want to update our homepage, swap out copy or images, post a new job opening, or add new team members. Finally, the last step was to transfer over content from the old site to the new one, importing, merging, and deleting when necessary.
Over the past few months, Engage was able to practice what we preached. We underwent the process we do for our clients, from discovery to launch. It showed us how hard it can be to answer some of those questions we ask clients, how challenging it can be to prioritize features, and how vital it is to get sign off before proceeding to the next step. But in the end, the process proved true for us. We hope you’ll take a tour of the new site and see it as the living embodiment of the best of our process, our team, and our talent.