CS185 HW Assignment 5:

Interactive Web Page Design

Posted: Thursday, May 2nd
Due: Friday, May 10th, 23:59:59

Change Log:
Added requirement for "Usage Scenario" in Prototyping Section

Goal

The design goal is some sort of information gain for some sort of audience, with the overall theme of environmental science.

Your learning objectives are:

• to use a Scenario-Based Design approach to designing an information resource (whose content you can make up or grab from existing sources, which you need to, of course, acknowledge).
• to practice Prototyping of a design solution.
• to practice implementation of interactive web pages with the following technical elements:
  • incorporation and control of a Google Maps component
  • responsive web design (RWD)
  • website navigation

Breakdown of Deliverables

The assignment consists of three parts: A design portion, a protoyping portion, and an implementation portion

• Part 1: Ideation and Initial Design Process (30%) - Come up with an idea for an informational web site supporting environmental science and/or field work, including
• a User Analysis, identifying your end user
• a Task Analysis, identifying what the web page will enable
• a Problem Scenario, guiding your design process
  
  
• Part 2: Design Prototyping (30%) - Create a low- or medium-fidelity prototype of the web site that you envision for your product idea.
  
  
• Part 3: Implementation (40%) - Create a web site that implements aspects of your design and that incorporates the following elements: a customized Google Maps component, Responsive Web Design behavior, and planned website navigation
  

 

Part 1: Ideation and Initial Design Process

The following three elements are reqired deliverables to be documented with your submission:

• A User Analysis with a Stakeholder Map, identifying your end user (who do I design, create this for?).
• A Task Analysis (what should my target audience get out of this web page?) 
• A joint Design/Problem Scenario according to the Scenario-Based Design approach

To arrive at a concrete idea for your product (your interactive environmental field science web site), please also look at the following creative design methodologies (we hope you will get inspired by these methods and use them, but you don't need to submit evidence of using any of these. If you let us know in your README file if you used any of these techniques, you'd make us happy :)):

Understanding Existing Solutions:

• Competitive Testing
• The Love Letter & the Breakup Letter
• Triading

Conceptualizing:

• AEIOU
• Brainstorm Graphic Organizers
• Business Origami
• Card Sorting
• Content Inventory & Audit
• Collage and Image Boards
• Concept Mapping
• Mind Mapping
• Territory Maps
• Word Clouds 
  

Part 2: Prototyping

Create a low- or medium-fidelity prototype of the web site that you envision for your product idea. Use a prototyping tool of your choice (we recommend the freely available Adobe XD) or/and paper and pencil to mock up the look and feel of your planned web site. This prototype should help you drive your implementation and should be easy and flexible to update and re-assess when you make changes because of insights from your Usage Scenario (see below), or because of intermediate evaluations or unforeseen circumstances. Document such iterations in your README file.

Drive your prototype via a "Usage Scenario" (a combination of the "Activity Scenario", "Information Scenario", and "Interaction Scenario" from the Scenario-Based Design chapter. This should be a narrative (story) that uses the same overall context (protagonist and setting) as your problem scenario from Part 1, but now focuses on how that person utilizes your planned web page resource for practical information gain (how does that person solve one of their problems by using your web site).

Part 3: Implementation

Your implementation should provide sufficient content and fuctionality to communicate the idea from your design, but the only firm requirements are regarding the following three aspects: 

1. Incorporate a Map component: Using a mapping API of your choice (Google Maps, OpenStreetMaps, Bing Maps, Here Maps, etc... but we will only have time to cover and give advice on Google Maps in Discussion), implement 2 out of the following options:        
   • Styling a Map
   • Interacting with a Map
   • Drawing on the Map
   • Displaying Data

   You can make up your own data (for annotations, heat maps, etc.), or use any available data (which doesn't necessarily need to match the area you are choosing).

2. Navigation among a set of pages 
   • You will have to implement at least (but are not limited to) three different 'pages' of content, meaning that there should be at least three distinct content areas that the user can navigate to (these don't have to be different html files). The currently selected 'page' should be highlighted by your navigation interface.
   • The content on your three or more pages should be meaningful in a general sense, but don't have to reflect accurate environmental science and concepts, and can contain placeholders or scraped text and images from outside sources (which you need to acknowledge, of course).
     
     
3. Responsive Web Design
   • Your web page should use RWD principles to scale appropriately to different screen sizes. If you don't have access to a mobile device to test on, simply change the Chrome browser width for testing.

Your implementation should be linked to your prototyped functionality and follow good design principles and guidelines.

Submission

Please zip and submit the following items to Gauchospace:

• Documents for Part 1 (Ideation and Analysis)
• Documents for Part 2 (Prototyping)
• Part 3 (Implementation): index.html, style.css, script.js implementation of your design. Multiple html pages are  encouraged but not required.
• Readme.txt containing your design decisions, external resources used, challenges and critique of your homework.

Note that all testing and grading of your homework will be conducted on the latest version of the Chrome browser. Please make sure to test your submitted zip file (unpack it into a fresh folder and test it to see if it works as submitted). It is your responsibility to make sure the submitted code works.