P02: Non-profit website makeover

View Project 2 Intro Screencast

Due Dates:
– 3/25: Phase 1 Deliverables are due
– 4/6: Phase 2 Deliverables are due
– 4/15: Phase 3 Work in progress
– 5/6: Project Critique
– 5/12: Project 2 due: Submit project to the Project 2 BOX folder and add your website URL to the Project #2 Slack channel

Overview

Teams of three to four students will research and discover the website of a local non-profit organizations and proceed to design and develop a new or improved web presence.

Teams will be assembled so that each is composed of individuals with strengths in visual design, copywriting, and coding, though all team members will be expected to work on all tasks to some degree.

The project will proceed through the first three phases of the Web Design process: Discovery, Design and Development. Teams will provide the below described deliverables at the end of each phase. Each phase feeds into the next: 1. “Discover” all you can about your client and their messaging; 2. “Design” strategies for information architecture and visual thinking based on findings from the Discovery phase; then 3. “Develop” those ideas into a custom WordPress site. (Note that Phase 4: Deployment is beyond the scope of this project.)

Teams will meet with the instructor several times throughout the project at the end of each deliverable phase. Other communications will occur as needed.

Teams may optionally choose to contact representatives from the organizations to gain additional insights and strategies.

Requirements

  • Develop a site by custom-building a WordPress theme (custom or child-theme).
    • All links must be functional, though some may lead to placeholder pages.
    • There must be no missing or broken images.
    • Images must be optimized for the Web — properly scaled and compressed.
    • Your theme should contain at minimum:
      • header.php
      • index.php
      • footer.php
      • style.css
      • functions.php
      • screenshot.png (1200px wide by 900px tall)
    • The Loop must be used to show dynamic content.
    • Custom Dynamic Menus must be used for navigation.
    • Content that is static and used on multiple pages, such as nav bars, header and footer images and text, should be coded into the appropriate theme files.
    • Dynamic content, such as individual page material, images and galleries, and other content which is different from page to page, should be entered through the WordPress dashboard and displayed by using the loop.
    • Social interactive features, like commerce, donation links and so on do not need to be functional. Placeholder buttons of images can be used.
    • Each top level page should have all intended content (text and images) and be properly styled and formatted.
      • Sublevel pages need not have final content, but should be present in the navigation system and site map.
  • Use typography principles in a thoughtful and appropriate manner. Use of Google Fonts is strongly encouraged.
  • Refer to Exercises 1–4 for technical guidance, and any other resources necessary.
  • In addition to technical construction and WordPress functionality, consideration should be given to overall design quality. Typography, graphic treatments, and information organization will be evaluated as part of your grade.
  • Responsive: Design must respond well at all screen sizes using both fluid (percentage-based) widths and media queries/breakpoints.

Deliverables

The below deliverables will be presented at the end of each phase. Documents should be neatly and professionally prepared and presented. A single PDF combining the deliverables for each phase is preferred for deliverables consultations, but required for the final deliverables package. Illustrator, Infinity Designer, OmniGraffle and other tools can be used to generate site maps, wireframes, and style guides.

At the completion of Phase 3, deliverables from each prior phases will be included in the final package. Improvements to prior phase findings and evolution of ideas can be documented and explained.

