February 6th, 2011 // by Josh Miles

Behind the Redesign: MilesDesign.com

Buffer

Just before the New Year, I was thinking about all of the “little tweaks” I wanted to make to milesdesign.com. At that time, our current website design was only about eight months old. Although I didn’t intend to generally alter the look or feel of our site, I couldn’t help but see opportunities for improvement. A few hours later, those “little tweaks” turned into a full-scale redesign.

Miles Design before and after

I moved into “rapid prototyping” mode, quickly exploring grid and layout options within the existing brand identity system, landing ultimately on a new 6-column grid.

Here’s a quick rundown of many of the design changes we made, why we made them, and some of the technical improvements achieved by redesigning our own website.

For a detailed view of the homepage changes, you can click the image below:

A tour of the milesdesign.com redesign

1. A new grid-based design: Our last site had different layouts based on which page the visitor was on. The new site adheres to a much more strict grid, which not only looks cleaner, but makes for better usability.

6 column grid

2. Cleaner, more consistent navigation: One such improvement was more consistent navigation elements. The old site had navigation showing up in odd places–the result of features that were added post-design.

3. New Content Management System: The new content management system (CMS) is a product of Wired Ground called Capacitor. The newest version of their CMS is written in PHP using the Zend Framework and boasts stronger SEO tools. Capacitor is a CMS that we’ve been using on some of our new client projects. A big thank you to these guys for making this project happen so quickly.

capacitor cms

4. More clear calls to action: The new site gets users deeper into our portfolio faster with more direct calls to action. The top banner image on the homepage rotates to show highlighted projects and case studies.

cta button

5. More distinct positioning: We wanted the new site to focus more clearly on our areas of expertise: branding and design for professional services firms such as architects, consultants, and software companies. The new “Work” section focuses exclusively on these segments.

6. Blog updates: Our previous blog had undergone a moderate update late last year, but we took this opportunity to introduce the same grid as the website, tidy up individual post pages, integrate Feedburner as a subscription option, along with our other social networks.

7. Removing Flash: Our last site was very light on Adobe Flash, utilizing it only for sIFR, which opened up more options from a typography perspective. However, we’ve maintained some “Flash-like motion” throughout the site with fading transitions, sliders, and our main navigation mouse-over effect, courtesy of the jQuery JavaScript library.

8. Better integration with external services: Speaking of typography, we’re now utilizing an external service called TypeKit to securely serve up real fonts for headlines, in addition to our other external integrated services: Google Analytics, EMMA, and Feedburner.

9. Content additions: We’ve added a large amount of new work, testimonials, and other content, including a more substantial footer.

new footer

10. SEO improvements: Most of the SEO improvements are a direct benefit of the new CMS which boasts built-in 301, 404, and SEO tools, however our site has better compression, resulting in much better page speeds, which apparently Google likes. And we’re okay with that, of course.

It’s easy to delay working on your own website by putting it on the back burner, agonizing over the details, or ignoring it all together. So to combat that, we set a soft launch goal of February 1st, and managed to launch (in spite of the “icepocalypse”) only two days after our goal. Our total timeline, from concept to launch, was very accelerated–only about five weeks in total.

On any project, especially when it is for your own company, setting aside time, establishing a deadline, and making it a top priority is the only way to ensure it will get done.

What is the biggest internal challenge you have this year? Let us know how we can help or encourage you to get it done.

Josh Miles

Josh Miles is principal and founder of Miles Design, a branding firm specializing in branding and website design for professional services and software firms, as well as the author of Bold Brand.

Tags: , , , , ,

22 Responses to “Behind the Redesign: MilesDesign.com”

  1. We just launched the new Miles Design website (@milesdesign). Josh Miles explains the process behind the redesign http://bit.ly/igy3cq

  2. RT @Wiredground: We just launched the new @milesdesign website. Josh explains the process behind the redesign http://bit.ly/igy3cq

  3. RT @joshmiles: RT @Wiredground: We just launched the new @milesdesign website. Josh explains the process behind the redesign http://bit.ly/igy3cq

  4. Jennair Gerardot says:

    Josh–Great blog about the new design which also shows readers the process of what Miles does for clients. Case study on yourself… You’ll have to post later about measurable results in how the changes in this website design and functionality was successful for you. Good job.

  5. Pingback: Tweets that mention Behind the Redesign: MilesDesign.com « Miles Design Blog | branding, design and strategy for professional services firms -- Topsy.com

  6. Josh Miles says:

    Thanks Jennair – we’ll definitely keep you posted.

  7. Behind the Redesign: MilesDesign.com « Miles Design Blog … http://bit.ly/gdrCVo

  8. RT @joshmiles …just launched the new @milesdesign website. Josh explains the process behind the redesign http://bit.ly/igy3cq

  9. RT @jcookdesign: Behind the Redesign: MilesDesign.com http://bit.ly/igy3cq

  10. RT @jcookdesign: Behind the Redesign: MilesDesign.com http://bit.ly/igy3cq

  11. J Brian Crain says:

    Nize. Josh it has been great to watch you and your company flourish over the last ten years. The level of expertise and strategic thinking demonstrated in your work proves the value of quality branding, and the quality of design that originates from Indy. Keep it up.

    -b

  12. Great post from @milesdesign on their new web design http://bit.ly/ebQM56. Way to break out the changes & the reasoning for each. Well done.

  13. Oh…a link would help http://bit.ly/ebQM56 @milesdesign @joshmiles

  14. Josh Miles says:

    Thank you Brian – let us know where to mail your check. (Just kidding!)

  15. RT @joshmiles: Thank you Chris! RT @chris_c_lucas: Great post from @milesdesign on their new web design http://bit.ly/ebQM56.

  16. RT @chris_c_lucas: Great post from @milesdesign on their new web design http://bit.ly/ebQM56. Way to break out the changes & the reasoning for each. Well done.

  17. Maggie Smith says:

    Josh, the site looks great. Love the behind the scenes process of the redesign. I’m wondering about the headline font (Behind the Redesign:Miles Design.com), to me, it looks pixelated or choppy. Is that a design element (intentional) or some technical problem with the font/style sheet? Thanks

  18. RT @milesdesign Behind the Redesign: MilesDesign.com http://bit.ly/igy3cq

  19. RT @milesdesign Behind the Redesign: MilesDesign.com http://bit.ly/igy3cq

  20. RT @milesdesign Behind the Redesign: MilesDesign.com http://bit.ly/igy3cq Great stuff Josh.

  21. RT @milesdesign Behind the Redesign: MilesDesign.com http://bit.ly/igy3cq

Leave a Reply