GDS 46

Final Group Project

Final Group Project Instructions


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:


  • 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:


  • 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.

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 feel of 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.
  • Please, do NOT use any template web pages found on the internet as a starting point. You can use our exercises and code snippets as components, but not whole pages or designs.

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

  • Update: Show the site main page, any section main page and all other layouts/designs to be used. You probably want to show desktop and mobile versions for each page.
  • Can be done in any software you want. Figma would be good to use. You can use figma for wireframing, comps and/or prototypes.
  • Update: Here is a video Introduction to Figma for Wireframing - Duration 40:09 that can help with this step.
  • Wireframes 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 figma or invision (5 Points):
You will prototype the site using your comps and invision.

  • Update: Use your comps and link them together in a high fidelity prototype in figma or invision. It would be good to do 2 prototypes, one for desktop and one for mobile. In figma, you do this by having the prototypes on different "pages".
  • Check out this video on Basic Prototyping in Figma - Duration 25:33
    • You can use figma for wireframing, comps and/or prototypes if you want.

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
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
Recommended tools for the Final Project
  • Figma(recommended)
    • Could be used for wireframes, comps AND prototyping
  • 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 management(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