Women in Computing at Cornell (WICC) Website
Collaborated with E-Board members of Women in Computing at Cornell (WICC), "an organization of women and allies creating opportunities for technical and leadership growth for people of all identities", to redesign and develop a more inclusive iteration of their website. INFO 1300 Final Project
For each milestone, complete only the sections that are labeled with that milestone. Refine all sections before the final submission.
You are graded on your design process. If you later need to update your plan, do not delete the original plan, leave it in place and append your new plan below the original. Then explain why you are changing your plan. Any time you update your plan, you're documenting your design process!
Replace ALL TODOs with your work. (There should be no TODOs in the final submission.)
Be clear and concise in your writing. Bullets points are encouraged.
Everything, including images, must be visible in Markdown: Open Preview. If it's not visible in the Markdown preview, then we can't grade it. We also can't give you partial credit either. Please make sure your design journey should is easy to read for the grader; in Markdown preview the question and answer should have a blank line between them.
Tell us about your client. Who is your client? Explain why your client meets the client rules in the project requirements.
Our client is WICC (Women in Computing at Cornell). Our client meets the client rules in the project requirements because they are a campus organization that needs an updated static website. Also, none of our members have a personal connection with this club.
Develop a client questionnaire to learn more about your client and their goals. You may use the questionnaire below, you may modify the questionnaire below, or you may create your own.
-
Describe your organization and its purpose.
We aim to foster a supportive community of women and allies equipped with the resources needed to recognize and overcome challenges. By creating opportunities for technical and leadership growth, we work to ensure that people of all identities are able to discover and pursue their interests and talents in order to positively impact the future of tech.
-
What makes your organization and its services special or unique?
Our organization is special because we aim to expand opportunities and successes and to provide a support network. We do this with our many programs that any student can join, such as Lunch Bunch, Mentorship, Girls Who Code, Corporate Events, G-Body Discussions, and Cracking Your Career Events. I'll also explain what these programs are. Lunch Bunch is weekly free lunch with Cornell Professors, Mentorship is finding friends and mentors in the CIS community and drinking boba together while talking about careers and resumes. Girls Who Code is where us college students teach kids in the Ithaca community how to do basic coding and use Scratch. Corporate events are events held where companies come visit Cornell to talk about their companies and tips and tricks to apply. Cracking your Career is talking about resumes and how to prepare for interviews.
-
Why are you looking for a new website or updating your existing site?
Our current website is a bit unorganized. Our home page is all center aligned while the rest of the pages aren't so it looks inconsistent. Our website is also not fluid so it's not mobile friendly. It only works good on a desktop. I also want there to be more content on the website for each page to show how active we are in the community.
-
Who do you want to visit your site? Who do you believe is your website's intended audience?
I want the CIS community to visit my website, specifically people who are considering pursuing a career in computing who are marginalized in the field. I believe the intended audience are minorities in computing looking for a community at college who want professional as well as academic help.
-
When visiting your site, what actions do you want your visitors to take?
When visiting our site, visitors would find information about who we are as well as the programs and resources that we offer as an organization. On our website, we would like to have information about membership, community discussion, mentorship opportunities, and career assistance. Furthermore, we would like visitors of the site to participate in our organization and recieve more outreach for the resources we offer.
-
What are your goals for this site?
The goals of our site are to provide information for those who are interested in participating in our events and programs, as well as offer resources in different fields in Computing as well as get more publicity for the workshops and programs that WICC offeres. We also would like to attract more members to apply to WICC through the website.
-
Is there a "feel" that you want for your site? Are there colors or imagery that you have in mind?
The feeling that we would be going for in our website is one that is inviting and expresses inclusivity to attract more members to join our organization or take part in our events. Some possible color schemes would maybe be more pastel
-
What are your three favorite competitors or similar organizations' websites? Why?
Some example websites that would be good would be the AppDev website, maybe DTI as well, and another good example would be ACSU
Include your notes/minutes from your first meeting with your client.
- The current website is kinda messy, and we want there to be more content on the website
- Main page only shows sponsors, and want there to be more stuff about what we do on the homepage
- More content abour programs, and resources page seems confusing since it does not display much content about our workshops or interest fields
- The calendar on the website seems okay, but our website is not compatible with mobile website
- Difficult to find out about list serve through the website to join the mailing.
- The current desgin is kinda confusing and is a lot of text so it's confusing for our users
- Colors are not as gender inclusive, mostly catered towards women, we want to make the feel of our website feel more gender inclusive
- The photos of the members list has weird spacing, and the overall alignment of the site is inconsistent
- We want more testimonials from a diverese group of people included on our website, and we want to udpate the content of our testimonials
Tell us about the website that your client wants. Tell us the purpose of the website and what it is all about. Note: If you are redesigning an existing website, give us the current URL and some screenshots of the current site. (FireFox makes it easy to take a full screenshot of a page from the context menu (right click).) If you are redesigning an existing site, tell us how you plan to update the site in a significant way that meets the project's requirements.
-
We are redesigning an exisiting site and these are the ways we will update the site in a significant way to meet the project's requirements:
-
-
I want to change the structure for the home page as well as add and update the content to display more information about the upcoming programs and events.
-
-
I want to organize the content of this page so it's more consistent with the other pages. I want to include more non-text content.
-
-
I want to update the program boxes they're more presentable on mobile devices. When this is presented on mobile applications, some of the text goes off the boxes.
-
Our website's objectives are to educate those who are considering attending our events and programs, as well as to offer resources in a variety of computing-related areas and raise awareness of the workshops and programs that WICC provides. Additionally, we hope to encourage more members to use the website to register to WICC.
-
This is the url to the current website: https://wicc.cornell.edu/#/
Identify your client's goals for the website. What kind of website do they want? What are their goals for the site? There is no required number of goals. You need as many goals as necessary to reflect your client's desires.
-
- Promote inclusivity to attract a more diverse audience to our website and organization
-
- Make our website mobile device accessible
-
- Incoperate more/ update content
We want your project to be successful! It needs to be ambitious, but not too large. A good rule-of-thumb is that you should have about 1 content-full page for each team member. Explain why the website you will create for your client isn't too small and isn't too big. Explain why you think it's the right size for this project.
Our project is the right scope because this a large WICC is a Cornell Club that has a relatively large audience and many events such as Girls Who Code, weekly job newsletters, socials, etc. Thus our redesign would be challenging as it needs to accomodate to a larger, diverse audience and have information for its numerous events. However, it is not too large of a project because the website has 6 main pages, where we want to focus on redesigining specific pages such as the programs page to include updated events and more mobile friendly and the resources page to include more current inforation from their newsletters. This would come out to be around 1 content page per team member.
Brainstorm several ideas for interactivity that will enhance the functionality of the website for its users. > Please document your brainstorm in the design journey.
- Dropdown menu in Mobile View for the navigation bar so it is easier to view
- Carousel featuring all the programs that WICC has on their homepage
- Gallery of WICC members and testimonials
Once you’ve explored your ideas for the interactivity, sketch several iterations of the interactivity’s > design.
- Dropdown menu navigation bar
-
Gallery of alumni testimonials with hover interaction
-
Carousel display of programs on home page
Make a plan of when you will complete all parts of this assignment. This plan is for your team. There is no required format. Format it so that it works for you! Your plan should include when you will interview users and analyze their goals. Your plan should also include how and when you will assemble/create the site's content. Tip: Your team should plan to work ahead. This project really isn't feasible to complete the night before a deadline.
For the following weeks, we first plan to use something like when2meet to formally coordinate group meetings because we realised that some of the times we picked for this first week have not worked out for everyone. Ideally, we'd like to meet before Tuesday in a given week to give us time to work on parts individually as necessary once we've discussed as a group before the milestone deadline. We plan to coordinate a schedule with all the necessary deadlines in order to space out all interviews, coding, and deadlines accordingly considering we also have to complete project 3 in the middle of working through this project. Ideally, we'd like to meet weekly to discuss updates about progress, interviews, design planning for the eventual design part, and more. Based on feedback from WICC members, we will decide how much content we want to assemble and how much we need to create ourselves.
Make the case for your decisions using concepts from class, as well as other design principles, theories, examples, and cases from outside of class.
You can use bullet points and lists, or full paragraphs, or a combo, whichever is appropriate. The writing should be solid draft quality, but it doesn't have to be fancy.
Plan the user interview which you'll use to identify the goals of your site's audience. You may use the interview template below and revise it as much as you desire.
User Interview Briefing & Consent: "Hi, I am a student at Cornell University. I'm currently taking a class on web design and for a project, I am designing the website for Cornell WICC. I'm trying to learn more about the people that might use this site. May I ask you a few questions? It will take about 10 minutes. You are free to quit at any time."
-
Please tell me a bit about yourself. You may omit any personal or private information.
-
Have you heard of WICC/are a current member of WICC? If so, what do you know about their programs, current members, etc.
-
If you do know about them, what is something about the club you wish they promoted more of online that is not already emphasized?
-
Have you ever gone on a/WICC club website as a prospective member? When you were joining, what information did you look for?
-
Have you gone on a/WICC website as an active club member? As a member, what information did you look for?
-
What types of club events do you typically attend? What are your goals when attending these events?
...
n. What haven't I asked you today that you think would be valuable for me to know?
After the interview: "This was really helpful. Thank you so much for agreeing to speak with me today. Have a great day!"
Interview at least 1 person for every member of your team from your audience. Take notes and include those notes here. Make sure to include a brief description of each interviewee. Copy the interview questions above into each interviewee section below. Take notes for each participant inline with the questions.
Interviewee 1:
Interviewer: Michelle
- Please tell me a bit about yourself. You may omit any personal or private information.
- Sophomore studying Information Science
- From Tanzania
- Have you heard of WICC/are a current member of WICC? If so, what do you know about their programs, current members, etc.
- Joined WICC a month ago
- Been to 2 meetings: 1. company presentation 2. networking event to meet memebrs
- Support group for woman in computing
- What is something you think is essential about WICC that has not been displayed on their social media/website?
- When she attended, she liked that the community was inclusive
- They emphasized no one had to be in computing to join and that the club was a group of friends
- Have you ever gone on a/their club website as a prospective member? When you were joining, what information did you look for?
- Did not go on their website, went on social media
- Looking for what events are coming up
- How to join/recruit for the club
- Club culture
- Have you gone on a/their website as an active club member? As a member, what information did you look for/wish you could have?
- Did not go on website as active member
- More info on culture/the people in the club
- What they do as a group of people
- Knowing more about mentorship and social events
- Professional resources on their website
- Why did you join WICC (if applicable)? What are your main goals when joining a new preprofessional club such as WICC?
- Know more about the STEM industry
- Get mentorship from people with experience
- What types of club events do you typically attend?
- Panelist events from alumni
- Company visits/events
- Attracted to the food promotion
n.
Interviewee 2:
Interviewer: Claire
- Please tell me a bit about yourself. You may omit any personal or private information.
- Female, sophomore in CS! I
- Involved in project team on campus, clubs for other extracurricular interests not neccessarily CS-oriented clubs
- Have you heard of WICC/are a current member of WICC? If so, what do you know about their programs, current members, etc.
- Don't know much about WICC but has gone to one of their mixers before to try to pair up with people taking the same classes last semester
- some friends are in it?
- If you do know about them, what is something about the club you wish they promoted more of online that is not already emphasized?
- Not sure about any of their events/who to talk to about it
- feel awkward joining in the middle of the year without knowing "enough"
- not sure what makes it special
- Have you ever gone on a/WICC club website as a prospective member? When you were joining, what information did you look for?
- not really, just joined the listserve but aren't really involved
- tried to see information about what they do
- What types of club events do you typically attend? What are your goals when attending these events?
- fun events, since there are usually plenty of chances to do work and talk to people about academics for classes already
- industry focused events because professional development is important for the future
- Additional comments?
- none
Interviewee 3:
Interviewer: Richie
- Please tell me a bit about yourself. You may omit any personal or private information.
- Male, sophomore studying CS (Premed)
- College of Engineering
- Part of CEV project team’s software team
- Have you heard of WICC/are a current member of WICC? If so, what do you know about their programs, current members, etc.
- Knows WICC and has many friends who are on it
- Personally not a member of WICC but goes to many of their socials and events
- Thought that he wouldn’t be able to join WICC
- If you do know about them, what is something about the club you wish they promoted more of online that is not already emphasized?
- Networking opportunities
- Socials and events
- Research opportunities for CS majors
- Have you ever gone on a/WICC club website as a prospective member? When you were joining, what information did you look for?
- Never visited the webste, didn’t know there was one
- What types of club events do you typically attend? What are your goals when attending these events?
- Socials and networking events
- Workshops for resumes or learn skillsets for industry
- Additional comments?
- None
Interviewee 4:
Interviewer: Jarin
- Please tell me a bit about yourself. You may omit any personal or private information.
- I'm a sophomore studying Information Science with a concentration in data science.
- Some of my interests are Model UN, picnics, and listening to Harry Styles.
- Have you heard of WICC/are a current member of WICC? If so, what do you know about their programs, current members, etc.
- Yes, I've heard of WICC and I went to many of their events, but not a member. Their last two events I went to was the CIS Partner Finding Social and the CIS Formal. The CIS Partner Finding Social is where you can find partners to work on your project with for computer science and information science group projects or studdy buddies. The CIS Formal was a formal where I had food, got the opportunity to meet more people in CIS and there were refreshments, a photobooth, and a dance floor too! I also know about their Lunch Bunch program that I really wanted to participate in but didn't get the chance to yet, but I know you can eat with professors.
- If you do know about them, what is something about the club you wish they promoted more of online that is not already emphasized?
- One thing I wish the club promoted more online is their different teams for e-board, especially if I want to apply. On the website, I got confused navigating to the specific page that listed their teams like outreach or corporate.
- Have you ever gone on a/WICC club website as a prospective member? When you were joining, what information did you look for?
- I actually applied to e-board twice but got rejected. But I remember I went to the club those two times I applied because I wanted to know more information about WICC, specifically about socials happening so I can meet people and industry specific events that are happening.
- What types of club events do you typically attend? What are your goals when attending these events?
- The types of club events I usually attend are the ones where companies, like Deloitte, Nvidia, and Meta are coming to because I want to learn more about upcoming full time job opportunities and internships. I also want to know advice from recruiters themselves about my resume and tips they have when I am applying to their companies. Moreover, I also like going to the fun events that happen where I can meet new people and eat food, such as the GBody events they have with activities like bracelt making. I like going to these so I can meet new people in CIS who are similar to me and find new friends I can talk about my classes with.
- Additional comments?
- I don't have any additional comments.
Interviewee 5:
Interviewer: Marwa
-
Please tell me a bit about yourself. You may omit any personal or private information.
- I'm a sophomore studying ILR and minoring in Fine Arts and runs Collective X on campus.
-
Have you heard of WICC/are a current member of WICC? If so, what do you know about their programs, current members, etc.
- Yes, I have and been to events freshman year. I know that WICC does mentorship, panels with companies and other opportunities and mentorship with upperclassmna.
-
If you do know about them, what is something about the club you wish they promoted more of online that is not already emphasized?
- Photos before each category on the Programs page would be helpful in understanding what each of them are and relate to.
-
Have you ever gone on a/WICC club website as a prospective member? When you were joining, what information did you look for?
- No I haven't been to any, and a picture of currnt Cornellians and members on the front page would be helpful.
-
What types of club events do you typically attend? What are your goals when attending these events?
- Recently been to social justice events such as conversation on cop city in ATL. But I typically go to painting and arts and crafts events and events with free food.
Analyze your audience's goals from your notes above. List each goal below. There is no specific number of goals required for this, but you need enough to do the job (Hint: It's more than 1 and probably more than 2).
Goal 1: Learn about WICC
- Design Ideas and Choices How will you meet those goals in your design?
- details about WICC
- include information about past/future events as examples of what the group does
- Rationale & Additional Notes Justify your decisions; additional notes.
- past information helps inform users about the club's goals
- helps clarify information about who WICC is and who can join
Goal 2: Join the group and get connected
- Design Ideas and Choices How will you meet those goals in your design?
- include pictures of people involved
- links to social media, email, communication platform
- details about membership and how to join
- Rationale & Additional Notes Justify your decisions; additional notes.
- part of feeling "connected" to an group is knowing the people behind it, hence why it's important to include details about the people involved
- links to other platforms helps facilitate real time communication with members
Goal 3: See club events and activities
- Design Ideas and Choices How will you meet those goals in your design?
- include information about events (pictures? text?)
- Rationale & Additional Notes Justify your decisions; additional notes.
- helps users know why they would want to join OR what the group is involved in
Briefly explain your site's audience. Be specific and justify why this audience is a cohesive group with regard to your website.
Our audience are members of the Cornell community who want to get involved with and learn more about WICC. This isn't limited to women, and in fact we wanted to emphasize the inclusivity aspect of the organisation with our design as a whole. This group is specific and cohesive as they will share these goals for learning more about an organisation that is intended to unite people in the Cornell community that people outside the Cornell community may not be as specifically interested in. It is also not too narrow that it would exclude people who share these goals. For example, even though someone from the group may still visit the website, they are not going to have the goal to join the group as they're already a part of it.
Identify three websites (preferably static websites) that exist today on the web to draw inspiration from. Please select websites that are similar to the website you wish to create.
Include two screenshots of the home page for each site: narrow and wide.
We'll refer to these are your "example websites."
Review the website you identified above. (1 paragraph) In your review, include a discussion common design patterns and interactivity in the site.
This website uses a lot of pastel colors and has a vertical scroll format. It only has one html page. We selected it because it has a pastel color scheme similar to what we want to implement for WICC. For interactivity, the website has hover elements over the nav bar and the images of the course staff. When you hover over the course staff icons, their profile picture shows up. This could serve as inspiration for our meet our Who We Are page where we introduce WICC faculty and members.
Review the website you identified above. (1 paragraph) In your review, include a discussion common design patterns and interactivity in the site.
The Cornell Breakfree website has interactivity that automatically plays their dance videos on the page. It also has a narrow screen hamburger menu. When in narrow screen, a lot of their horizontal elements become a vertical scroll, which is similar to what we want to implement for WICC. I selected this website because it is also a cornell club with similar goals for prospective members. I also liked their nav bar and the hamburger menu is similar to what we want to implement.
Review the website you identified above. (1 paragraph) In your review, include a discussion common design patterns and interactivity in the site.
The Cornell DTI page also has similar audience goals as Cornell WICC does. It is also looking to appeal to potential sponsors and prospective members. I like the clean background of their website that is white, but has lots of images for the header and next to paragraphs. It also has a narrow hamburger menu similar to breakfree and what we would like to implement.
Plan your site's content.
List all the content you plan to include your website. You should list all types of content you planned to include (i.e. text, photos, images, etc.)
- textual information about WICC
- Texts of WICC's missions
- WICC's social media accounts like email, facebook, instagram, LinkedIn
- Image of Students holding what diversity is in WICC
- Image of members at WICC for an event
- Texts on the Teams in WICC (community, academic, outreach, brand, corporate)
- Text on when WICC was founded
- Images and information about faculty board in CIS and WICC
- textual information about alumni
- images of the sponsors
- textual information about the events and activities
- textual info about active membership and the requirements and perks
- text of FAQ
- texts of the programs in WICC (like active membership, lunch bunch)
- possible links or references to other platforms (ex. social media)
Explain (about a paragraph) why this content is the right content for your site's audience and how the content addresses their goals.
The content we have planned for our website, such as information about WICC's mission, teams, events, and membership, is the right content for our site's audience because it directly addresses their goals of learning more about and getting involved with WICC. Visitors to our website can have a thorough grasp of WICC's objective and the various teams and programs offered by reading in-depth information about them. This will help them understand how they can get involved. Additionally, providing details on WICC events and activities can aid in attracting members who are eager to come and take part in these activities. The organization's commitment to inclusivity is further emphasized through the content, which is crucial for fostering a sense of belonging and respect among all Cornell community members.
Document your iterations of card sorting here. You must have at least 2 iterations of card sorting. Include photographic evidence of each iteration of card sorting and description of your thought process for each iteration. Please physically sort cards; please don't try and do this digitally.
Iteration 1
The first iteration separated things based on the ways that users may think about things. For example, all things about membership were located in one section because all membership related information could go there. It also separated Events and programs into two categories for the more recreational ones and the professional ones, which were both cited as potential interests from people's user interviews. We thought this would be useful to help users discover who WICC is, how to join, and the two broad categories of things they do.
Iteration 2
The second round of sorting was more granular. The membership section remained the same because this is still a core value and separate goal compared to learning more about WICC. However, we thought that WICC's identity as a group and WICC's identity as the people involved and supporting the group were distinct enough categories that they could be separated. We also that it was lacking a "home" section to serve as a general introduction to WICC since every category was so goal-tailored so we separated a home/broad about section to serve as an initial introduction for all people who visit the site.
Which iteration of card sorting will you use for your website?
We plan to more forward with iteration 2, the more separated one.
Explain how the final organization of content is appropriate for your site's audiences.
As stated before, this is appropriate as it gives users a broad introduction to WICC with the home page and then includes separate pages to accomplish their goals. For example, as many people indicated interest in both "fun" and professional-focused events, the programs category would serve as a catch-all to learn more about that. The membership categories and separate about sections also help users become more familiar with the group's goals and the people behind WICC as a whole.
Please list the pages you will include in your website's navigation.
- Home
- About
- Who we are
- Programs
- Get Involved
Explain why the names of these pages make sense for your site's audience.
Home: Since this is usually a website's primary landing page, it makes sense to have it included as the first item in our navigation. It's a well-known and simple method for users to go back to our website's home page. QUick information, such as WICC's mission and their socials are easy to access.
About: Visitors who are interested in learning more about the WICC community and its values would visit this page. It describes the different teams in WICC and what they do, such as the community, academic, outreach, brand, and corporate teams.
Who we are: The people who make up the CIS and WICC community are highlighted on this page, such as the facuty board. To better appreciate the variety and inclusivity of the community, visitors might be interested in learning more about the experiences and backgrounds of the different faculty members.
Programs: On this page, we can highlight the events, activities, and projects that WICC is doing. This page would highlight the variety of possibilities accessible to current and prospective members, such as campaigns and lunch bunch.
Get Involved: On this page, visitors can learn how to join WICC and how to get involved. Making it simple for people to join and participate in WICC is crucial, and this page makes it easier to do so, because it has a FAQ and links to things like the slack and Listserv.
Thus, these names make sense for the audience because they're clearly divided by what the audience may want to do. For example, the home and about pages give general and more specific information about WICC as a whole and what they do as a group. "Who we are" describes the actual people behind the organisation. Programs and Get Involved help users see what events and programs are initiated by the club and join. These names are all named from the perspective of what content is there that is useful to the audience using the site as though WICC is introducing themselves which is why it is fitting.
Discuss several (more than two) ideas about styling your site's theme. Explain why the theme ideas are appropriate for your target audiences. Note the theme you selected for your site and why it's appropriate for the audience and their goals.
Theme 1: WICC Logo Theme:
Using colours from the WICC Logo would tie together the site and give it a sense of consistency through all the pages. There are also the variety of colours that are not too similar to each other which would help provide contrast. This is appropriate as it enforces the community identity of WICC itself by tying everything back to their own colourscheme.
We ultimately selected this theme as it is more important to focus on this group and what they do rather than focusing on how they are a part of the larger Cornell community. All of our audience goals are tied to WICC itself rather than WICC's place at Cornell so it is more appropriate to focus on the group as its own entity and choosing separate colours helps give it a sense of brand identity.
Theme 2: Cornell Theme:
Tying in the idea of our audience coming from the Cornell community, one way to foster a sense of connection and unity is by using colours associated with the Cornell community as a whole, such as Cornell red. This will implicitly help users feel more connected to the site as a whole because of the shared community aspect tied to the colour palette. Since the people featured are their mentors, peers, friends etc. and are also part of the Cornell community as a whole it may personalise the site more.
Theme 3: Traditionally Feminine Theme:
One idea that we considered, and quickly decided against, was the concept of theming the site around traditionally feminine colours to tie into the organisational identity as being Women in Computing at Cornell. However, we actually wanted to avoid sticking to this in order to highlight the inclusivity aspect that goes beyond women. We thought there were better ways at curating a sense of organisation identity without relying on colours that are traditionally marketed as feminine.
Document your site's layout.
Using the audience goals you identified, brainstorm possible options for interactivity to enhance the functionality of the site while also assisting the audience with their goals. Briefly explain idea each idea and provide a brief rationale for how the interactivity enhances the site's functionality for the audience. Note: You may find it easier to sketch for brainstorming. That's fine too. Do whatever you need to do to explore your ideas.
This would enhance the functionality of the mobile view. It would make the website easier to view and navigate without the clutter of the navigation bar. A hamburger menu interactivity would be useful for the WICC website as it allows the navigation menu to be collapsed into a single icon, freeing up space on the page for other content. This is especially important for mobile devices, where screen real estate is limited. With a hamburger menu, users can easily access the different pages and sections of the website without being overwhelmed by a cluttered menu.
The testimonials would help prospective members get a better understanding of the club culture and who is in the club. The interaction helps associate a face to the testimonial and allow for more dynamic interaction on the website.
The carousel on the home page would allow the users to get a broad overview of all the programs WICC offers and the culture on the home page. Users do not have to search through WICCs many resources and programs in order to get an overview of what this club does.
Note: We actually changed this idea of a carousel on home page and instead decided to create a slider slideshow interactivity for the faculty board on the "who we are" page. We thought this would be more beneficial to the goals of our audience compared to a home page carousel. The purpose of a slider for the faculty board in the "who we are" page is to provide a dynamic and visually appealing way for users to learn more about the faculty board members of the WICC organization. This adds a personal touch to the website and helps users feel more connected to the organization. By providing an interactive element like a slider, users can easily navigate through the different faculty board members and learn about their backgrounds and what they are good at.
Iterate on your site's design through sketching. Sketch both the narrow and wide versions of the site. Here you are just exploring your layout ideas. You don't need to sketch every page. Include some of your interactivity ideas in your sketches. Provide an explanation for each sketch explaining the idea and the design patterns you are leveraging.
One thing we were considering was whether or not we wanted to insert a footer or not on the website. One place this is especially apparent is on the home page. However, we felt like having the links to social media in the footer may have made it too hard to see because of the small icon size. One important goal that many users had was not only learning more but staying connected with WICC, so we thought that visibility of these additional ways to connect with WICC was more important.
For the about page, I showed that the narrow will have a hamburger but the wide will not have a hamburger. I also made stylistic chocies of where the content should go and how big the text should be.
For the who we are page, I showed the interactivity of the faculty on both the narrow and wide page. I also showed where the cotnent will be and what type of text it should be. Lastly, the narrow will have hambuger menu but the wide will not have hamburger menu.
This shows the stacked of the students, alumni, and corporate I made.
Another thing we considereed was how we'd want to change the layout for wide and narrow websites. For example, on this page we thought that related information such as links for Students, Alumni, and Corporate categories could go side by side in the wide version because they accomplish the same goal (getting in contact with WICC) but for 3 different categories of people.
Include the final sketches for each of your pages. Include your final interactivity in your sketches. Include annotations to explain what happens when the user takes an action with your interactivity. The sketches must include enough detail that another 1300 student could implement them. However, you don't need to provide layout/CSS annotations. Please, provide an explanation for each sketch.
Narrow (Mobile) Design:
This is the narrow sketch for the Home page. It shows the button for the hamburger menu for the narrow view that can be toggled on or off in order to access other navigation elements. Content in this page is mostly stacked, with the exception of the 4 external site icons which we felt were related enough to each other to make sense to group together and still were large enough to be visible on the narrow version.
This is the narrow sketch for the Get Involved Page. The interaction for this page is a subpage dropdown menu for all the different ways someone can get involved/targetting different audiences. It will have a hamburger menu for the mobile view.
This is the narrow sketch for the Programs Page. This page will have a hamburger menu for the mobile view's navigation.
This is the narrow sketch for the who we are page. There will be a hamburger menu for this when it is narroe. Also, this has the interactivity for the slider for the faculty to show people who make us CIS in WICC.
This is the narrow sketch for the about us page. This page will also have the hamburger menu when it's narrow.
Wide (Wide) Design:
This is the wide sketch for the Home page. It shows the same content as the narrow version, but lets the WICC title and the logo for WICC sit side by side and has a standard navigation bar at the top. Placing these things side by side enforces the visual relationship between the WICC name and their logo and goals. We also considered keeping them side by side for the narrow version but felt like it made the logo too small relative to the text, which is why we opted for the stacked version for the narrow site.
This is the wide sketch for the Get Involved Page. The interaction for this page is a dropdown menu for all the different ways someone can get involved/targetting different audiences.
This is the wide sketch for the Programs Page. This will not have the hamburger menu when it is wide.
This is the wide sketch of the who we are page. This has the interactivity of the slider for the faculty.
This is the wide sketch for the about us page. This will not have the hamburger menu when it is wide.
Explain why your design is appropriate for your audience. Specifically, why does your content organization, navigation, and site design/layout meet the goals of your users? How did you employ design patterns to improve the familiarity of the site for your audience?
- Because it is inclusive and supports diversity, our website design for Women in Computing at Cornell is suitable for our audience. Our content is organized clearly and is simple to explore, with a faculty board slider, hamburger menu, and distinct headlines for each part. These tools enable visitors to explore WICC's various facets and locate the information they need fast. The graphics and text describing WICC's missions, activities, events, and teams give a thorough overview of the company, and our site's style and layout are pleasing to the eye.
- By implementing a hamburger menu, a typical design pattern used in contemporary websites, we increased the site's familiarity for our audience. Another well-known design element that consumers will be familiar with is the faculty board's slider. Users can more quickly understand the material and navigate the website thanks to our use of headings, simple language, and images. Thus, our design is ideal for our audience because it supports the inclusivity and diversity that WICC stands for while being user-friendly and aesthetically pleasing.
Describe the purpose of your proposed interactivity. Provide a brief rationale explaining how your proposed interactivity addresses the goals of your site's audience and enhances their user experience.
The WICC website would benefit from a hamburger menu interaction since it allows the navigation menu to be condensed into a single icon, creating room on the page for other content. Given the small screen sizes of mobile devices, this is particularly crucial. Users may easily access the various pages and sections of the website using a hamburger menu instead of being overpowered by a crowded menu. Moreover, the faculty board slider on the "who we are" page serves as a dynamic and eye-catching approach for visitors to discover more about the WICC organization's faculty board members. Users will feel more connected to the business as a result of the website's addition of a personal touch. Users can easily move between the many academic board members and discover more about their backgrounds and areas of expertise by offering an interactive feature, such as a slider.
Now that you've designed your interactivity for your site, you need to plan how you will implement it. Describe how you will implement the interactivity. This should be a complete plan that another 1300 student could use to implement the interactivity. You should list the HTML elements, CSS classes, events, pseudocode, and the initial state.
Interactivity Plan for Hamburger Menu:
HTML elements:
- There should be an element with a class of "uselogo".
- There should be an element with a class of "click".
- There should be an element with a class of "menu".
CSS classes:
- The class "hidden" is used to hide certain elements initially.
Events:
- The ".menu" element has a click event attached to it.
- The ".click" element has a click event attached to it.
Pseudocode:
- Initially, elements with class "uselogo" and "click" are hidden by adding the "hidden" class to them.
- When ".menu" element is clicked, ".uselogo" element slides down slowly and the "hidden" class is removed from ".click" element and added to ".menu" element.
- When ".click" element is clicked, ".uselogo" element slides up slowly and the "hidden" class is added to ".click" element and removed from ".menu" element.
Initial state of JavaScript code:
- When the document is ready, elements with class "uselogo" and "click" are hidden by adding the "hidden" class to them.
- Two click event handlers are attached: one to the ".menu" element and one to the ".click" element.
Interactivity Plan for Slider for Faculty Board:
HTML elements:
- A container element with the class "slideshow" that contains several child elements with the class "slide".
- Two buttons with IDs "prev" and "next" that are used to navigate the slides.
CSS classes:
- ".button": The class used for the buttons that allow the user to navigate the slides.
- ".hidden": The class used to hide elements.
Events:
- ".hover()": The function that executes when the user hovers over the container with the class "slideshow". It removes the "hidden" class from the buttons with the class ".button" so they become visible.
Pseudocode:
- When the user hovers over the container with the class "slideshow", the buttons with the class ".button" become visible.
- The current slide is tracked using the variable "SLIDES" which is set to all the child elements of the container with the class "slideshow" that have the class "slide".
- A function called "nextSlide()" is defined which increases the current slide number and shows the next slide.
- A function called "prevSlide()" is defined which decreases the current slide number and shows the previous slide.
- A function called "showSlide()" is defined which takes a slide number as an argument and shows the slide with that number while hiding all the others.
- Click event listeners are added to the "prev" and "next" buttons that call the corresponding function.
- An interval function is defined that calls the "nextSlide()" function every 10 seconds.
Initial state of the JavaScript code:
- The buttons with the class ".button" are hidden by default.
- The current slide is set to the first slide.
- The "prevSlide()" and "nextSlide()" functions allow the user to navigate through the slides.
- The "showSlide()" function shows the slide with the given number while hiding all the others.
- The "prev" and "next" buttons have click event listeners that allow the user to navigate through the slides.
- An interval function is set to automatically switch to the next slide every 10 seconds.
You should meet with your client again to obtain feedback on your design. Provide a summary of the client's feedback and your meeting's minutes.
-
The client likes the hamburger navigation menu because mobile devices are commonly used to access the WICC website and a hamburger menu can improve the user experience by making it easier to navigate on smaller screens. The client appreciates that now the user can access the menu items without it cluttering up the page, and can make the site feel more streamlined and organized.
-
The client wishes there was more images for the program page. They stated they would want images for these reasons:
- Visual Appeal: Images can improve the website's aesthetic appeal and user engagement. Visitors to the site can more easily comprehend the purpose and advantages of each WICC program by using high-quality photos that illustrate the WICC programs.
- Enhanced Understanding: Images can aid website visitors in comprehending the WICC programs that are being given. Users can choose the programs they wish to join in more wisely if visuals are provided that demonstrate what happens during a program, what resources are used, or what participants can benefit from it.
- Bringing Diversity to Light: Images can also be used to bring the diversity of the WICC community to light. Visitors to the website can witness the inclusive attitude of the organization and the value of diversity in computing by viewing individuals from a variety of backgrounds, ages, and genders.
-
The client also liked the way the faculty board has an interactivity slider. They wondered if a similar one can be made for all the students who are on executive board for all the teams listed. The client would like photos of the members for these reasons they explained:
- Personalization: Including member faces can give the website a more friendly, intimate vibe. The members may feel more a part of a community as a result, which may attract new members
- Transparency: The website can show transparency and accountability by publishing member faces. It demonstrates that the organization's members
Conduct user testing with a minimum of 1 participant for every member of your team.
Plan out your user testing tasks before doing your user testing. These must be actual user testing tasks. Tasks are not questions!
-
You’re interested in tech-related research at Cornell; find information about the faculty involved in WICC.
-
You’re a prospective freshman interested in tech, find out how you would become an active member and maintain membership.
-
You’re taking a heavy course load your junior year and you want to figure out if the club is a good fit for you as another commitment; find out more about the club’s values and mission.
-
You want to sign up for the mentorship program and you want to know which days and times they’re held and if they fit into your schedule.
Interviewer: Michelle
Using your notes from above, describe your user by answering the questions below.
-
Who is your user, e.g., where does the user come from, what is the user's job, characteristics, etc.?
- Senior in Mechnical Engineering
- Male
- In project team and engineering preprofessional fraternity
- from Ithaca, NY
-
Does the user belong to your audience of the site?
If “No”, what’s your strategy of associating the user test results to your audience’s needs and wants? How can your re-design choices based on the user tests make a better fit for the audience?
No, he is not fully embody our target audience. He is a male in Engineering, about to graduate, and less interested in computing. However, he has joined many computing related clubs that offer academic a professional support. As such, he understands the goals of a prospective/current member of WICC might have.
Based on his feedback, we should emphasize the community aspect of WICC more. Right now, the content is preprofessional but does not do a good job of emphasizing the mentorship programs, academic community, and inclusivity of the organization. As such, we should resturcture our content and be more descriptive.
When conducting user testing, you should take notes during the test.
Task 1
- scrolls to bottom of home page but doesn’t find anything
- Checks out who we are page
- Scrolls through interactivity to look at all the faculty
Task 2:
- goes straight to get involved
- Finds active membership
Task 3:
- goes to About page from get involved page
- Sees the build a community mission statement
- Is also interested in the jobs and corporate sponsors
- Is looking for academic support as a junior and wants a closer community
- However, he feels the academic section is more related to jobs and doesn’t feel like academic support
Task 4:
- goes to programs tab
- Reads active membership
- Sees the mentorship program and times
- Wants to know how many mentors you can have
- What is the mentorship structure?
Interviewed by: Claire
Using your notes from above, describe your user by answering the questions below.
-
Who is your user, e.g., where does the user come from, what is the user's job, characteristics, etc.?
- junior in ORIE at Cornell
- female, but not part of WICC
- mentioned they know people in it/heard about it because ORIE is CS-leaning
-
Does the user belong to your audience of the site?
If “No”, what’s your strategy of associating the user test results to your audience’s needs and wants? How can your re-design choices based on the user tests make a better fit for the audience?
Yes
When conducting user testing, you should take notes during the test.
Task 1: You’re interested in tech-related research at Cornell; find information about the faculty involved in WICC.
- "not sure [they'd] start with WICC for research if they weren't part of it"
- scrolls down home page but notices Connect with Us is just external sites
- goes to About and scrolls through, "oh, about us is about the group's goals and not the people"
- goes to Who we are
- hovers over faculty board and clicks through to see faculty
Task 2: You’re a prospective freshman interested in tech, find out how you would become an active member and maintain membership.
- scrolls up the page to the navigation and goes to Get Involved
- mentions they're not sure what list serv and Gbody Slack mean aside from knowing that they're emails and a Slack group
- scrolls down to active membership section
- notes that maybe Gbody from Gbody Slack means "general body member" and that it's open to everyone
Task 3: You’re taking a heavy course load your junior year and you want to figure out if the club is a good fit for you as another commitment; find out more about the club’s values and mission.
- remembering the pages from earlier, scroll up to navigation bar and click on the home page
- notes the emphasis on inclusivity and opportunities
- unsure about the commitment amount from that
- goes back to navigation and clicks on the About page
- notes that it talks about group's values and events the group does as a whole but still not sure how much of a time commitment it would be from that
Task 4: You want to sign up for the mentorship program and you want to know which days and times they’re held and if they fit into your schedule.
- scroll up and goes to Programs
- notes that active membership is on this page too but less detailed
- "testimonials are kinda hard to read"
- sees mentorship information and assumes that 5:30-6:30 means it's in the evening but find it inconsistent with Lunch Bunch which was 12:10PM-1:10PM EST, for example
Using your notes from above, describe your user by answering the questions below.
-
Who is your user, e.g., where does the user come from, what is the user's job, characteristics, etc.?
My user is from NYC and is studying Anthropology and is involved in a variety of activities on campus.
-
Does the user belong to your audience of the site?
She does belong as an underrepresented minority on cmapus and an FGLI student that could benefit from support and resources
When conducting user testing, you should take notes during the test. She goes to the "about" page first to get an idea of who's a part of the org, then to the "who we are" page to understand it better and then lands on the professors. She sees a holistic theme in the site when seeing how WICC has a variety of initiatives in place, and appreciates the "Focus:" blurb for readability as well.
Using your notes from above, describe your user by answering the questions below.
-
Who is your user, e.g., where does the user come from, what is the user's job, characteristics, etc.?
- My user is a female CS Major at Cornell College of Engineering
- Current sophomore student studying at cornell
- Has many friends in WICC but not part of organization itself
-
Does the user belong to your audience of the site?
Yes
Task 1: You’re interested in tech-related research at Cornell; find information about the faculty involved in WICC.
- Scrolled directly to Who we are page and scrolls down to faculty
- Finds the Faculy section but does not realize that there is more than one faculty member
- User claims to complete tasks
Task 2: You’re a prospective freshman interested in tech, find out how you would become an active member and maintain membership.
- Scrolls back up to the navigation and looks through the nav options
- Confused on what section on the top of the page indiates the membership section and is lost
- Ends up finding membership section after realizing to scroll down
- notes that maybe Gbody from Gbody Slack means "general body member" and that it's open to everyone
Task 3: You’re taking a heavy course load your junior year and you want to figure out if the club is a good fit for you as another commitment; find out more about the club’s values and mission.
- Scrolls back up to mavigation bar
- Decides to click on home page
- Then about page
- Confused about what the sections mean
Task 4: You want to sign up for the mentorship program and you want to know which days and times they’re held and if they fit into your schedule.
- Goes back up to nav bar
- Clicks on Get Involved
- Remarks that does not know the difference between get involved and programs
- Remembers the word "programs"
- Did not read prompt full so didn't see task in entirety
- Finall Scrolls to program tan
When conducting user testing, you should take notes during the test. She goes to the "about" page first to get an idea of who's a part of the org, then to the "who we are" page to understand it better and then lands on the professors. She sees a holistic theme in the site when seeing how WICC has a variety of initiatives in place, and appreciates the "Focus:" blurb for readability as well.
Overall, the user had a relatively easy time navigating the webpage if the task was read properly; however, the issue came up that the user consistently did not notice the slidedhow carousel om the who we are page, so visibility can be improved on that specific interactivity element
What changes did you make to your design based on user testing?
The slideshow didn't signal interactivity without hovering so we added three dots to show that there's something to click on.
List any persons you collaborated with on this project.
We did not collaborate with anyone.
Please cite any external resources you referenced in the creation of your project. (i.e. W3Schools, StackOverflow, Mozilla, etc.)
These are my list of resources: