Wellesley Resources App

A central resources to help Wellesley students anytime, anywhere.

5.png
 

Build:

Role: UI/UX Designer

Team: Linsey Gordon, Professor Orit Shaer

Tools: Illustrator, Balsamiq Cloud, InVision, User Testing, Bootstrap, HTML, CSS, JavaScript

Timeline: June 2020 – August 2020

Overview

Problem Statement

There are a plethora of resources for campus life available to Wellesley College students, but many students are unaware of their existence or unsure of how to access them.

 

The Solution

To combat the confusion surround resources at Wellesley College, we have created a app specifically dedicated to help Wellesley students know where resources are, what resources are available, when resources are available, and which resources can help them. From contacting residential assistants to campus police, Wellesley Resources is there 24/7 to help students out!

User Analysis

 

Takeaways from User Interviews

User 1 reported that they haven’t “…had experience connecting with any of the Academic Success Counselors (ASC), but the RAs have been pretty helpful.” User 1 had never called Campus police before, but when the user spoke with them, they complimented that the campus police were “very kind, caring, calm, and methodical when called over for help. Both times interacting with them were due to a friend needing first aid/twisted ankle.” This user believes the most common reasons why Wellesley students call Campus police is because of injuries and being locked out of dorms and does feel comfortable contacting them if needed. However, this user also expressed the police could have benefited from hosting more “events where [students] are introduced to the staff of Campus Police. While they seem to be kind people, we never really know who they are.” The only alternative to calling Campus police this user is aware of is calling an Resident Assistant which this user reported she knew both her phone number and email.

User 2 also found it quite easy to connect with resources and has comfortably called Campus police before for shuttle bus updates in which the user reported that campus police “…always answers quickly.” The user thought other Wellesley students called Campus police to report noise complaints, health incidents, or shuttle bus updates. User 2 is aware of House Presidents and Residential Assistants as alternative resources to Campus Police. The user knew who her RA was and how to contact them if necessary through GroupMe. They also knew who their HP and ASC were, but did not know their number but reported perhaps they would be able to find their email. This user knew who their CD was and how to contact them because their “…office was downstairs with her number.” The user does not know how to contact maintenance nor how to put in a maintenance request. They also do now know what Title IX is nor what the Title IX office can do for you.

Test Question Image (1).png

User 3 found it easiest to find resources as a first year, especially immediately post orientation when they had just been told about all of them. They could not identify their most recent HP, CD, ASC, or RA, and did not have their contact information. User 3 felt that they could most easily find their RA’s information on their floor, and their HP, ASC, and CD’s contact information on the Wellesley website or social media if they needed to contact them. They most directly associate calling campus police with noise complaints, accessing the campus vans, and medical issues. The user feels that campus police has not historically been useful in the situations they have been called in, and their presence in certain spaces is uncomfortable for students. They specifically noted their own experience with the poor handling of a situation by campus police where a student with mental health issues was involved. They believe that campus police is most often called because Wellesley students, quote, “[don’t know] how to handle situation beyond calling campus police or pure confrontation - especially for noise complaints.”


User 4 found resources easiest to find through personal connections. They were familiar with their RAs and HPs through in-person events, including parties, all halls, and classes. If they needed resources that they did not know how to obtain, they would go through friends first for advice. User 4 identified the Stone Center and the Office of Religious and Spiritual Life as the two main mental confidential health resources. Of the Stone Center, they said that “[there are] lots of hoops to jump through. Definitely possible to [receive care] but [I] had to do a lot of self-advocation”. Self-advocation required the student to not only stand up for themselves, but know who to talk to to receive the care they needed. The user was visibly annoyed while describing the specifics of the extra work they had to take on in order to find the resources and then insist they receive them.


Based on the user responses, there is a disconnect between Wellesley students and the resources available to them. These needs suggest that a mobile app that helps Wellesley students identify the best resource for their need and provides the contact information for that resource would be beneficial. Having easy access to campus resources will help the identified population to build resilience by allowing them to directly address their issues. It will also provide them with alternatives to calling campus police for less important matters, such as noise complaints. The reduction of police presence is a goal of the current civil unrest, and quick access to alternative solutions such as residential life or mental health service intervention will help meet this goal. As there is a possibility of students returning in the fall during the era of COVID-19 and social unrest, it is essential that students know what resources are available on campus, how to access them, and that students feel confident and comfortable using such resources.

Personas

PERSONA - Light.png
Wellesley Resources Persona 2.png

Task Analysis

 

Goal: Find resources to fix a problem/help the user.

Preceding Steps

  • Identify that you need help

  • Open the mobile application on your device

  • Optional: Know what resource you are getting information on

Main Steps

  • Optional: Identify what type of resource(s) best suits your problem (exp. Mental health, Campus police, maintenance, etc.)

  • Take resource identification questionnaire for help

  • Search for the resources you are intending to look for

    Browse available resources

    Access a specific resource’s contact information

Following Steps

  • Contact the resource identified using listed information (exp. Email, phone, room number).


Information Architecture

 
Wellesley Resources Map.png

Hierarchical Task Plans:

1.1, 2, 3.1, 4.1, 5, 6.1
1.2, 2, 3.1, 4.1, 5, 6.2
1.3, 2, 3.1, 4.1, 5, 6.3
1.4, 2, 3.1, 4.1, 5, 6.4

1.1, 2, 3.1, 4.2, 5, 6.1
1.2, 2, 3.1, 4.2, 5, 6.2
1.3, 2, 3.1, 4.2, 5, 6.3
1.4, 2, 3.1, 4.2, 5, 6.4

1.1, 2, 3.2, 4.2, 5, 6.1
1.2, 2, 3.2, 4.2, 5, 6.2
1.3, 2, 3.2, 4.2, 5, 6.3
1.4, 2, 3.2, 4.2, 5, 6.4

1.1, 2, 3.3, 4.3, 4.3a, 4.3b, 5, 6.1
1.2, 2, 3.3, 4.3, 4.3a, 4.3b, 5, 6.2
1.3, 2, 3.3, 4.3, 4.3a, 4.3b, 5, 6.3
1.4, 2, 3.3, 4.3, 4.3a, 4.3b, 5, 6.4

Domain Analysis

 

Important Entities

 

Websites

  • Maintenance pages

  • WEngage

  • Facebook

  • Instagram

  • Google Groups

  • WEngage

  • Wellesley.edu

  • Res life pages

  • Dean pages

  • Stone center pages

  • Health services pages

 

Physical Entities/Objects

  • Dorm hallway information boards (partially accessible due to remote learning)

  • Cell phones

 

Applications

  • Facebook

  • Instagram

 

Social Media

  • Facebook (especially class facebook groups)

  • Instagram

  • Twitter

 

People

  • RAs, HPs, CDs, ASCs, etc.

  • SHEs and BHEs

  • Class Deans

  • Title IX coordinator

  • Stone Center personnel

  • Campus Police

  • Other students

Ideation

Scenarios

Scenario 1: Wynter’s neighbor is being too loud. She uses the app to find their RA’s information to ask them to get the neighbor to quiet down, rather than calling in a noise complaint to campus police.

scenario1.png
 

Scenario 2: Winona’s overhead light burns out. She uses the app to find out how to submit a maintenance request to get the light fixed.

scenario2.png
 

Scenario 3: Winona is physically injured during the night, and uses the app to contact campus police to get medical aid, as Health Services is closed at night.

scenario3.png

Two Initial Design Directions

 
design1.png

Design 1: Database Structure

The first design is a simplistic database structure. There are no help elements and it is up to the user to find what they are looking for. The rationale for this design is to provide a simple interface for users to quickly find the resource they are looking for. The buttons and navigation paths are clearly defined within the app to allow the user to quickly move through the interface.

