Overview

Design Process

Skip to Section

Project Context

Designing for Social Inclusivity

The goal of this project was to practice the principles of HCI design. We underwent the HCI design process from idea generation to final design during the course of a semester. 

Initially, my team and I were tasked with designing for social impact. Specifically, the rubric of this project called for us to design for a problem that was relevant to our social group. As a result, we arrived at the focus on the social interactions on the Cornell University Campus. 

We defined our problem as the following: 

• Many students have a hard time making friends on campus.

• Academic strains may limit a student’s social life.

• A student's friendships may be limited to their interest-based organizations (sports teams, clubs, fraternities, or sororities).

Upon conducting research through various generative methods we realized that the Cornell campus does not promote an atmosphere of forming connections whether it may be friendships or relationships. We hoped to create a space at Cornell where priority will be placed on interaction and socialization. This solution is CVENTS (Cornell Events), an app where Cornell students can post invitations to social events with the goal of fostering social inclusivity. 

1. Generative Research

Following a brainstorming session, we decided our topic of focus should be social interactions at Cornell. We wanted to know how hard (or easy) it was for a student at Cornell to make connections. This may be making friends or forming a relationship with someone. To help us gauge these interactions we performed contextual interviews.

Background Research

COntextual INTERVIEWS

Understanding of the social lives of students on campus.

During these 25-45 minutes sessions, participants were asked various impersonal to personal question relating to their social lives. These questions were divided into various types: Culture at Cornell, Social Network Questions, and Dating Specific Questions.

Culture at Cornell- To gauge individual student’s experience on campus and their views on the atmosphere of socialization in the college campus.

Social Network Questions - To gauge how effective social media might be in fostering social interactions.

Dating Specific Questions - To gauge socialization beyond friendships and how the atmosphere on campus may affect relationships also.

Some sample questions included:

DATA ANALYSIS

Following the interviews, we compiled all of the data and began to analyze and organize the data into groups for the affinity diagram. We came up with seven major clusters from the data.

Affinity diagrams

2. Design Ideation

Using the data collected during the contextual interview as well as the clusters derived from the affinity diagram, we created a persona to define a target audience and their expectations. 

Persona

Requirements for our solution

After we created our persona, we mapped out a list of requirements that our solution should have.

• Allow users to establish who is already in their social circle

• Easily meet people

• Contact/connect with people they would like to build friendships or relationships with

• Access social events across campus

• Put what type of relationship they’re looking for on their profile

• Have more access about clubs and organizations

• Validate whether users are actual Cornell students or not (The app should have the support of Cornell administration and be only for Cornell students.)

• Block anyone they had an uncomfortable interaction with

• Have no constraints regarding messaging people.

Solution Space

After defining our persona, we performed an analysis on existing solutions that could aid in mitigating our focus problem. Some well know solutions that influence social interactions include:

Takeaways

While these solutions all can help increase someone’s social network, they all can contribute to social exclusivity. Certain organizations and clubs have audition, rush, or application processes can increase social exclusivity. Social networks are often hard to penetrate. Dating apps can have an implicit racial bias, and there is a fear of catfishing. It is also hard to ensure people actually attend events, and there are a number of Cornell students that don’t enjoy going out.

IDEA GENERATION

For this stage of the project each group member was responsible for coming up with 20 ideas of solutions that can be used to address our problem. During the following brainstorming session each member would share their best three solutions with the rest of the group.

Takeaways

After compiling all our ideas, we noted any overlapping concepts or features that may be represented in the final prototype. Through our idea generation sessions we came away with these final takeaways:

• Our solution will be an event-based app

• Users will be able to see Cornell events on the app

• Users can filter events by interests and expectations.

• Users will also have the opportunity to see who else is going to these events through a “guest list”.

These takeaways should accommodate many of the needs and wants of our persona.

DESIGN CONCEPT

We came up with four tasks for the design concept:

We narrowed down our previous list of tasks to these four ideas because they were the most applicable to increasing social inclusivity on campus.

Scenario

From the tasks we selected, we created the scenario for our persona, Karen:

