#wddf26 Project 2: Redesign of an Existing Site

For this project, students will work in groups to redesign one section of a Saint Joseph’s University web site:

The groups are:

10:10-11:00 Section

11:15-12:05 Section

Students will have 1 or 2 meetings with representatives of their respective websites.

In order to make this project succeed, groups will need to create and stick to a schedule. Work backwards from the due date and create your own deadlines. You will need to work on several deliverables at the same time, dividing deliverables among the team members. There are multiple tasks associated with each stage.

The redesign mockups will include computer and mobile (tablet or phone) versions of the site. Students will use Adobe products (which everyone in the class now has access to) or Figma for the visual work and Gloomaps, a free browser-based sitemapping tool. You will also use various online usability and design websites and resources, including the Web Redesign book website, which includes blank documents mentioned in the book.

Each group will be assigned a GoogleDrive space where you will store all work you complete for the project, including notes and drafts. Do not compose anything outside of that folder. Name your files so they are meaningful. The folder will only be available to Bill, members of your group, and eventually your client.

First Things First

The first document you create for the site should be a schedule and who will complete what tasks. Divide tasks equally among group members. It is very important that each group member understands and follows through with their role within the group.

Choose one group member who will serve as the email contact for the client. Here is a sample email:

Subject: Compose a Professional and Appropriate Subject
Dear ADD CONTACT NAME with their title, <– choose which site is appropriate

My name is ______ and I am a student in Dr. Bill Wolff’s course that is focusing on website redesign. My group has been assigned your website and we’re excited to get started!

I’m emailing to see if you might have time this Friday afternoon, next Monday, and/or Tuesday when a representative from our group can meet with you to talk a bit about your feelings about the current site, what you like and don’t like, and what you would envision a redesigned site look like.

If you can provide multiple times that would be great so we can be sure one of our group members can meet then.

Looking forward to hearing back from you.

Sincerely,
Your name

Groups focusing on COM and the Barnes: Coordinate with the other group so you are sending only one email to Dr. Parry (COM) and Dr. Springer (Barnes). Change the email from singular to plural, make sure both names are on it, and the student who is not sending the email.

The project will be completed in three stages over the course of the second half of the semester:

Site Inventory and Analysis Creative Brief, to be completed by 10/23

Creating an accurate site inventory is perhaps the most important thing when designing and re-designing Web sites. The inventory helps us determine:

• how the site is structured
• what materials are on the page
• how the material is organized
• who the intended audience is and how well the content is matching up with the audience
• the problems with the structure

The material gleaned from the site inventory will then inform our decisions on how and, more importantly, why the site needs to be re-organized.

This section of the project corresponds to Chapter 3 and part of Chapter 4 of Web ReDesign, which we have in our course packet. Our assignment will incorporate many of the tools Goto and Colter advocate, and the text should be referenced throughout when considering what you should be doing at this stage. Many of the resources described in the book are available on the book’s web site, so please use them.

The Creative Brief
The Site Inventory and Analysis results in a formal Creative Brief. The Creative Brief presents all of your analytical work and an Executive Summary memo summarizing your findings. As such, it must be well written, using sentences, paragraphs, and proper formatting. It should be devoid of spelling and punctuation mistakes. It should be well organized, using headings and subheadings where necessary.

The Creative Brief will include the following sections:

A Critical and Semiotic Analysis of the current site and its desired and actual message
This section will consist of a full-page screenshot of the current site front page with call-outs that break down the semiotic concerns of the site. Use the Awesome Screenshot Plugin to create the full page screenshot and whatever visual editor you’d like to add the callouts. Using Canva is just fine for this part of the project. If so, choose the Poster option and save as PDF. See a sample version of the analysis (.pdf). You should have more call-outs than in the sample.

A Sitemap, which visually represents the current navigational structure and summarizes content
Use the free, browser-based sitemapping software Gloomaps. Your site maps should begin with the SJU homepage and include all links off the main landing page of the site. Be sure to differentiate between links that go to a different page with the SJU web space, links that jump down to another part of the same page (anchor links), and links that go to a page outside of the SJU web space. Two group-specific instructions:

