Project 1: Website Redesign

Project

• The Vera Project
• Seattle Audubon
• Lighthouse Mission
• Bellingham Sister City Association
• Cougar Mountain Zoo
• Women’s Refugee Commission
• Green Up Vermont
• Woodhull Freedom Foundation
• Pigs Peace Sanctuary
• Boise Public Library

• Nonprofit Brand Redesigns
• Cultural Brand Redesigns
• Charity Brand Redesigns

• Awwwards: NonProfit Websites
• Awwwards: Cultural Institutions
• Awwwards: Culture & Education Websites

• Civilization
• IDEO
• Polymode Studio
• Justin Kemerling
• Hyperakt
• Human After All
• Hello Monday
• Loop
• Frog Design

Percentage Breakdown

• 80% Website Redesign Prototype
• 20% Case Study

• Web Competitor Research | Example Find different websites relevant to the mission of your website. These sites are your competition. In order to attract your audience to your site, you need to know what you are up against. Compare and contrast the sites you found:
  • • What is your first impression / first impulse? Is the site organized and the navigation consistent? Is there enough or too much content? Is the content interesting/relevant? Does the appearance of the site connect with their product? What stands out, both good and bad? Take screen shots of relevant pages of these websites.
    •  
• Questionnaire | Download Fill out the above questionnaire to help you initially brainstorm and get to know your website better.
•  
• Content Outline | Example Complete an assessment of the homepage, a secondary page, and a tertiary page. Outline the content that you see – this can be anything from links, navigation, written headlines, and categories of info – to assets such as photos, videos, illustrations, or interactions.
•  
• User Persona | Example Collect user data through analytics of competitors and contextual research to create 3 user personas. Identify behavioral patterns, characteristics, biographical information, and include a photo representation.
•  
• Business/Brand/User Goals | Example Define the goals of the business, brand, and user. See how all three can impact the other.
•  
• Strategy Statement  Write your strategy statement for how you will improve upon the current site, differentiate your site from your competitors, and meet the needs of your users and client. What are the goals of the website? What is the beginning, middle, and end experience for your users?
•  
• Sitemap | Example | Example Create a site map to show how your content will be organized. Your content outline, competitive analysis, as well as an understanding of the customer’s needs will help you to separate content into distinct, organized, prioritized pages. You may also want to reference the original site-map when creating your own.
•  
• Moodboard  Collect images, colors, type, and any any other visual inspiration that represents the character of your organization. Compile them into a moodboard that you will use to inform your web design decisions.
•  
• Sketches Knowing what content goes on each page, create rough sketches to help with grid structure, hierarchy, and consistency. Develop multiple sketches for desktop and mobile layouts for homepage and secondary page.
•  
• Design Comps  After you have chosen sketches, flesh them out in Figma or Adobe XD, or Photoshop or Illustrator for now. Design three different variations demonstrating your website’s look-and-feel. Each variation must include designs for both desktop and mobile for the homepage to start out.
•  
• Design Refinements  Choose a style, refine, and design the final desktop and mobile layouts. Apply to secondary and tertiary pages.
•  
• Wireframes  Knowing what content goes on each page, create wireframes to help with grid structure, hierarchy, consistency, and coding (you are not coding this one however)
•  
• Prototype Your project grade is ultimately based on the final working prototype of your website and your process towards it. You will be making the website interactive in Figma, Adobe XD, or Invision.
•  
• Usability Testing | Example Test users on completing specific tasks and allowing them to freely explore the website. Create a results analysis and a plan for refinement. 
•  
• Case Study | Complete a case study that narrates your journey through decision making and learning insights. It provides rationale for your solution.

1.04: In Class: Project 1 Introduction
Due Next Class: competitive analysis, questionnaire, content list

1.06: In Class: go over competitive analysis, questionnaire results, content list
Due Next Class: user/brand/product goals, user personas, strategy statement, sitemap

*

1.11: In Class: look at goals, personas, strategy, sitemap
For Next Class: sketches (desktop + mobile for homepage and secondary page), moodboard

1.13: In Class: look at sketches, moodboard
For Next Class: 3 design comp variations (desktop + mobile)

*

1.18: In Class: look at design variations
Due Next Class: design refinements

1.20: In Class: look at design refinements
Due Next Class: further refine and apply design across other pages

*

1.25: In Class: work on other pages
Due Next Class: add interactivity to pages in InVision or other prototyping tool

1.27: In Class: conduct usability test
Due Next Class: make any necessary changes to website design, finish case study

*

2.1: In Class: Critique Project 1. 

1. Links to Final Prototypes (desktop + mobile):
   1. Home Page
   2. Secondary Page of your choice
   3. Tertiary Page of your choice
2. Case Study PDF:  You will be be writing a case study that addresses the following outline which helps to evaluate your solution to the design brief. Case studies narrate your journey through decision making and learning insights. Point out any surprising or counter-intuitive lessons from your process. Include any additional content and photos to support and explain your case study. Your case study will be in the form of an approx. 1,000 word PDF with plenty of images, process, etc.
   1. Background: A brief introduction of the project: the problem, the client you worked with, etc.
   2. Solution: What was your solution to the problem. This includes how you approached the problem, strategy statement, etc.
   3. Process: What steps did you take to reach the final product
      1. Research/Brainstorm – What kind of research did you conduct to immerse yourself in the project? Competitive research, inspirational research, user testing existing website, brainstorm questionnaire, gathering information. 
      2. Target Audience – Who is your target audience? How did you determine this?
      3. Concept Evolution – Why did you choose the concept that you did? What were the client, brand, and user goals? What were your priorities? What did the content inventory look like? What did your site-map look like? How did you improve the user flow?
      4. Visual Design – What were the design directions you explored? Show moodboard, sketches, wireframes, and preliminary visual design iterations and refinements. If you redesigned the brand, then you can share that as well. 
      5. Usability Testing –What did you learn during testing? Were there any patterns? What refinements did you implement?
   4. Outcome: What was the end result?
      1. Final Design – Clearly show final comps for both mobile and desktop. You may also include additional mockups. 
      2. Challenges – What were the challenges you had to overcome?
      3. Reflection – What did you learn from completing this project?
      4. Vision/Future Goals – Is there any room for growth with this product?