#ids26 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 Communication and Media Studies website
• the Barnes Arboretum website
• the Francis M. Maguire Museum website

The groups are:

Students will have 1 – 3 meetings with representatives of their respective websites and the representatives will be invited to attend class when presentations are made.

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 may work on several deliverables at the same time (in fact you will probably need to), perhaps by dividing deliverables among the team members. There are multiple tasks associated with each stage.

The redesign will include computer and mobile (tablet and phone) versions of the site. Students will use Adobe products (Photoshop and Illustrator or InDesign, which everyone in the class now has access to) 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 has been 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 is only available to Bill and members of your group.

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: COM, Barnes, or Museum Website Redesign <– choose which site is appropriate
Dear Dr. Lyons, Dr. Springer, or Ms. Bracy, <– 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 assiged 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: Coordinate with the other group so you are sending only one email to Dr. Lyons. 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, to be completed by Monday, 3/30

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 material is 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 I 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 Site Inventory and Analysis results in a formal Creative Brief. The Creative Brief is what Tufte would call an “evidence presentation” and a kind of technical report. Like all evidence presentations, the Creative Brief “is a moral act as well as an intellectual activity” (Tufte, p. 9). 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. Any images within it should be placed intentionally and not just plopped at the end. If you have taken any document design classes, you should consider using InDesign to create the Creative Brief (but don’t try to teach yourself InDesign for this project). At the end, include a statement of who completed what portions of the work.

The Creative Brief will include the following sections:

A Critical and Semiotic Analysis of the current site and its desired and actual message
For this section of the Creative Brief, please compose 3/4 page single space of written content in which you analyze what message(s) the site is giving and who the intended and actual audience(s) are as a result. You should take into consideration the layout, the written content, the visuals, and how one navigates to the site from the SJU homepage. Use screenshots to help illuminate your analysis. The screenshots will result in this being longer than 3/4 page, as they are in addition to the written content.

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 screenshots to support your analysis. Written content should be 200-250 words per site. That is a hard limit.

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.

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.

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 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 document in which you describe the results of each test organized by user profile, task, and platform (computer, tablet, or phone)

Creating the Executive Summary and Organizing all the Work

All of the work you have produced for the Creative Brief is too much for the client to take in all at once. To make it more manageable, we create an Executive Summary, the goal of which is to provide a summary of your findings for each stage of your analysis, short recommendations based on each stage, and plans for next steps. Once they read the summary, they can delve deeper by looking at the full analyses.

I have placed in each of your group folders an Executive Summary template.

Each section should have no more than 5 concise sentences and no more than 3 recommendations. Most will have at least 1 recommendation, though the Client Meeting may have zero (so remove that part).

For 02. Current Sitemap Analysis, include a link to the sitemap below your summary and before recommendations.

You will notice how I labelled the headings in document with numbers, such as:

01. Critical and Semiotic Analysis of the Current Site
02. Current Sitemap Analysis

That structure is to align the headings in the Executive Summary with your files. So, please create or rename files with the exact names as in the Executive Summary. The number structure will ensure the files appear in the proper order so they are east to find.

OR, if you have a document structured with tabs, name the tabs so they are the same as in the Executive Summary. Remove anything from that document (such as schedules and other notes) that are not part of the Creative Brief.

Place all your files, including the Executive Summary, in a new folder named Creative Brief. We will eventually share that with the client.

back to top

Site Redesign

The site redesign is where you move from the analysis to the new design. This process works best when you have a definitive plan based on the recommendations written about in your Creative Brief Executive Summary, the results of your comparison analysis, and the results of your usability analyses. All design, layout, and navigation decisions must be consistent with these results and the emotional design characteristics you want your site to have.

The most difficult parts of this phase of the redesign are maintaining focus and not getting ahead of yourselves. Each step is vital and must be completed before moving to the next. Everyone completing each step must have a unified and singular vision of what the new site is going to look like. There is no winging it here. Each element must be planned and then implemented.

Even though each of you will be completing unique parts of the redesign, it must feel like one person completed them all. They must have the same navigation.

They must all have the same pixel width: 1440px for computer, 768px for tablet portrait view or 1024px for landscape; 360px for phone portrait view (do not do landscape). The height will depend on the content.

By the end of this phase, you will have the following completed:

• A new Sitemap, which visually represents the new navigational structure
  • The site map should begin at the SJU homepage and then include the whole of the redesigned site. If you use anchor links (links that jump from the to of the page to a lower part of the page) be sure to indicate that in some way on the sitemap. Use Gloomaps.
  • Your group should begin new sitemap at the start of this process, but know that it will change over time based one what happens with your design visuals. And changes to it must be represented in the final mockup navigation. The final is due
• A Style Guide that demonstrates and explains the reasons for color, typeface, and other style choices
• User Scenarios for how certain users might navigate the site
• Pencil on Paper Sketches of what the new site will look like on computer and tablet or phone screens
  • These should represent the whole page, not just what is above the fold.
  • Due by start of class on Friday, April 17
• Basic Wireframes of what the new site will look like on computer and tablet or phone screens
  • These should represent the whole page, not just what is above the fold.
  • Due by start of class Wednesday, April 22