COM Website: make sure you find how you navigate through these links, ending with the bottom one
https://www.sju.edu/departments/communicationstudies/degree-programs
https://www.sju.edu/degree-programs/communication-studies
https://academiccatalog.sju.edu/arts-sciences/communication-studies/#programstext
https://academiccatalog.sju.edu/arts-sciences/communication-studies/communication-studies-major/

Maguire Museum website:
Don’t map all of the links on the catalog pages; just note how many items there are on each

A detailed Comparison Analysis of other similar sites
Compose a comparison analysis of 3 similar websites, using full page screenshots places side-by-side with call-outs to highlight differences. Using Canva is just fine for this part of the project. If so, choose the Poster option and have multiple pages. Put all 3 comparisons in the same PDF document. See a sample version of the Comparison (.pdf). You should have more call-outs than in the sample.

A Client Survey
The Client Survey is where you interview the client and learn what they think of the site. The book suggests you should have the client answer the questions, but I prefer you do this in person. Choose 1 or 2 representatives to meet with the client. See the book and book’s web site for a sample client survey. We will discuss the book version and each group will adapt it to their needs.

Sample User Profiles
User Profiles are based on whom you and the client identify as primary users. See the book for a sample. Each group member should compose one User Profile. For more on user profiles, see “Personas Make Users Memorable.”

An Audit Methodology
The audit methodology is a fancy term for cataloguing everything on the current site. See the book for how to complete it and what should be included. See the book’s web site for a template.

Inclusive Design Analysis
The inclusive design analysis should determine how inclusive and accessible the site is, taking into consideration: ALT text, video captions, and color contrast. Please complete the following analyses in one document:

• ALT Text: The goal of ALT text is to provide a commensurate browsing experience for website users who have eyesight limitations or have images turned off. ALT text describes what an image looks like, not what an image is. It must describe in an accurate and somewhat descriptive way what the image looks like. I’d like you to make a list of all images, paste in the current ALT, determine if it is effective, and make any necessary revisions. I recommend using the Image ALT Text Viewer Chrome Extension.
• Color Contrast: Appropriate color contrast between website foreground and background colors is necessary for people with eyesight limitations. I’d like to note 5 – 7 color contrast pairings and determine if they pass all 4 accessibility requirements. I recommend using the Colour Contrast Checker Chrome Extension.
• Video Captions: Video captions are necessary for users with limitations to their hearing or those with the volume turned off. List all videos on the site and note whether or not they have captions.
• Descriptive Linking: Note all instances where links are not composed using descriptive language. Non-descriptive link examples are Here, Click Here, and Read More. For each, describe where on the page the link appears and compose more descriptive link text. Doing so may require rewriting part of a sentence.

A Usability Analysis
The usability analysis is based on usability testing of users of the site. Each group member will conduct THREE usability tests.

• Each test will be based on a predetermined task depending on the user profile of the person being tested.
• Of the three tests each group member runs, one task must be getting from the SJU home page to your client’s front page.
• The other two tasks will be from the client front page. The tasks must be informed by what the client said in their interview about the most important content on the page.
• The user profiles must be informed by what the client said in their interview about their primary, secondary, and tertiary users.
• Each group member should focus on a different user profile.
• Preferably 2 group members will focus on testing how complete tasks on a mobile device–phone and/or tablet.

Use the UPDATED usability test template I created for the class: Usability Template (.pdf)

Before you run the test, you should determine the fasted and most efficient way to complete each task you create and note them in a list of clicks and what opens after a click. When watching, note what they click, what they do after they click, and how long it takes. Note when they back up. Time the whole task.

Finalizing the analysis: Create a spreadsheet with the following columns:

• Task (organize the spreadsheet by task)
• User Profile
• Device (computer, tablet, or phone)
• Time to Complete
• Steps to Complete (enter the number of steps)
• Expectations (note whether it Meets, Exceeded, or Worse Than)
• Suggestions (note whether to keep, slightly redesign, or significantly redesign)
• Redesign Description (describe what needs to be changed and why)
• Tester (enter first name and last initial)

Creating the Executive Summary and Organizing all the Work

to be added

back to top

Site Redesign

To be added.

Individually Created Case Study

To be added.

Final Memo, Reflection, and Submission Info

to be added