Shouts: Helping Students Find Their Ideal Study Spots

UX Design — Mobile

Some students like busy areas for studying. Others, not so much.

Anaheim Packing House, 2016

01 Background

Shouts is an app that helps UCI students find their ideal study spots on campus. A student could either manually search for a spot (ex: Starbucks, library, etc.) or have the app suggest one based on proximity. Each location has a noise-level rating (ex: quiet, very loud) which is reported by students who are currently at that spot.

How Does Shouts Work?

  1. A student opens the app and may either have a location suggested based on proximity or manually search for one.
  2. If they choose to have a location found for them, they will be given a list of locations nearby with their noise-level ratings.
  3. If they choose to search for a location themselves, they type in the name of a location and will be shown a list of all locations with that name sorted from near to far. Noise-level ratings are also shown.

Team & Roles

I worked on this project with three peers from my Human-Computer Interaction class at UC Irvine. Together, we conducted research, sketches, and testing. I delivered the personas and wireframes.

02 Empathize

For this project, we followed the Design Thinking method from the Stanford d.school. We were tasked to design a solution for the following problem:

How can we increase student productivity when it comes to studying?

To begin, my team and I:

  • Conducted user research on campus at libraries, Starbucks, and outdoor areas
  • Organized our data into an affinity diagram with four categories: Procrastination and Distractions, Study Environment, Work Environment, and Productivity Booster
  • Put together an empathy map to ground our design on a deep understanding of who our solution is for
  • Formed two personas that embody potential users of our app

The steps above were taken to understand our user within the context of our design problem. Below are our UX deliverables: an affinity diagram, an empathy map, and my two personas.

Affinity Diagram

Empathy Map

Personas

03 Define & Ideate

We found that the underlying issues related to ineffective studying were space availability and noise levels. The data collected told of students having trouble finding open spaces to use and having to study at locations that weren't suitable for them.

We proceeded to brainstorm possible solutions to our problem. There were no limits, every idea was considered.

We concluded that our solution must assist students in quickly finding their ideal study space so that they don't waste time searching across campus.

04 Prototype & Test

We designed an app that determines the noise level of a location, thus accommodating students with their preferred study environment.

We created and tested a lo-fi prototype of our app with cognitive walk-throughs, a Heuristic Evaluation, and think-alouds with UCI students. We asked them for feedback about the accessibility and layout of the content. Here are the responses:

  1. There is no availability of a map for free searching without doing a keyword entry
  2. There is no back button that allows the user to return to the 'Search' page
  3. The consistent and minimalist design allows for easy navigation of the app
  4. The user has limited control and freedom in the app (they need more options to filter study centers)

Paper Prototype

Wireframes

The delivery of the lo-fi prototypes marked the end of the project, but I decided to create wireframes using Axure as shown below.

05 Reflection

This was my first time doing UX work and I loved every minute of it. Empathizing with others and understanding their issues was something that I'd never done before in a project, and I felt very comfortable doing it. It was a very gratifying experience, getting to collaborate with my team to creatively solve a problem shared by many. I learned that I'm empathetic and curious which I felt were traits that helped me succeed.

Although I was happy with the outcome, I would make a few changes to the overall project. First, I would research what options students would like to filter locations by and update the wireframes to test with users. Second, I would have liked to create an interactive prototype using InVision or Adobe XD and test it with our users. Perhaps a more realistic representation of our app would have elicited more insightful feedback.