Overview

Design Process

Project Context

Designing for Clients

For this final projects of the course, my team and I were tasked with developing a website prototype for a student organization at Cornell. We decided on making this site for the organization, Les Femme de Substance. This is a pre-professional organization for women of color that encourages others to pursue leadership roles, develop their professional skills, and foster a sense of community.

As a result the design of the website should showcase these qualities of the organization. It would be informative for potential members and communicate any future events to the public. Some of their key goals are promoting leadership and unity, uplift other women, and create unity to combat the issues facing women of color.

1.Project Definition

During this stage of the design process, my team and I defined the parameters of this project. We organized a meeting with the vice president of the organization to outline what should be incorporated into the website.

Target Audience(s): 

Other professional organizations, external companies looking to partner up with Les Femmes, as well as other women seeking to get involved in the professional world.

Purpose & Content

Purpose of site is to inform others about the organization as a whole, their mission, and events they hold throughout the year. Client also wants to attract prospective members to join and become involved in events. Client would like to make the website more interactive.

Needs and Wants

1. Client wants to appeal to black women and women in general

2. Wants to come off as a professional organization

3. To be more recognizable

4. Appeal to companies for prospective partnerships

5. Attract more people

6. Low-maintenance website

7. Design Ideas and Choices

8. Include many images of club members

9. Prominent use of club color: purple

10. Clean fonts and simple design to appear more professional

11. Include company logos of companies they have partnered with

12. Presidents page, with a profile picture and a letter from the president

13. Prominent displays of logo

14. Social media links to club twitter/Facebook and member LinkedIns

Interactivity

1. Contact information form

2. Client wants to attract more people, who will likely need a medium to contact the club through

3. adds to listserv

4. Log in Form form Admins

5. Allows admins to change information on pages

6. Allows images to be added to any image galleries

7. Live social media updates

8. Keeps the site personable and allows the target audience to remain updated on club happenings.

Scale

The website will have 6 pages: Home, Mission, Events, Network, Donation/ get Involved & Board members page

PHP Interactivity

Login form - The login form will be for the president and vice president of the organization and will provided

Administrative privileges - This will allow them to access to log in and edit content on the website. If we end up not using the live mailing functionality for the website, one the president and vice president logs in they will receive a notice that someone has submitted a donation request and will allow them to retrieve that individuals information (Otherwise if we do implement the mailing then this information is sent directly to their emails) an individual submitted a donation request

Join Listserv - User can submit a form that will allow them to be added to the listserv database that the president can utilize to send out emails for upcoming events.

2. Design

Sketches, Navigation & Wireframes

PHP Interactivity

Design Evaluation

Tasks
Task 1: Read the information about the organization's president
1. Go to organization's website and click "Board Members" link on the navigation menu bar.
2. User gets directed to "Board Members" page
3. User scrolls down to President's Message section
Task 2: User is looking to subscribe to the email listserv
1. Go to organization's website and click "Donate/Get Involved" link on the navigation menu bar.
2. User gets directed to "Donate/Get Involved" page and scrolls down to form about signing up for the list serve.
3. Fill out all fields of the form and click the submit button
4. Message appears on the screen alerting the user that he/she has successfully submitted information.
Task 3: User wants to know more about the "Women of Substance Retreat"
1. Go to organization's website and hover mouse over "Events" link on the navigation menu bar.
2. Drop down menu appears and click on "Les Femmes Women's Retreat" option.
3. User gets redirected to part of "Events" page that is only about the retreat.

Cognitive Walkthrough

Another element of this design evaluation were cognitive walkthroughs. Using the initial prototype of this website, each team member performed some of the tasks above by taking on the persona of Abby. This entailed becoming a user who does not know anything about this project and is visiting the site for the first time. For example, Abby, the first time user wants to “find the page where the information about the president is located” The cognitive walkthrough would reflect the following:

• Analysis question: Will Abby have formed this sub-goal as a step to their overall goal? Yes

• Why? It is her intuition to try to find where this specific section is located.

• Action #1: Go to organization's website and click "Board Members" link on the navigation menu bar.

• Will Abby have formed this sub-goal as a step to their overall goal? Yes

• Why? It is clear in the menu that this is the only possible place she can find information about the president.

• Will she know she is making progress? Yes

• Why? Website directs user to "Board Members" page

• Action #2: User scrolls down to President's Message section

• Will Abby have formed this sub-goal as a step to their overall goal? Yes

• Why? User will know she is on the right page and she will figure out that the president's information must be somewhere on the eboard members page.

Cognitive Walk-though Results

Three cognitive walkthroughs were performed. One of the issues discovered was that it may not be clear to certain users where the forms for getting in contact with the organization is. In order solve this issue, the names of where certain things are located should be more explicit in conjunction to their function. Changing the name from "Donate/Get Involved" to "Donate/Contact Us" may be more clear for users who are afraid to explore around the website.