Designing Avelient: Kick-off
Long before my transition to Avelient as Creative Director, I’d been eyeing their website as a potential project that I wanted to get my hands on. Now, I am getting a chance to dig in and really come up with a solid website as we launch into the new year.
This will be a mini-series that I update as we progress through the project. It will serve to show the work as it develops, and to help show my process a little bit.
Step One: Current Site Review
Before I jump into a re-design project, I always try to do a full and thorough review of the client’s current website to analyse it’s weaknesses and any potential strengths of content, layout, brand and UX.
The original design was fairly hastily put together in Rapidweaver, in 2005, so it’s a few years out of date. Due to demands of daily project work, and growing the company, the staff never got a chance to update the site that often. Content was added as needed, and usually out of necessity, which of-course means that there wasn’t much time following procedure and make sure that changes made sense and were were effective with connecting with the site’s visitors.
A few technical problems:
- Grid – Though the grid isn’t horrible, and from page-to-page most of the elements are consistent, it doesn’t carry on to the content, creating a little bit of a learning curve for visitors on each page.
- Usability – Small fixed-sized fonts, low contrast, and inconsistant link colors make it a little hard to parse the content.
- Colors – The current colors in the brand are fairly dark and didn’t give a designer many choices.
- Content – Inconsistant and in need of a little formatting and planning.
Business reasons for a re-design:
Avelient has been offering consulting services to very large businesses for quite some time now and their website was not really an integral part of their sales / service process. However, with the new team members and the Avelient / West office opening up, there is a basic need to update the look of the site and content to reflect the changes happening in the company. Customers need to be able to find out information regarding our services, team, capabilities, etc.
Of course, since the time the site was built, there have been huge leaps and bounds in the technological areas like: browsers, code, and design techniques that could be put to good use to make sure the customer is confident that we actually can do the work we say we do.
In addition to the design / information aspects, Avelient will be serving a much wider pool of customers through maintenance and support for their websites. Being able to direct clients with problems, questions and updates to the appropriate tools like the support center, knowledge-base, and project management tools is an important aspect of managing work-flow and keeping our over-head low.
After discussing the needs and requirements for the 2010 website, we went through a process of determining some of the following details.
- We’d keep the current brand and focus on improving it later down the road when we have a bit more time. We’re too busy transitioning the company, setting up infrastructure, developing our services and products to be distracted with “making things pretty”.
- The site doesn’t need to focus on being some massive, interactive site that blows the visitors socks off. We just need to focus on providing access to information about our company, the services we offer, and of course, include a blog. Everyone needs a blog these day, right?
- I chose to go with a 960 pixel width design, giving us a bit more room for content, and to take advantage of the fact that most people aren’t browsing the web at 800×600 anymore.
- I also created a list of all the old content items, and new details that needed to be included in the design. This gives me a checklist of things to move through as I lay the design out to make sure certain items get the attention they need during the grid-layout process.
I often find that though designing for yourself is one of the most difficult things a designer can do, there are a few advantages. You are often able to skip a few steps, and of course there is no need to explain in detail why the logo shouldn’t be increased by 20%.
Tomorrow I plan on detailing out the color scheme problems, layout, and initial comps that we’ve created for the site.