Names: Catherine Puga and Hannah Lindow
Date: 3/18/2016
Name of Client: Wellesley Students for Hillary
Client Contact Person: Hannah Lindow

Design for Wellesley Students for Hillary

Purpose, Goals, and Audience

We aim to create a website centered on expanding the fundraising capabilities for Wellesley Students for Hillary by providing a space to sell and share information about merchandise and involvement. Our goal is to expand the fundraising capabilities of the organization and to better enable community involvement in the political campaign. The primary audience will be members of the Wellesley College community. The hope is that the sweatshirt sales website can help link alumnae and students with the organization and vice versa. The secondary audience will be general community members who wish to support Wellesley Students for Hillary and get involved in the campaign.

Navigation Structure

We will be using a clique structure for the website. The user will be able to get to every page of the website regardless of their current page. This will be done through the presence of a navbar that will be present on every page. The home page will be linked to the navbar as well as on the logo image that will be present on every page. We chose a clique structure to allow ease of movement between all the webpages and to emphasize the different options and ways to support the organization.

Page Layout and Appearance

The client wanted a simplistic and modern design that would allow the merchandise to shine and be the main focus on the page. The main focus is on the nav bar, which will be present on all pages, regardless of where they are on the website. The logo, "women who will, shirts to run the world in" will also be displayed on every page to constantly keep the user reminded of the merchandise and fundraising aspect of the site.
general layout
The specific styling for the website that will apply to all the pages:

Content

There will be 6 webpages
  1. Home

    The homepage will be the first page to load. It will have a Javascript slideshow that will display photos of members wearing the merchandise and working for the organization. Each image will have a height of 215px and be centered on the page. This page is designed to be a visual introduction to the website and make the user want to learn more about the organization and purchase merchandise. home

  2. Shop

    The shop page will allow the user to easily purchase shirts from the organization, fulfilling the main goal of the site. It will have a Javascript form that will use Ajax to send the order information to the organization. The web page will have 2 images on the page: one of the front of the shirt and one of the back of the shirt. The images have an upper padding of 40px between them and the heading of the page. Each image will have a height of 185px and will be aligned to the left of the page. There will be captions explaining more about the make and fit of the shirts using "Lato Hairline" 11pt. in black (from Google Fonts). There will be a space of 15 px between the two images. The Javascript form will use the font "Lato Black" 13 pt. in black (from Google Fonts). shop

  3. About

    The about page will include basic information about Wellesley Students for Hillary and the greater Hillary for America organization along with information about the merchandise. The about page will fulfill the goal of informing the user about the organization that they are supporting by purchasing shirts. about

  4. Get Involved

    The get involved page will include information on how community members can get involved with Wellesley Students for Hillary or the greater Hillary for America organization, including information on upcoming events hosted by the organization. The page will prominently display a Javascript countdown to Election Day to remind the user of the main goal of the organization. This page will also include the option of having members of the organization write about their experiences campaigning in order to encourage others to do the same. This page will fulfill the goals of easily involving community members with the campaign beyond purchasing merchandise and of linking different members of the Wellesley community. involved

  5. In the Press

    Due to the connection between Wellesley and Hillary, Wellesley Students for Hillary has been featured throughout the campaign season in various news outlets. This page will feature links to the different interviews done by the organization along with descriptions of the interviews. There will be an image on the page featuring the most recent press done by the organization. This image will be aligned to the left and will have a height of 205px. This page will fulfill the goal of emphasizing the importance of the organization and the campaign and creating interest in purchasing merchandise. press

  6. Contact Us

    This page will include information on how community members can contact the Wellesley Students for Hillary organization in case they need more information or there is an issue with their merchandising order. This page will help fulfill the goal of allowing users to easily purchase merchandise and to work with the organization. involved

  7. Share Drop Down

    The Share drop down menu is not a separate web page, but is very important to the function of the site. One of the main needs of the client is the ability to easily share the site on forms of social media in order to increase the visibility of the organization and its merchandise. The drop down menu will be on the nav bar and will be available on every webpage. When the user rolls over the share button, a drop down menu will appear that will include share buttons for Facebook, Twitter, and Pinterest. There will also be an email button. The code for these buttons will come from the developer sections of these sites. The e-mail button will open the native mail application on the user's device and will be coded as part of the Javascript. sharemenu

Minimum Requirements

The Javascript requirements will be met by:

Hannah Lindow
  1. Image carousel on the homepage that will randomly display photos of organization members wearing the sweatshirts and engaging in campaign efforts in order to advertise the merchandise
  2. An e-mail form using Ajax on the order.html page that the user will fill out with the number of sweatshirts desired, sizing information, shipping information, and links to Paypal or information on how to Venmo the money to the organization. The form will e-mail an address set up by the organization

Catherine Puga
  1. Counting down to a calendar event on the aboutus.html page. The count down will be for November 8, 2016 (Election Day!) to keep the user reminded of the organization's ultimate purpose
  2. Drop down list when the user rolls over "Share" on the nav bar. This list will embed code from the major social media sites like Facebook, Pinterest, and Twitter, along with an e-mail option so that when the user clicks on one of the links, they are able to directly share the site on social media. If they select the e-mail option, the native mail app on their device will open. This will allow users to easily share and spread the website and merchandising.

Plan

We will be following this organizational structure to create and store our files

Work Division and Deadlines

Filename Description Person in Charge Deadline
home.html The homepage Hannah April 12
about.html Information about the org and its mission Hannah April 12
shop.html View and purchase org merchandise Hannah April 12
involved.html Information on how different community members can get involved Catherine April 12
press.html Links to different press and articles written about the org Catherine April 12
contact.html Information on how to contact the organization Catherine April 12
header.png Logo for the site's header designed on Photoshop Hannah April 12
countdown.js A Javascript feature to countdown to Election Day Catherine April 19
slideshow.js A Javascript feature to display images of the merchandise Hannah April 19
dropdown.js A Javascript feature for a roll-over menu to share the site Catherine April 19
orderform.js A Javascript feature that allows a user to order merchandise Hannah April 19
styling.css The stylesheet for the website Both April 22

Valid HTML 5

Valid CSS