A Non-Web Developers Guide to a Website Redesign
A Non-Web Developers Guide to a Website Redesign
Introduction
Planning a website redesign is daunting, and the process is long and tedious — especially if you don't do it on a regular basis.
Have no fear: This guide aims to help make your job easier by providing an overview of the common phases and resources involved in a website redesign project so that you can set expectations and properly staff your internal and/or external teams.
Before You Begin
- Review the process overview below. While the process you ultimately follow may not mirror the steps exactly, it should follow similar guidelines.
- Familiarize yourself with some basic web development terminology.
- Download the template, which allows you to fill in your own data and ideas for each step.
Overview of the Process
Phase One: Plan
Initiation
- Identify the website’s purpose.
- Determine success metrics.
- Identify target audiences.
- Assemble a project team.
Discovery
- Assess the current website.
- Audit current content.
- Interview stakeholders.
- Look at competitor websites.
Scope
- List required features and functionalities.
- Determine the content management system (CMS), web hosting, and other integrations.
- Indicate Institute- and department-level requirements.
- Set a preliminary budget.
Phase Two: Design
UX Design
- Draft a sitemap.
- Articulate user flows.
- Create content outlines.
Wireframing
- Design homepage wireframes.
- Design main template-page wireframes.
Visual Design
- Using the Drupal theme as a base, determine the overall visual feel.
- Using wireframes, design homepage and main page mockups.
- Create and gather visual assets.
Phase Three: Build
Development
- Set up CMS.
- Install and customize the theme.
- Build page templates.
- Install and configure any data and service integrations or modules.
- Program any custom functionality.
- Customize the backend.
Population
- Add content including text, visuals, and files.
- Add links and functionality to the content.
- Proofread and edit where required.
- Create a 301 redirect strategy.
Phase Four: Deploy
Testing
- Test on different devices and browsers.
- Track and correct bugs.
- Find and fix broken links.
- Optimize and adjust as needed.
- Test for accessibility compliance.
Launch
- Assign user roles and train on CMS.
- Push the new website live.
- Implement 301 redirects for new URLs.
- Celebrate your good work!
Maintenance
- Monitor website traffic.
- Validate your page load times.
- Inform linking partners of your new URL structure.
- Create/update the XML sitemap and submit it to search engines.
Next Step
In the initiation phase, the project sponsors and other important stakeholders will decide whether to commit to the web project and define it at a broad level.
Website Redesign: Initiation
Website Redesign: InitiationPHASE 1: PLAN
The project sponsors and other important stakeholders will decide whether to commit to the web project and define it at a broad level.
Identify the website’s purpose.
- What is the rationale for embarking on this website project?
Example: We want a website that focuses solely on this program and the functions related to applying, enrolling, and being a student of the program. - What are your objectives and how will you leverage the website to achieve them?
Example: Increase newsletter subscriptions by making the web form responsive and brief.
Determine success metrics.
- How will you measure impact and success?
Example: Increase subscriptions 10%, from 500 to 550.
Identify target audiences and audience goals.
- Who are the primary and secondary audiences?
Examples: Prospective undergraduate students, current undergraduate students, prospective graduate students, current graduate students. - Are there any other key audiences that will visit the website?
Examples: High school counselors, parents of prospective undergraduate students. - What are the top three tasks you want each of these audiences to do on the website?
Examples: Read graduate program descriptions, learn how to apply, sign up for the newsletter.
Assemble a project team.
Who will be involved in the building, launch, and maintenance of your website? To determine whether you may need to hire an external vendor, answer the following questions:
- Do you have an in-house web developer? Yes/No
- Do you have an in-house content writer and editor? Yes/No
- Do you have an in-house designer? Yes/No
- Do internal team members have the bandwidth to make the website a top priority during key phases of the project? Yes/No
If you answered, “No” to any of the questions above, you should plan to hire freelance professionals or agencies. In this case, you will need to prepare a Scope of Work in order to find the best professionals to work with within your budget.
For those considering hiring a third party for their website work, Georgia Tech has an enterprise-wide contract in place that allows you to quickly get estimates from a group of pre-approved vendors.
Resources:
- Hiring a Website Vendor (aka, How to navigate the enterprise-wide web projects contract)
- Scope of Work Examples: Small and Large Website Projects
(Note: you will need to login with your GT account information to access these documents.)
TIP:
“Around this time, there may be a need to develop a communications strategy around the redesign effort and launch. In some instances, the communications will primarily be internal.” Shayla Hill, Assistant Director - Digital Strategy
Next Step
Once the project has been formally started, all team members should participate in the discovery part of the Planning Phase.
Website Redesign: Discovery
Website Redesign: Discovery jtomasino3PHASE 1: PLAN
Once the project has been formally started, the discovery phase begins. This phase is meant to reveal the state of your website today and your competitive landscape. All team members should participate in this phase of the project.
Assess current website.
If your current website has analytics, pull reports to benchmark for comparison later.
Analyze current content.
Begin inventorying existing website content to determine what content you have on your site, what needs to be updated, what can be removed, and what needs to be created.
Resources:
Interview stakeholders.
Interview the individuals or groups whose work and responsibilities are affected by how the website performs. Their input will help set a strategic direction that will guide the process.
Resource: Stakeholder Interview Questions
Look at competitor websites.
Perform an analysis of competitor and peer website categories to identify best practices, good ideas to emulate, and bad ideas to avoid.
Resource: Competitive Review Template
TIP:
“I actually draft a sitemap before I do a content audit. It helps me to have a really clear idea of the structure before diving into the content, thereby making it easier to eliminate content that is no longer needed.” Ashlee Gardner, Communicator
Next Step
Identify the technical and functionality requirements for the new website during the scope portion of the Planning Phase.
Website Redesign: Scope
Website Redesign: Scope jtomasino3PHASE 1: PLAN
During the scope phase, you will identify the technical and functionality requirements for the new website. If you need to outsource any work, the information that you have gathered in the initiation, discovery, and scope phases will be critical for the external vendor.
List required features and functionalities.
What features and functionality would you like on the site?
Determine the content management system (CMS), web hosting, and other integrations.
Select the CMS and web hosting service that should be used, as well as determine whether the website needs to integrate with any third-party applications (e.g., Mercury, Google Analytics, Salesforce).
Resources:
Indicate Institute- and department-level requirements.
These are requirements related to usability, security, legal issues, page loading times, etc. As a state-funded school, there are several requirements that every Institute website must legally comply with:
- Accessibility: Federal law and Georgia Tech policy require that you follow proper accessibility guidelines when creating and updating content.
- Security: Familiarize yourself with and adhere to Security Best Practices.
- Data Protection: All Institute websites must comply with the EU General Data Protection Regulation Compliance Policy.
Set a preliminary budget.
Establish a preliminary budget for the project and indicate other funding sources that could affect the project.
Resource: What it costs to plan, design and build a custom website.
TIP:
If you have an internal web developer, they can begin setting up the staging/production environments.
Next Step
During the UX design phase, you will begin to organize content around your website visitors' needs and your unit's priorities. This begins the design phase of the website redesign project.
Website Redesign: UX Design
Website Redesign: UX DesignPHASE 2: DESIGN
In this phase, you will draft a high-level organization of the technical, functional, and visual components of the website.
Draft a sitemap.
Using the information and data gathered in the discovery phase, sketch out an optimal sitemap. A sitemap will typically mirror your main menu navigation and website pages branching off from those pages.
Resource: Plan Your Site Structure
Articulate user flows.
Map out what each user will do when they visit the website. Outline the series of steps that will be involved in accomplishing each task.
Resources:
Create content outlines.
Using the user flow information above, list the high-level ideas that you want to convey and that users would be looking for on the main pages of the website.
TIP:
Make sure all team members familiarize themselves with the Accessibility Primer and Search Engine Optimization (SEO) Fundamentals. The two go hand-in-hand to help create a highly usable and accessible website.
Resources:
Next Step
Built upon a sound UX strategy, the design phase continues with wireframing.
Website Redesign: Wireframing
Website Redesign: WireframingPHASE 2: DESIGN
Wireframes are 2D illustrations indicating where the major navigation and content elements will appear on a webpage.
Design homepage wireframes.
Include full screen and responsive views/layouts.
Resource: How to create wireframes
Design main template-page wireframes.
Include full screen and responsive views/layouts.
TIP:
While this is happening, the content team can begin assigning, gathering, and organizing content. At the same time, the web developers can begin working on any backend features that do not require design. The backend is the part of the website that users do not see or interact with.
Resources:
Next Step
The design process continues with the visual design phase.
Website Redesign: Visual Design
Website Redesign: Visual DesignPHASE 2: DESIGN
Built upon a sound UX strategy, the design process continues with the visual design of the website.
Determine the overall visual feel.
Use the Drupal theme as a base. Be sure to review the Institute's Brand Guide and Web and Digital Style Guide.
Resources:
Design homepage and main page mockups.
Using approved wireframes, design a homepage mockup including full screen and responsive views/layouts.
TIP:
Before creating mockups for the rest of the pages, take the homepage mockup all the way through the review and approval process.
Create and gather visual assets.
These assets include buttons, calls-to-action, photos, and videos.
Resources:
Next Step
When all of the mockups have been approved, the project will move into the development portion of the build phase.
Website Redesign: Development
Website Redesign: DevelopmentPHASE 3: BUILD
When all of the mockups have been approved, the project will move into the development portion of the build phase.
Set up the content management system (CMS).
The recommended CMS for Georgia Tech websites is Drupal.
Resources:
Install and customize the theme.
You can find a repo of a static HTML/CSS template for creating a Georgia Tech website on the Georgia Tech GitHub page.
Resource: Appearances and Themes
Build page templates.
A page template is a guide for how a certain type of page will look. When reviewing your sitemap and content outlines, think about how these pages will look. Note that your page templates should match the list of wireframes in the preceding sections.
Install third-party integrations.
Install and configure any data and service integrations or modules.
Resource: Recommended Systems and Services.
Program any custom functionality.
Customize the backend.
Next Step
When the content is ready, the web developer will populate the new website by transferring existing content and uploading any new content.
Website Redesign: Populate
Website Redesign: PopulatePHASE 3: BUILD
When the content is ready, the web developer will transfer existing content and upload any new content to the website.
Add content.
This includes text, visuals, and files. The web developer should work hand-in-hand with the designer to ensure that the text and graphics appear correctly on every page.
Add links and functionality within the content.
Once all of the features and templates have been developed and the content has been loaded, review and collaborate with stakeholders to optimize existing content across key content sections. In other words, ensure that every webpage links to at least one other webpage within your website.
Proofread and edit.
An editor should always review the website content before changes are made live to the public. Additionally, make sure that your website content follows the Institute's editorial style so that the voice is consistent across the Institute.
Resource: Georgia Tech Editorial Style Guide
Create a 301 redirect strategy.
If any URLs are changing on the new site, you’ll need to create a 301 redirect strategy to eliminate the possibility of broken links from other websites that link to the page or from browser bookmarks.
Resource: How to Create a 301 Redirect Map
TIP:
Once you’ve developed a full 301 redirect map, give it to the developers to implement.
Next Step
Next is the testing, where all participants make sure that the website works the way it should before it goes live. This is the first stage of the deploy phase.
Website Redesign: Testing
Website Redesign: Testing jtomasino3PHASE 4: DEPLOY
The testing phase is for all participants to test the website and fix any errors before making it live to the public.
Develop a test plan.
The test plan should include:
- The actions and tasks each testing participant needs to complete.
- A priority scale for classifying bugs or issues.
- A consolidated communication method.
Test on different devices and browsers.
Each participant should click links and view each page on Chrome, Safari, Firefox, etc., as well as on desktop and mobile devices.
Track and correct bugs.
Often, timing gets tight as you get closer to the launch deadline, so it may not be possible for developers to do everything in time. A priority scale allows decisions to be made in terms of which items are launch-critical versus more minor things that can wait.
Check for broken links.
Resource: W3C Link Checker.
Test for accessibility compliance.
Resources:
Optimize and adjust as needed.
Next Step
Once the site is fully approved, a launch date should be scheduled and the website prepared for launch.
Website Redesign: Launch
Website Redesign: LaunchPHASE 4: DEPLOY
Once the site is fully approved, a launch date should be scheduled and the website prepared for launch. The website launch is when the new website is made visible to the public.
Assign user roles and train on the content management system (CMS).
Provide documentation and training for key staff to equip them with an understanding of the CMS and site-specific customizations.
Push the new website live.
Migrate the website to the permanent server.
TIP:
On launch day, all team members should monitor the site to ensure that there are no issues.
Implement 301 redirects for new URLs.
Celebrate your good work!
Next Step
Moving forward, the website should be updated following a monthly maintenance schedule — at a minimum.
Website Redesign: Maintenance
Website Redesign: Maintenance jtomasino3PHASE 4: DEPLOY
Moving forward, the website should be maintained on a regular basis. This should include Drupal updates, security updates, content maintenance, and basic page styling.
Monitor website traffic.
For two months post-launch, monitor what has changed from your baseline analytics report and alert the team of any issues on a weekly basis.
Validate page load times.
Compare it to your pre-migration baseline.
Inform linking partners of your new URL structure.
Send them your 301 redirect map.
Update your XML sitemap.
Submit it to search engines.