7 April 2015
How We're Iteratively Redesigning Our Website
It’s been almost two years since we launched our marketing site, and Gaslight has changed a lot since then. We’ve doubled in size and updated the look and feel of our brand, as well as the messaging. All this means it’s time for a major site update, but as a small company, everyone is fully engaged on client projects. At this point, we don’t really have the luxury of dedicating people full-time to a website refresh.
Instead, we decided to borrow a page from our own playbook. When we build software for clients, we focus on continuously delivering features and making small incremental improvements over the life of the app. Why not take this same approach to maintaining and updating our marketing site?
Easy wins first
About six months ago, we hired writer and content strategist Michelle Taute, and she’s been working on refining our messaging and brand voice. There’s been a shift from focusing on technical details (we program in Ruby!) to emphasizing the bigger benefits of working with us (building technology that matters). We also want to keep our brand voice friendly, approachable and conversational.
These changes will take us a while to fully test and roll out, so we decided to set our sights on easy improvements first. I identified some clear visual improvements we could make, and we tackled one thing at a time as we had a few hours here and there. We simplified the contact page, for example, and added a more visually and content rich careers page. I was able to explore new ways to display information and push the original design.
I also was able to change some small graphic elements. We’ve evolved our icon style to be more distinctive. I took inspiration from machines and schematics, a nod to building in a different way. I started with the services page, where we updated the content, too, and moved onto the about page.
After all of this momentum, we hit a wall. The page structure I had originally come up with two years ago, with a photo full-bleed at the top, was becoming a limitation. We struggled to find photos that would work well as we added new pages, and the overall flow and structure of the site needed some thought. It became clear that we needed to address these and other core issues and come up with an overall strategy to continue making progress.
Lay it all out
When I unexpectedly had a free day from a client project, I printed out every page of our site on paper. It might sound a little crazy, but I wanted to see all the pages and what elements were in play on each one. I hung them all up on the wall in a huddle room then Michelle and I took two hours to brainstorm about where we wanted the site to end up.
We started by figuring out what content should go where. It was pretty clear that we wanted to simplify the top-level navigation and eliminate the secondary navigation in the footer. We also talked through content Michelle wants to add later in the year, such as a resources section with downloadable PDFs and links to email classes and other learning resources. I stuck Post-its on the wall to represent top-level navigation (work, about, etc.) and we moved pages around underneath them.
Putting everything on the wall also made it clear where we needed to tighten the visual consistency of the brand. Most but not all of our icons had been updated to the new style. And it was pretty apparent that we hadn’t quite nailed a consistent application of our brand colors. We also thought it would be fun to explore typography usage. We were using Din exclusively, but we wanted to add a more legible body typeface.
Once we’d talked through all the pages, we started a new Trello board to manage the project and turned all the updates into cards with one task each. We divided them among columns named web site ideas, brand evolution, chores and ready for work. Now we wouldn’t have to randomly pick things to work on. We’d identified all the tasks and prioritized the most important ones to do first. The same way we would for a client’s app.
First steps
There were three things I wanted to address immediately:
- Brand color usage
- CSS styles
- Homepage
The first thing I tackled was brand color usage. Originally, each page was themed around yellow, red or blue. As we added new pages, the color system fell apart. I decided moving forward we would use blue for any links or callout text, and yellow and red would be accents in icons. It’s much more versatile and doesn’t pinhole us into using a certain color because it’s on a certain page.
The second thing I wanted to tackle wasn’t going to affect the visuals but would make it more sustainable to work on the site moving forward. When we first created the site, I was the only designer and controlled the brand solo. I also was new to CSS. Now that we have four designers contributing, I wanted to create an easier to understand CSS structure and help us establish good habits. It was a couple days of heads-down work, breaking CSS into their own components and better utilizing mobile styles. I did it, and it was a huge win for maintainability going forward.
The newest thing we launched was a revamped homepage. We updated it with our new messaging and moved the focus from Gaslight to our clients, showing off their projects right on the homepage. We believe our work is the best introduction to us as a company. Overall, the homepage is lighter and brighter, and it’s easier to understand what we do right away.
Moving forward
Looking back over the past six months, it’s great to see how far we’ve come. Even with a few hours here and there, we’ve been able to build a site that represents us. You should check back soon. Next time there will be something new to see!
