Download Web ReDesign - Ladd Bosworth Online

Web Redesign
Ladd Bosworth
Web Operations Manager
About Me
• 10 years website development
experience
• Manage Intranet with 20,000 documents
and 30 content contributors in 6 different
countries
• Redesigned Intranet in 2006
• Manage public website, redesigned 2005
Our Team Structure
Web Operations
Manager
IT Team
Web Content
Designer
Design Firm
Content
Contributors
Redesign Tips
• Focus on your Audience
• Redesign toward web standards
• Test site in IE, Firefox, Safari
• Windows and Mac
• Believe in usability testing
• Think long term, but focus on short term.
Identify scope and what is included and
what is not included in this iteration
• Don’t get bogged down by what you
can’t control right now (application
content, etc)
Redesign Tips
•Ladd’s Number One Rule:
•Just because you can,
•doesn’t mean you should
•Make sure “bells and whistles” don’t detract from the
goals of the site.
Redesign Process Flow
Elements of Website Redesign:
1.
Define the Project
2.
Develop Site Structure
3.
Design the Visual Interface
4.
Build and Integrate
5.
Launch and Beyond
1. Define the Project
1. Define the Project
• Understanding Your Audience
• Client Survey: key questions for inhouse stakeholders to frame the overall
redesign process
• Customer Survey: 5 questions
relating to current site features and
possible enhancements
1. Define the Project
• Understanding Your Audience: User
Profiles
• Build User Profiles: 3-5 fictional
characters that represent aspects of your
audience.
• Based on User Survey Responses
• Basic demographics
• Likes, dislikes
• Frustrations with your site
• Product-related desires
1. Define the Project
• Analyzing Your Industry
• Gather web team around a computer or
projector
• Surf other industry-related websites
• Create a Features list
(even if you don’t like the feature)
• Look at all competition, small or large,
and even other divisions within your
company
• Start a file with screen shots of
competition sites
1. Define the Project
• Preparing a Creative Brief
• Project Overview
• Target Audience
• End-User Perception/Tone
• Non-visual: don’t include mock-ups or
other visuals here
• Project Framework: This document will
guide the steps that follow
2. Develop Site Structure
2. Develop Site Structure
• Audit Existing Content
• What content exists on the site today?
• Should it stay on the site?
• Is it up-to-date?
• Is it functional?
2. Develop Site Structure
• Create a Content Delivery Plan
• What content is missing from the site?
• Who in the company provides that
content?
• What are their deadlines?
(Remember, content is ALWAYS late, so pad these dates!)
2. Develop Site Structure
• Determining Site Structure
• Existing site: What works? What doesn’t
• What new content are you adding?
• Sitemapping: show a visual
representation of the structure and flow
• The sitemap will help you determine the
navigation and which areas need content
3. Design the Visual Interface
3. Design the Visual Interface
• Working with a Design Firm or Designer
• Although we have several talented designers
in-house, we contract out our full site design
• Full time site designers have fresh ideas and
are not bogged down by corporate “emotions”
• Difference between designing a great banner
ad and designing a great site and user
interface. You want an interface designer.
• Share the Creative Brief you created earlier
with the designer. Talk about the goals of the
projects and any design constraints such as
color etc.
3. Design the Visual Interface
• Wireframing
• Encourage your designer or design firm to
produce wireframes. Some don’t. This is a
great way to work out small layout and
navigation issues without being distracted by
color or design.
• Show rough layout, graphic space, key
headers, and any other elements that need to
appear on the page
• Include navigation, functionality, links, header,
footer, login, banner ads, marketing text, etc
• Don’t include specific graphics or design
elements. Keep it simple.
3. Design the Visual Interface
• Addressing Navigation
• Navigation can be tabs, list of links,
menus, etc
• Never hide content from users behind
“nifty” navigation gizmos like drop downs
• Choose words carefully, make sure they
will make sense to the end users and are
not industry-speak or gimmicky.
3. Design the Visual Interface
• Reviewing Site Goals
• After the wireframes are created, but
before the initial designs are presented,
review the site goals and the creative
brief.
• Has anything changed? Does it need
updates based on discoveries in the
wireframing process?
3. Design the Visual Interface
• Presenting Designs & Gathering Feedback
• Ask the designer or design firm for three
design options to review
• Gather the web team to review the initial
designs. Leave the executives and non-web
people out of this meeting for now.
• Don’t take a design for a whole package. Pick
aspects of each that you like and don’t like.
Encourage open discussion and brainstorming.
• Two or three rounds of the design phase are
not uncommon. After two iterations, try to
narrow the design to one option and present
that to the non-web stakeholders.
3. Design the Visual Interface
• Creating Graphic Templates
• We pay the design firm or designer to create 3
graphic templates of the site for us.
• Usually includes Homepage, news/feature
page, and a sub-page.
• Our web team then codes the pages, images,
CSS, and scripting to meet our technical
requirements.
• Alternately, you could pay the design firm to
create the site and the bulk of the content for
you. Most design firms and designers will code
as much or as little as you request.
3. Design the Visual Interface
• Creating a Design Style Guide
• A Style Guide is simply a reference of the
colors, CSS styles, image sizes, and
other site standards
• It can be as simple as a one page
document
• Guides future development and
maintenance of the site.
4. Build and Integrate
4. Build and Integrate
• Creating HTML Templates and Pages
• Creating templates now will save you
maintenance concerns later
• Process will vary based on your content
management system
• If the designer is coding your pages,
ensure that they create templates to
make adding content later easier
4. Build and Integrate
• Conducting QA Testing
• Set-up a test environment with a
functional copy of your site.
• Find spelling errors, misplaced content,
browser inconsistencies, and other minor
bugs.
• Double check compatibility with IE 6, IE
7, Firefox, and Safari. Don’t make the
mistake of excluding a customer based
on their browser!
4. Build and Integrate
• Conducting Usability Testing
• Now is the time to ensure you have
created a site that the end-users will
love.
• Identify 8-10 people who can test the
site. Some should be internal, but most
should be members of the target
audience. People who responded to your
user survey are often eager to help
improve the site.
4. Build and Integrate
• Conducting Usability Testing
• Sit one subject at a computer and have
one moderator give them specific tasks
to accomplish. The hardest part of this is
keeping the moderator from “helping”
the user. Remember, if they get stuck you
have identified a potential problem in the
design, so don’t help them.
• Ask the subject to talk out loud about
his/her impressions, thoughts, and
articulate their movements. “I’m looking
for login, but I can’t see it. I will click
‘about us’ and see if it is there”
5. Launch and Beyond
5. Launch and Beyond
• Preparing an Announcement Plan
• Designed to ease your customers into the new
site. Don’t just change the site and expect
them to adapt.
• Tell them what you’ve changed, and why
you’ve changed it.
• Highlight new features or key improvements
• If there is new navigation, alert them to it and
explain the benefit
• Solicit feedback. Remember, humans are
naturally resistant to change, but their
comments will help identify any issues that
might not have been discovered in the QA or
usability testing.
5. Launch and Beyond
• Optimizing for Search Engines
• Don’t submit your site and don’t pay
anyone to improve your ranking
• The number one way to increase your
ranking? Standards Based Design. Code
your site so that the spiders can read it.
Alt tags on images, CSS, proper use of
h1-h3 tags.
• No frames, Flash, splash pages, fancy
JavaScript navigation, etc.
5. Launch and Beyond
• Launching the Site
• Plan to launch the site during off-peak
times. We launch Friday nights so that if
something goes wrong we have all
weekend to fix it.
• Back-up the old site, or have some way
to roll back, just in case. Most content
management systems make this easy.
• QA test the live server. Make sure all of
your files moved over from the test
server correctly.
5. Launch and Beyond
• Maintaining the Site
• As soon as the site is live, the
Maintenance phase kicks in.
• How often your site needs to be changed
to stay fresh depends on your product.
Banking sites do not need to be as
dynamic as blogs or news sites.
5. Launch and Beyond
• Internal vs. External Maintenance
Teams
• The firm that designed the site, a
contract designer, or in-house designer
are all options.
• Depending on the size and capabilities of
your internal web team
• Also consider how often the site will be
updated? Do you post news items daily?
Or is it just monthly rotation of
marketing materials?
5. Launch and Beyond
• Next Steps…
• Don’t rest.
• If you only redesigned part of the site,
what other aspects of the site could be
improved?
• Which items that were out-of-scope for
this project would be a target for
improvement
• Formulate a plan to continue updating
and improving the site over the next 2
years.
Also Consider…
• Web Analytics: If you don’t track statistics for
your website usage now, a redesign is the
perfect time to start. Solutions vary from the
free Google Analytics to the expensive
WebTrends on Demand
• Firefox Developer Toolbar: excellent for
testing sites, disabling css, etc.
• Original PSD Files: Make sure your designer
gives you the original PhotoShop files for your
design. If something goes wrong later on,
you’ll need them.
• Usability Testing: Learn more at
www.uie.com
Also Consider…
• Content Management
• Options vary based on the size and
complexity of the site
• For simple sites, I favor using Adobe
Dreamweaver for the pro designers and
Adobe Contribute for the content
contributors
Credits
•The foundation for the
process outlined in this
presentation is from
“Web ReDesign 2.0:
Workflow that Works”
by Kelly Goto and Emily
Cotler