• Robust Wireframes of what the new site will look like on computer, tablet, and phone screens
• Final Site Mockups of what the new site will actually look like on computer and tablet or phone screens
  • These should represent the whole page, not just what is above the fold.
  • Mockups are exacting and should look like they were created by one person using the same decisions for font, sizing, spacing, letter spacing, margins between elements throughout all pages. Here are some of the current website standards:
    • computer header font: 48px Archivo Narrow, all caps
    • phone header font: 28px Archivo Narrow, all caps
    • computer subheader directly under main heading font: 36px Archivo Narrow, all caps
    • computer subheader font: 36px Archivo Narrow, all caps
    • phone subheader font: Archivo Narrow, all caps
    • largest heading font computer and phone: 60px Archivo Narrow
    • computer body font: 18px Roboto
    • phone body font: 22.4px Georgia
    • computer red pulldown menu font: 20px Roboto
    • computer caption font: 14px Roboto
    • phone caption font: 12px Roboto
    • to find other fonts, in Chrome go to View –> Developer –> Inspector
  • So as to help ensure consistency across the mockups, I strongly recommend creating templates for areas that are used across pages, such as header and footer templates:
    • main computer red SJU header (.png), which has a height of 70px
    • main phone red Barnes Header (.png), which has a height of 50px
    • main phone red Museum Header (.png), which has a height of 50px
    • main phone red COM Header (.png), which has a height of 50px
    • the site navigation (if you choose to keep the current style, which has a height of 82.8px)
    • main computer gray footer, which has a height of 414px (COM version.png) or 470px (Barnes version.png, Maguire version.png)
    • the red contact or donate bar above the footer (if you decide to keep that) which has a height of 140px
    • make sure all fonts, font sizes for each designation (header, sub-headers, body text, caption) are exactly the same across all mockups
      Fully completed drafts are due by start of class on Monday, April 27

Each group member will be responsible for redesigning one page of the new site, which includes:

• pencil on paper sketches of the computer and tablet or phone designs for that page
• basic wireframes for the computer and tablet or phone designs for that page
• final mockups for the computer and tablet or phone designs for that page

Each group should assign 2 students to the front page. Those students will conceive of two very different versions of that front page (including sketches, wireframes, and mockups) so as to show the client that there are options.

COM Groups: One student in each group must be dedicated to redesigning the course/curriculum page. And each group should be sure to focus on simplifying the number of clicks to get to that information.

Getting started
To get started, begin with three lists:

These lists should be long, robust, and each item include a very short rational for why. These must be informed by your Creative Brief analyses and recommendations.

All font and color decisions must be consistent with the SJU Design Standards and Style Guide. All sites must have the traditional red SJU header and gray footer. The rest of the layout is up to you.

To complete the wireframes and mockups, use Photoshop or Figma, whatever everyone in the group has used before.

Final Memo, Reflection, and Submission Info

Though the project is collaborative, each group member will have individual responsibilities and required items. If those items are not completed, they will only negatively impact the individual’s grade. All students will compose a reflective statement in which with they will describe and present evidence to support all claims they make about what they contributed to the project.

Grading Breakdowns

The grade breakdowns are:

• individual contributions to the group (20%)
• quality of individual work (50%)
• quality of the group work (30%)

Each group will be graded based on the following criteria:

• how well the new site reflects the personality trait characteristics as chosen by the group
• how well the new site addresses the major concerns as stated in the Creative Brief
• how well the new site addresses the major recommendations as stated in the Executive Summary

Each in the above list will be discussed in a Final Redesign Memo addressed to the client and placed in the group’s GoogleDrive folder. This will serve as the group’s reflection on the work they have completed throughout the semester.

Final Submission Requirements and Locations

The following instructions, folder names, and file names must be followed exactly as written. If they are not, deductions will be taken from both group and individual grades.

In your group Google Drive folder, I have created a new folder called “Final Redesign Deliverables.” I have already provided your clients with permission to view this folder, but when you create the new folders make sure they have permission, as well.

In the Final Redesign Deliverables folder, move to or add the following:

• the Creative Brief folder (and all that was previously in it)
• a Redesign Work folder, which has within it
  • Final Redesign Memo file
  • Final Sitemap file
  • a Sketches folder, which has all the sketches named
    • page-name-computer-sketch-initials.png
    • page-name-phone-sketch-initials.png
  • a Wireframes folder, which has all the sketches named
    • page-name-computer-wireframe-initials.png
    • page-name-phone-wireframe-initials.png
  • a Final Mockups folder, which has all the sketches named
    • page-name-computer-mockup-initials.png
    • page-name-phone-mockup-initials.png

Replace the word “initials” with your initials, such as page-name-computer-mockup-bw.png.

All files must be EXPORTED/SAVED from whatever software you are using as .png. They CANNOT be screenshots, as the resolution is terrible.

Delivering the final work to the client

Whomever has been the contact person with the client, will compose and send an email to the client sharing all your work. Be sure to CC all group members and Bill.

Here is a sample email:

Subject: COM, Barnes, or Museum Website Completed Redesign materials <– choose which site is appropriate
Dear Dr. Lyons, Dr. Springer, or Ms. Bracy, <– choose which site is appropriate

On behalf of my group members, [add all group members names but your own], I am pleased to share with you the work we have completed this semester toward a redesign of the [add] website.

Thank you for the opportunity to collaborate with you on this process.

The work ranges from extensive research and analysis to multiple stages of redesign, resulting in a series of mockups. You can find all we have completed in a Final Redesign Deliverables folder at:

[add link to folder]

In that folder, you will find a folder called “Creative Brief,” which contains all of our research and an Executive Summary detailing findings and recommendations. You will also find a folder called “Final Redesign Work,” which contains a Final Redesign Memo, redesigned sitemap, and folders containing pencil sketches, wireframes, and the final mockups. We have made two mockups of the homepage and of several inner pages–for both computer and phone screens.

Thank you, again, for the opportunity to work with and on your site. If you have any questions, please don’t hesitate to send them.

Sincerely,
Your name

Due Dates
Sat, May 2 by 11:00pm: Final Group and Individual Work Completed, named correctly, and added to correct folders
Sun, May 3 by 11:00pm: Final Engagement and Presence / Final Reflections
Mon, May 4 by noon: Send email to the client (be sure to CC Bill)

back to top