On a lonely Friday night, Karen decides to give the app a try. She downloads the app and creates a profile. After she creates a profile, she clicks the home button she searches for it in the search tool on top and clicks on the listing when it pops up. Karen is delighted to see that it’s an open Halloween Party she can attend near her dorm in Collegetown. She sees who else is going to the party and is pleased that there will be a lot of new faces at the party. She clicks the RSVP button and goes, has a great time, and then gives the host a five-star rating the next day.

STORYBOARDS

3. Prototype and Evaluate

Low-Fidelity Paper Prototyping

Using facets of our persona, scenarios, and tasks, my team and I designed a paper prototype for our solution. We used this paper prototype and its accompanying UI sketches to perform various tasks that we have outlined in the previous module. This task represent usability from the perspective of our persona, Karen.

Demo

Evaluation

To test this prototype we recruited a new diverse group of three users to walk through the prototype. Based on this user feedback, we made some of the suggested changes to the prototype. These changes included:

• Making the profile less extensive.

• Increase the scope of the solution space to target loneliness.

• One common response was that our solution many not necessarily affect social inclusivity. Therefore, we had to make necessary adjustments to make sure that our solution addresses this central issue.

Mid-fidelity Balsamiq Prototype

After testing our UI sketches, we created a mid-fidelity prototype of our app using Balsamiq. The primary tasks that we created on our Balsamiq prototype included:

• Allowing users to finding an event

• Allowing users to create a profile

• Allowing users to RSVP to an event

• Allowing users to view attendees for an event.

Some design decisions that were made for the Balsamiq prototype were:

• Clicking outside a text popup to exit instead of using a “back” button

• Color contrasting the different event categories

• Organizing all the events in boxes down the screen.

One change to this prototype derived from the low-fidelity feedback session was to include the option to “connect to facebook” on the startup page.

Evaluation

To evaluate this prototype, each group member did a heuristic evaluation of the features of this prototype. We defined which of these feature violated heuristics, and decided whether we would make changes based on the severity of the violation and time cost.

Some changes we made were :

• Adding an option to edit profiles.

• Adding confirmation pages.

• Allow the user to cancel an RSVP.

• Error prevention after certain actions.

High Fidelity Invision Prototype

Through our heuristic evaluations, we came up with a fair amount of different changes to the UI. Some of these changes include:

• Minor tweaks including positioning on the screen and color changes

• Changes to the nav bar and the removal of some required profile information.

• There were a few cases where we needed to add additional buttons to allow different affordances.

• On the profile tab, we added a button for the user to edit their profile.

• We added + buttons on the attendee lists for parties to allow users to add people who were attending the party.

Usability Testing Plan

We then came up with a usability plan. For each task, we created an ideal happy path that the user would follow to complete each task, made the notetaking guide, came up with the metrics we would use which include social connectedness, effectiveness, think-out-loud method, efficiency, and emotional engagement.

We wrote out the happy path for each task, and then created post survey questions for each user as well.

Demo

Evaluation

For this phase, we implemented our usability testing plan and ran evaluation sessions with potential users of the app.

We had them perform five tasks that we specified in our plan, evaluating whether they were able to complete the tasks and how quickly. After they did each task, we asked them a few post questions about their thoughts on the specific task. Once they completed all the tasks, we asked them some more general questions about their thoughts on the prototype.

Findings

After we conducted our evaluations, we discussed them, created an excel spreadsheet with all of the design problems that came up during the process. We then evaluated those problems to decide which aspects of the prototype to modify for out final change, focusing on high impact changes with a low time cost.

We settled on three major change:

• Improving the search functionality.

• Changing the information architecture for the profile page.

• Adding an Upcoming Events page.

Some minor changes include:

• Standardizing the colors

• Changing the font, redesigning the navigation bar

• Adding a notification for the host when a user RSVPs

• Adding an “Interested” button.

4. Final Design

Introducing…CVENTS,

the event app for Cornell students. Through our mission on advancing social inclusivity, CVENTS allows Cornell students and organizations to advertise their events on our platform. Cornell students will then be able to find and attend these various events. What makes this event app different from others is its policy for social inclusivity. Event organizers will be advised on building spaces where everyone feels welcomed, and where students are able to from meaningful connect with the others they meet.

Design rationale