Nonprofit Responsive Redesign

1. Overview
2. Process Steps
3. Requirements
4. Deadlines
5. Grading Rubric

Overview

For your last project you will redesign the website for a nonprofit organization to make it fully responsive. You should pick a small local nonprofit organization that does not have a functioning responsive website. Your organization should already have a website as well as content and some graphics. Your goal will be to do a responsive overhaul of the website while still maintaining the current graphic identity of the organization.

The final website should be at least five full pages. Your organization likely has an existing website with more than five pages. You will conduct an audit of the current website to find out what types of pages already exist. Usually there are only a handful of page templates with many pages of each template type. In your redesign, attempt to redo five different template types.

Your website should be fully functional on a variety of screen sizes and devices. You should approach it with a mobile first methodology. You should also incorporate a progressive enhancement approach. What break points you use will depend on your site design. Your design should work from a small handset size (iPhone 5) to a large screen desktop size. You should ensure that your design also works on all points in between.

For your testing you should utilize you own phone as well as borrowing your friends phones for testing. This is the "cheap" way to do device testing. You should also make use of the web browser developer tools which also offer a variety of emulation modes. Keep in mind however that there is no substitute for testing on actual devices. You may also check out one of the iPads for testing.

Picking Your Nonprofit

Below is a list of Massachusetts nonprofits, grouped by type, to get you started.

• Massachusetts nonprofits

If you have a particular organization or similar in mind that is something else, email me for approval.

Process Steps

Website Audit

Conduct an audit of your organization's current website. The audit should outline the current state of the website and give you targets for what you will need to address in your redesign. It should include a site map, narrative, and interface inventory.

Narrative

Your narrative should outline the current state of the website and provide indications to functionality that needs to be addressed. Imagine that you have been hired as a consultant for the organization and it is your job to evaluate the site. This is your brief to present your findings. The narrative should be between 2-3 pages. In your narrative answer the following questions:

• What does the website do well?
• What does it not do well?
• Is there a clear navigation structure?
• Is there a coherent branding and overall design?
  • Show examples of the branding (where it works or where it breaks)
• Is the site responsive? If so, explain how. If not, how does it fail?
• Does the website include relevant content and graphics?

Site Map

As part of your audit, create a site map of the sites current structure.

Your site map should map out each page on the website and how they relate to one another. You may use whatever program you feel most comfortable with for the site map. It should address the following:

• Give a visual map of all pages in the website
• Give an idea of how pages are related to one another
• Give an idea of the navigation structure

Representing Page Types

If your site has many pages that are very similar then it is ok to represent them with a symbol showing multiple pages. An example of this might be a news section. We don't need to see every news item, just the idea of several news pages that are of the same type.

Review Communicating Design — Chapter 5: Site Maps for more information on Site Maps.

Interface Inventory

Create an inventory of the interface components on your site. This can be as simple as a Keynote or Word document. The goal is to create a categorized visual representation of all of the different user interface elements on a page.

For more information, see Conducting an Interface Inventory and Interface Inventory by Brad Frost.

Design Brief

Create a design brief explaining what you hope to accomplish in your responsive redesign. Your brief should answer the following questions (1-2 pages):

• What problems are you attempting to solve?
• What changes in the overall site do you plan to make?
• How will you modify the site structure or content?
• What pages will you provide design templates for?

If you plan to make any structural changes to the site, create a site map for those as well.

Style Tile

Create two style tiles for your design. The style tiles should be formally arranged in a document and ready to present to a client. The style tiles should be designed to evoke a conversation about different elements and ideas for the site design.

Read more about style tiles at styletil.es.

Concept Sketches

To start the actual design process of your site, you should create a series of rough concept sketches. These sketches should serve to generate ideas about how your site might look and function at various sizes. At this stage, you're simply trying out ideas.

Formal Sketches

Once you have generated several concept sketches, pick your favorite one and prepare formal sketches for at least three sizes of your website. These sketches should be neatly done and annotated.

Review the Sketch Examples page for more information.

Style Guide

Create a simplified style guide for your website. Style guides generally contain all of the user interface elements for a site. For your sites, we'll focus on a smaller set of components and styles.

• Colors (primary, secondary, highlight, etc)
• Typography
  • Headings
  • Paragraphs
  • Lists
• Link Styles
• Navigation Styles
• Search Components
• Buttons
• Icons
• Graphic Styles

For more information see week 13 notes. [Dane still needs to review notes: 4/4]

Mockup

Create a full mockup of each different type of page in your site. For this part, you should use Sketch and integrate the new prototyping tool to move between artboards. Depending on your comfort level, you may move quickly to working on an HTML and CSS prototype. If doing the prototype, focus on getting the big layout pieces working responsively. Leave finer details to complete later. How much time you spend on Sketch mockups vs. HTML and CSS depends on your own strengths and weaknesses. Focus on putting your best foot forward.

Be prepared to present your mockups at your scheduled meeting with me.

Final Site Requirements

• At least five pages (preferably of different page/template types)
• Responsive (working from iPhone 5 size to large desktop)
• Designed to be mobile first
• Working site navigation at all sizes
• Accessible content and text
• Valid HTML
• All images must have alt tags

Deadlines

Grading Rubric

Rubric Summary

Rubric Detail