We also came up with a secondary concept that would also be mostly formatted as a database, but would allow for users to have slightly more search capacities. We also thought it would be useful to have a guided quiz where users could answer questions about their issue and be directed to the most likely helpful resource.

 
design1.5.png
 

Design 2: Image/Map Based Design

The first design is a map based resource finder. The user can click on the map of Wellesley to find resources by location. This design relies on the user's GPS location to place them on the map to show what buildings are nearby. All resources are sorted by building. The biggest pro to this design is to quickly be able to identify resources that are local to the user, but it also means that the user is unable to find resource listing pages without knowing in what building the resource is located (i.e., they would have to know where the Title IX office is located to find it).

design2.png

Takeaways from Wellesley Student Design Review

 

The majority of the feedback was very positive, and it seemed that we correctly identified an issue that many Wellesley students face. We were surprised at the number of people who were in favor of the map based search, as we thought that it might be too inconvenient of an interface. From this feedback we decided to merge the different design concepts into one: an app that offers multiple search methods for finding resources at Wellesley. This would include the map search, a traditional keyword search, a full directory, and a resource identification tool to help uncertain users decide what kind of resource they needed. We also took into account the criticism of the design itself, and worked to make signifiers more clear in the next iteration.

Prototyping & Evaluation

 

Design Rationale for Wireframe Prototype

 

The wireframe prototype was based on a merger of two of our design concepts, as described in the previous section. The class feedback was positive towards the directory, the search methods, and towards the map search options for the app, and so we decided to incorporate all three into the wireframe prototype, which was designed using Balsamiq. We wanted the pages to be clearly laid out and to get a good sense of the flow between different sections. Some feedback led us to add more navigation buttons between the different sections for easier navigation through the app. A link to the prototype can be found here.

 

Video of Interactive Wireframe Prototype in Balsamiq

 

InVision Prototype and Design Rationale

Our InVision Prototype is a more sophisticated take on our wireframe prototype. Since this app is representative of Wellesley College’s brand, we decided to pair a serif font and sans serif font. For headings and titles, we decided to use Garamond to match the Wellesley typography style. For subtitles and descriptions, we decided to use Helvetica, an easy to read font that was listed on Wellesley College’s website.

For the main color scheme, we used Wellesley Blue (002776), White (FFFFFF), and Black (000000). We took inspiration from the MyWellesley app which also uses these main colors given as blue is Wellesley’s symbol. Originally, we were going to implement color coding to identify each type of resource, but we found through our first iteration of our prototype that this look made the app feel unprofessional and more confusing than it should have been. For the heading of pages, we put a transparent Wellesley “W” at the top of the page to indicate where the user was currently as well as connect the app’s t heme back to Wellesley at all times.

The main buttons in the app are Wellesley Blue with white text, and the “Back” buttons are white with blue outlines. We decided to use rounded rectangles rather than regular rectangles because we thought this looked more modern and the mood of the app more relaxing since this app is a place for students to find resources. The goal of the design is to make this app as easy to navigate as possible since we will be including quite a large amount of information when this app is finished due to the several resources available within Wellesley. We do not want the user to become overwhelmed or lost within the app and thus, our design is aimed to be clean and clear of useless clutter. We created the pages of the app for the prototype using Canva, and our InVision prototype is linked here

Takeaways from Heuristic Design Evaluation

 

The feedback from the first round of Heuristic evaluations on our InVision prototype was mostly positive, with some criticism surrounding small issues with the finer points of the design. Based on this feedback, we added more signifiers to the maps, a home button to all pages, renamed the resource quiz, and made some modifications to the fonts, particularly bolding important information on individual contact pages. We also recognize that there were some issues with the map interface, however, it is not possible to fully implement the map interface using InVision, and these issues would need to be rectified in a more advanced implementation prototype.

 

InVision Prototype Video

 

Final UI Design

With the UX thought out and tested, we spent additional time making the UI Design of our Wellesley Resources app cleaner, friendlier, and positive.