Each team member is responsible for tracking hours in the team timesheets, found in the class Box folder, under each team folder (Please edit your timesheets through the Box website opening in Excel Online (UB Credentials needed to long to Office) or Excel on your desktop (installation of Box Edit is required).

1. Discovery Phase Deliverables

  • Client Identification Statement: Describe in a couple paragraphs or bullet points:
    1. Who is your client? What are their distinguishing features?
    2. Why do they have a website, and what are they trying to achieve?
    3. Who are the expected visitors to their site, and what questions will they have when they come to the site? (You are encouraged to develop two or more personas to assist with asking and answering these questions.)
    4. How will you answer those questions, using improved information architecture and visual design
  • Content Analysis: Summarized inventory of existing site content, media, brand elements…
  • Site Map: Demonstrates how you will approach information architecture, showing how content will be reorganized across pages throughout the site.
  • Strategy Statement: In response to the discovery items listed above, present a list of proposed technical guidelines to move the project forward with specific recommendations for improvements, ultimately amplifying your clients message:
    • responsiveness
    • mobile experience
    • social media
  • For guidance in creating a great strategy guide, see “Crafting Product-Specific Design Principles to Support Better Decision Making” from the Nielsen-Norman Group.

2. Design Phase Deliverables

  • Wireframes/UX Sketches: demonstration of the design framework.
  • Page Tables: final site text content, presented without unformatted. Only gather text that will be used on your completed pages.
  • Style Guide: documentation of the design thinking, including visuals (branding and color), typography, and other relevant style guidelines.
  • Interaction Design: Optionally, some designers may wish to bring their design thinking into the beginnings of an HTML prototype, demonstrating visual treatments, basic page functions, navigation, and changes to the design at differing screen sizes. (Overlaps with Develop Phase.)

3. Develop Phase Deliverables

  • Converting HTML/CSS to an active and functional WordPress Theme following tech guidelines above.
  • A sufficient number of finished and functional pages should be presented at the end of this phase to convey the main goals of the redesign.
    • You may use placeholder/empty pages or boilerplate content, with appropriate menu nav links, as necessary.
  • Upload Theme Folder containing the site’s php files,  CSS and screenshot.png. Clearly label folder with Team Number and client name.

4. Final Deliverables

  • Final Site—Working WordPress site containing all requirements as listed above.
  • Theme folder, including all php template pages, css and images.
  • Final Project Guide—a single, well organized and designed PDF, 8.5×11″ pages. Graphics should be of a legible size. Type style and colors should pair with your site design.

    The Project Guide summarizes the design process and guides future content creation and social media integration. It must include:
    1. Title page should include the name of the client organization, old and new web URL’s, and the name of each team member.
    2. Major findings from the Discovery Phase and how those led to your design solution (design thinking).
    3. Site map and representative wireframes demonstrating chosen information architecture.
    4. Finalized style guide, including color palette, typography samples, and examples of other visual treatments.
    5. Screenshots of major pages of the new site at representative desktop, tablet and phone sizes to demonstrate responsiveness and usability.
      Also include representative screenshots of the organization’s current website for comparison.
    6. Training to assist client with maintaining and updating site. For this project, only a brief summary of instructions is needed, explaining how a client (who will have no knowledge of HTML/CSS will maintain the site and add/edit content.
      • Login;
      • Create and edit pages;
      • Create and edit posts if used and how a post differs from a page;
      • Style and formatting options;
      • How and when to add media
  • To ensure professional presentations, all final deliverables should be proofread and edited for spelling and grammar.

Final PDF Deliverable—Student Examples

Below are examples of professionally presented final project guides. Reviewing each guide should give you a clear picture of why the team chose their client, what they discovered about the client, and how the proceeded through each phase of the project. In the mist successful examples, the PDF are professionally prepared and neatly designed, often reflecting the identity style of their improved site designs.

Process

  • Each team member will maintain a rough time log of project related activity so that each member can contribute an equitable amount of work. A time log will also reveal a realistic amount of time to complete each phase, and, in the commercial world, provide justification for billable hours.
    • Time Sheets are accessible through buffalo.box.com. A link will be provided. The Box Edit app is required to edit the document.
  • Deliverables will be collected at the completion of each phase, and then included as part of the Final Project Guide.
  • Grades will be assigned to each student based on overall project results and on individual contributions.

Work-In-Progress Critique Guidelines

  • WordPress Site will be displayed from Pantheon. Upload your site URL to the designated thread in the class Slack channel.
  • Design fundamentals must be in place – layout, color, typography, other visual treatments.
  • Responsiveness does not need to be fully tweaked at this point.
  • All Pages should be present in the menu, but do not need to be populated. Only two or so pages might need to be populated to demonstrate site functionality.
  • Be prepared to describe your client and your Phase 1 findings, how that guided wireframe and AI development, and ultimately the design solution.

Final Grade Considerations

Time Sheets

  • Evenly Distributed Workload
  • Adequate Time Investment

Professional Conduct

  • Well prepared for each consultation meeting
  • Present and on time
  • Clean and organized presentation materials
  • Each team member contributes to the meeting

New Site

  • All requirements as listed above.
  • Information architecture/navigability
  • Visual design
  • Responsive
  • Technical performance
  • Upload complete theme folder to Pantheon Server and class Box folder, including no unnecessary files

Final Project Guide

  • Professional presentation
  • Proofread—no typos, correct spelling & grammar
  • Visual design: Clean, well organized, consistent typography, legible graphics, screenshots
  • Each phase is presented—discovery, design, develop
  • Training summary

Teams

Spring 2021 — Witkowski

Team 1
Matt
Genevieve
Sungho
Nofel

Team 2
Angelica
Yilin
Michael
Shannon
Nolan

Team 3
Phillip
Emmie
Zichang
Tyler

Team 4
Jessica
Declan
Taha