Planning for Successful Website Redesign
Website redesign takes a lot of time—designer and client time—and as such should be undertaken with a great deal of preparation and planning. Well prepared and planned for website redesign will reduce anxiety about budgets, time-lines and make it easier for designers/developers to execute it.
| Planning |
Execution |
|---|---|
|
|
1. Why do a redesign?
The very first thing you want to do is ask your client why redesign. Simply because the website is “old and out of date“, or “we got new branding so we need a redesign” is not enough unless updating, and new branding will result in increased number of prospects and conversions.
So the two main goals for business website redesign should always be:
- To get more prospects
- To increase conversion rates
| Getting more prospects involves: |
Increasing conversion rates involves: |
|---|---|
|
|
Have a discussion with your client about these goals and make sure the creative brief is written around them.
2. Who is involved?
Having the creative brief and knowing who is involved in the project will make budgeting, time-line and project management smooth and predictable process.
| On the client side you may have: |
The provider team may involve: |
|---|---|
|
|
As a freelancer you may wear many hats, but in an agency world the list of team members may be greater, so it is important to determine single point of contact on both the client’s and the provider’s side.
To provide your client with an estimates that will not come back and bite you, make sure everyone on the team is consulted about the time needed to execute the project. Even a simple spread-sheet like this can help you get started.
3. Technical requirements
To minimize cost, invest as much time as possible in gathering technical info and requirements. If you are not sure what question to ask, try to involve a developer in the discussion.
Questions to ask:
- Who is site/domain name owner?
- Where will the site be hosted?
- Who is the content owner?
- Are there needs for a CMS, and what are CMS functions?
- Who will work with the client to gather a detailed list of website requirements?
- Is there a need for a separate mobile version of the site?
- What are the database requirements, if any?
- Will there be any down time? For how long?
- Is the content pulled from other sources?
4. Design Requirements
Design plays a big role in increasing conversion rates. Users react to the design before they read a single word, and if the design is poorly executed, they will question the credibility of the business and leave.
The execution will depend on wireframes, but before you get to that point, you’ll need to answer some basic questions:
- Who is the audience?
- Are we using existing or new branding?
- Is Flash welcomed?
- Can stock photography be used or is photoshoot needed?
5. Take inventory of the current site
Don’t remove valuable content, loose links, keywords or change good conversion tools without consulting an SEO and UI specialist. Take a snapshot of what’s working on the site and make sure to include it in the new website.
- What is the most visited content?
- Where are the links coming from?
- What are the popular keywords that get current prospects?
- How are your conversion forms performing?
- Study current analytics to figure out how users are using your site right now.
6. ROI measures
Without measurable ROI your redesign efforts will be useless. A snapshot from the previous step can help in creating metrics.
Here are the right metrics to track:
- Online lead volume
- Organic search referral
- PPC volume
- Conversion rates on non-campaign traffic
- Conversion rates on campaign traffic
- Cost/conversion for campaign traffic
7. Conduct Competitor Analysis
It is important to know how your current site compares to others in the industry. Find out who those competitors are and how they manage information on their sites. But keep in mind that just because they are doing something a certain way, doesn’t mean it is the right thing to do.
8. Create a site map
Based on the site’s purpose, it’s visitors and what the users are going to do on it, start working on how the information is going to be provided, accessed and presented. Using sticky notes and a whiteboard works really well when working on site maps in teams. You can also use a free service WriteMaps.com to create, collaborate and share site maps with clients.
9. Build the wireframes
When working on wireframes keep in mind that one of the main reasons the website is being redesigned is to increase conversion rates. Make sure the wireframe depicts a UI that is intuitive enough for a prospect to become a customer.
Create wireframes for each section of the site:
- Home page
- Category page
- Detail page
- Conversion Tools/Page
Home page wireframes:
- Is this what I expected to see?
- Does this look credible and trustworthy?
- What does this company do?
- Does this site offer what I want?
- Does this site look and function good enough to spend more time on it?
- What action do I take next?
- How do I learn more?
- How do I contact company?
Category page wireframes:
- Did I pick the right category?
- How are the products organized? By price, color, size or something else?
- Can I rearrange them? How?
- Are there more items and where?
- I saw something I liked a moment ago. How do I go back?
- How do I narrow the list?
- Oops I narrowed it too much. Can I undo?
- I see something I want. How do I buy?
Detail page wireframes:
Arrival questions
- How much more do I have to go?
- Is this the item I expected to see?
- What does it look like?
- What are the main features and benefits?
- How do I examine it more closely?
- What does it do, how does it work?
- What are its options, and how do they look?
- How do I select or change options?
- Is it available for purchase?
- What do other people say about it?
- How much does it cost?
- Is it on sale?
- Are there promotional codes?
- How do I get estimates if no price is listed?
- Does it come with any accessories?
- What other items complement it?
- What shipping/return/warranty/support options are available?
- How do I buy or start the pricing process?
- What if I don’t want to purchase right now?
- What if I have more questions?
Conversion tools/page wireframes:
When the form is first presented:
- Where do I start?
- Does it look easy?
- Will it take a long time?
- Are there a lot of steps in the process?
- Does it ask for a reasonable amount of information?
- Are the questions reasonable? Do they fit the situation?
- Is my info secure and private? How private?
- I don’t understand this question; is there an explanation?
- I’m not comfortable filling out the form online; is there another way?
- I am having trouble with the form; how do I get help?
- What happens when I click submit?
Some great free tools for wirefaming:
10. Usability Testing
Remember that you are not an average website user. You design for and use web very differently compared to your website’s audience. Having that in mind, arrange and conduct some basic wireframe testing to ensure the UI is understood by the intended audiance.
You can conduct some basic testing by arranging wireframes on a desk and asking participants to interact with them. Have them speak out loud what they are thinking as they are interacting with the UI.
You can find participants through friends, family or social media. I’ve done some basic testing by taking prototypes to local coffee house and asking people to help me out. It’s amazing what kind of info you can gather for a cup of espresso.
Resources
For more details on website redesign I highly recommend following books:
- Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition
- Web Design for ROI: Turning Browsers into Buyers & Prospects into Leads
- The Design of Everyday Things
- Web ReDesign 2.0: Workflow that Works (2nd Edition)
