A Non-Web Developers Guide to a Website Redesign

A Non-Web Developers Guide to a Website Redesign
Category
jtomasino3 Sat, 11/16/2019 - 20:51

 

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.

    Download the template now

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: Initiation
Category
jtomasino3 Sat, 11/16/2019 - 21:30

A NON-WEB DEVELOPERS GUIDE TO A WEBSITE REDESIGN
Download the template now

PHASE 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:

Lightbulb iconTIP:
“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 jtomasino3 Sat, 11/16/2019 - 21:57

A NON-WEB DEVELOPERS GUIDE TO A WEBSITE REDESIGN
Download the template now

PHASE 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

lightbulb iconTIP:
“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 jtomasino3 Sat, 11/16/2019 - 22:00

A NON-WEB DEVELOPERS GUIDE TO A WEBSITE REDESIGN
Download the template now

PHASE 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:

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.

lightbulb icon
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 Design
Category
jtomasino3 Sat, 11/16/2019 - 22:46

A NON-WEB DEVELOPERS GUIDE TO A WEBSITE REDESIGN
Download the template now

PHASE 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.
 

lightbulb iconTIP:
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: Wireframing jtomasino3 Sat, 11/16/2019 - 23:01

A NON-WEB DEVELOPERS GUIDE TO A WEBSITE REDESIGN
Download the template now

PHASE 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.

lightbulb iconTIP:
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 Design
Category
jtomasino3 Sat, 11/16/2019 - 23:18

A NON-WEB DEVELOPERS GUIDE TO A WEBSITE REDESIGN
Download the template now

PHASE 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.

lightbulb icon
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: Development
Category
jtomasino3 Sat, 11/16/2019 - 23:32

A NON-WEB DEVELOPERS GUIDE TO A WEBSITE REDESIGN
Download the template now

PHASE 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: Populate
Category
jtomasino3 Sat, 11/16/2019 - 20:40
Tags

A NON-WEB DEVELOPERS GUIDE TO A WEBSITE REDESIGN
Download the template now

PHASE 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

lightbulb icon
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 jtomasino3 Sat, 11/16/2019 - 23:48

A NON-WEB DEVELOPERS GUIDE TO A WEBSITE REDESIGN
Download the template now

PHASE 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: Launch jtomasino3 Sat, 11/16/2019 - 23:56

A NON-WEB DEVELOPERS GUIDE TO A WEBSITE REDESIGN
Download the template now

PHASE 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.

lightbulb icon
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 jtomasino3 Sun, 11/17/2019 - 00:04

A NON-WEB DEVELOPERS GUIDE TO A WEBSITE REDESIGN
Download the template now

PHASE 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.