Part 1 | The Design
As we hope you’ve noticed, we at Oomph recently launched our brand-new, revamped, responsive website – and we couldn’t be more proud. But don’t be fooled, dear readers, this project took a huge amount of internal effort, resources, and collective patience. To give some insight into our experience and to help you in your web design endeavors, we thought we’d show you a behind-the-scenes, “no holds barred,” multifaceted look at each component of this project: the design, the process, the development, the marketing/branding, and the content writing. Each Monday for the next 5 weeks you’ll laugh, we’ll cry, and Oomph will expose the honest truth about how our namesake site came to be. In the end, we hope you’ll take a few nuggets of our imparted wisdom with you into your next web design project.
Now, let’s get started. Here’s where we began:
Oomph 1.0 was a cute, spunky, and well-organized website. It did its job well, but after a number of years we realized it didn’t reflect our growing company, respond well on tablet and mobile, or position us as innovators in our industry. We knew we needed a redesign, but we didn’t want to spend all of our time on a facelift when we had clients that needed help! Then we had a brilliant idea: What if we updated the current website while also building a brand new site, at a more gradual pace? Here’s what we came up with:
While this new site idea didn’t look awful, it certainly didn’t look very different. Even with a new content layout and fresh shade of lipstick, the site didn’t check all the boxes—which brings us to our first lesson:
LESSON #1: Don’t Try to Build Two Websites at the Same Time
It’s a bad idea, and you’ll spread yourself too thin. Concentrate all of your effort on one, shining beacon of a site that your team can look forward to reaching together.
So we abandoned Oomph 1.0 once and for all, got that proverbial beacon back in our sights, and started working on a brand new site, full speed ahead. Since our company started as development shop, we played with the metaphorical idea that we were “the guys under the hood.” We fleshed this out with a few designs that featured high-quality, stylish shots of luxury cars and car parts.
However, we soon realized that we looked like a shady auto body shop. We had to go back to the drawing board, think about our core brand values, and… well, find ourselves.
After spending a month or so on brand exploration, we finally felt like we knew where we wanted to be, where we wanted to go, and how we should look when we showed up. We wanted to be big, bold, and red with lots of dev cred. We came up with:
Nice progress, right? This design was fresh, visual, and super red. We kept pressing forward. We wanted more modern. We did some research. Then, we really screwed up. Lesson #2 reflects a huge pet-peeve of mine—maybe it works for some creatives out there, but I hate, hate, hate it.
LESSON #2: Don’t Look at Other Agency Websites.
We thought it would inspire us, giving us an inside look into what was working for our competitors. In the end, it just delayed us, as it brought us farther away from our unique identity, and closer to some generic, uber-modern monster that didn’t work.
Okay, it’s not so bad—but original? Nah. We had to fight back, and get our website back to something that was uniquely ours. So what do you do when you’ve backed yourself into a corner?
LESSON #3: Always Go Back to Your Website Objectives and Brand Building Blocks
We’ll talk more about branding in a later post, but for now, remember to always keep your brand in mind. For Oomph it was the lifeboat that brought us back to our design sweet spot.
Our main objective had been evolving, but at our cores we knew we wanted to make a digital destination that marked the future of big media sites. To keep the design both user-friendly and cutting-edge, we broke the homepage up into “ribbons,” each containing a massive, stunning image.
This was it. We were in love. The only problem was, our development team wasn’t as smitten. We learned the hard way:
LESSON #4: Never Design a Site Without Your Lead Engineer
Believe me, there are a lot of folks we didn’t use along the way in the early days of making of this website. After all, it’s an internal project, and we didn’t want to waste those precious, billable hours. However, the creative force needs to always be working in tandem with a lead digital engineer. Designing in a vacuum will only create problems, encourage unrealistic expectations from both sides, and waste time in the long run. In this case, we had responsive design issues. The site we wanted would be extremely difficult to optimize for mobile, and we couldn’t find a work-around. So, after an effective consult, we came up with a more feasible idea that was somehow even bigger than before.
By George, we thought we had it! It was responsive, visual, and unique—What more could we want? We had come so far and we were finally honing into a single vision. But, there was one hurdle to jump:
LESSON #5: While Creative Thinking is Unbound, Good Photography is Not.
Our creative process always starts without limitations. Eventually (and painfully), you have to solve the problems that this thinking creates. In our case, the huge, high-quality photos we had grown to love were not legally available for commercial use. How could we go back to generic stock photos after seeing perfection? Luckily, where there’s a will there’s a way. We found a lot of the photos we needed searching commercially-available, creative commons photos—using websites like Flickr. With the right shots in hand, we launched the site within a year of its first conception. Not bad, right?
And that’s it. Almost.
Two more things you need to know:
LESSON #6: Give New Ideas Time Before Dismissing Them
Realize that you may not be crazy about everything on your site, at least right away. Our team had plenty of disagreements along the way. You have to pick your battles, consider the source, and sometimes compromise. Some things may grow on you, some things you may toss out, but some things you may keep for reasons beyond design. Does this new feature, though not your favorite, better the user experience? Does it achieve a goal outside of design? Give yourself time; you may be surprised.
LESSON #7: Be Patient
The design flow of a redesign is a long and winding one. During a site redesign, you have to remember that all elements of this process are fluid and often compromises must be made to reach that final, ideal place in which the brand values, creative wishes, and technical requirements converge. Having arrived there, our team finally feels at design peace.
Well, at least until it’s time for Oomph 2.1.
The post The Cobbler’s Shoes: 7 Self-Learned Lessons From a Web Agency Designing Its Own Site appeared first on Oomph.