GDS 46

Final Group Project

Final Group Project Instructions


OBJECTIVE:

Create a business related web site as a group project. A business related web site is a site that generates revenue or significant savings in some way. You have a choice of three types of web sites:

OPTIONS FOR BUSINESS WEB SITE DESIGN:

  • Company: A comprehensive web site that describes the company's products or services. The Site could include helpful features such as FAQs (Frequently Asked Questions), job opportunities, online customer support, company mission statement, department profiles, current events, et cetera.
  • Online store: A web site that sells a line of products (at least five products). The merchandise should be presented in an organized and attractive way. Each product should be presented with a complete description and price. A simple order form must also be included.
  • Online Information Service: A web site that performs a service. Examples include movie review site, horoscopes site, and specialty newsletter.

To Do:

Expectations:

  • The web site must look professional, well organized, and stylistically consistent.
  • It is important that you use the time allotted for the assignment wisely.
  • Make sure that the design fits the content.
  • Think about your target audience and their expectations.
  • The size (number of pages) of the site is up to you, but the amount of work will be evaluated relative to the size of your team and the time allotted.

Procedures:
You will elect people from your group for the following positions:

  • Project Manager: In charge of the overall project
  • Art Director: In charge of the overall look and feelof the project
  • Head Programmer: In charge of the code
  • There should be a discussion in Canvas listing the team members. Please respond there to let me know who is filling the different roles on the team.

Wireframes (5 Points):
Develop detailed wireframes that show the layout and some text content for your site

  • Show the site main page, any section main page and all other layouts/designs to be used.
  • Can be done in any software you want. Figma would be good to use.
  • Should be done before comps are started.
  • Look at examples here.

Comps/Mock-ups (5 Points):
Develop comps that shows your intentions for your design

  • Show the site main page, any section main page and all other layouts/designs to be used.
  • Can be done in any software you want. Figma would be good to use again.
  • Should be done before html pages are started.
  • Look at examples from previous classes.
  • Be sure that you will be able to get the images for all concepts in your design.
  • Make sure to choose proper graphics, text and colors for the intended audience.
  • Comps should be in correct aspect ratio(shape) for the intended layout.
  • Comps should be of high enough quality to present to an actual client.

Prototype in invision (5 Points):
You will prototype the site using your comps and invision.

Design & Finesse: (Refer to point totals at top of page)

  • Communicate the message
  • Design fits the content
  • Proper optimization of images
  • Good composition of pages
  • Good color harmony
  • Good functionality/usability
  • Intuitive and functional navigation
  • Type should be legible, use appropriate fonts for the design
  • Final Presentation to the class

Beta Test:
You will conduct a test of your site to determine, among other things:

  1. How well it fulfills it's goals and communicates ideas.
  2. The quality of the design.
  3. The technical quality of the site.
  4. Here is a blank word file of the test form.
    • You can type into this version if you wish
  5. Here is a blank pdf of the test form.

Beta Test and Beta Test Paper:

Watch the video on the Testing procedure using the form. This is a companion paper to this project. There will be one paper per group which uses information from beta tests conducted by your group. Each member of the group will conduct 2 beta tests of the site. The paper's required elements below will be addressed in class and are covered in the Beta Test Paper help.

Get a copy of the Beta Test Paper help.

Topics should Include:

  1. Overview of the Product
  2. Description of the Beta Test
  3. Projected(Expected)Results
  4. Testing evaluation
  5. Test Results
  6. Planned Actions Consult BETA TEST PAPER HANDOUT for more details.

Expectations for Beta Test Paper:

This paper must be professional, typed (free of typos), and on time. To cover all of the required elements in reasonable depth, the paper will need to be at least 2 pages. This is in addition to any sketches. Excessive point size, margins, and line spacing are not elements of a good paper.

Project Description Video


User Testing Instructions Video


Point Breakdown

Project Grading Scale Possible
Development
Wireframes 5
Comps 5
Prototype 5
Subtotal Development 15
Design and Finesse
Functionality/Usability 5
Screen Layout 5
Color Selection/Use 5
Text Design/Typography 5
Use of Graphics/Optimization 5
Message Design/Clear Concept and Goals 5
Scope 5
Navigation Design 5
Overall Design 10
Subtotal Design 50
User Testing
Conduct 2 User tests per person 2x5=10
User Test Summary Paper 5
Subtotal Testing 15
TOTAL POINTS 80
Recommended tools for the Final Project
  • Invision
    • Good for testing and sharing prototypes
  • dropbox
    • Good for sharing large files
  • google docs
    • good for sharing text files and copy
  • monday
    • May be good for project managment(haven't tried this one)
Other Collaborative tools for Web Developers
Other Collaborative tools for Web Designers
User Testing tools for Web Designers and Developers