Background & Objective

My university uses a manual housing selection process. Students need to physically show up at a room during their assigned time, wait in line, and make their housing selection. The current process is time-consuming, and induce students' stress. The goal for this project is to understand the housing selection procedure; design and implement a solution to increase the efficiency of this procedure within 10 weeks.

Some of the questions that guided me through the process:
-Who are the users?
-How can I reduce users stress?
-How will users use this system?
-Will users use this system?

Objective:
Create a housing selection system within 10 weeks that is usable.

Exploratory Research

Domain Research: Literature Review & Competitor Analysis

I looked into 3 other universities' housing selection process. Following is part of the comparison result.

Interview and Focus Group

In order to quickly and efficiently understand and empathize with multiple users for this project, I chose to do informal interviews with 2 administrator and a focus group with 3 students. I asked about their past experience when going through the manual housing selection process.

Synthesis of Exploratory Research

I determined on three main use cases for the initial version of the system based on previous research. Those are the use cases that are most essential for users to complete their final goal.
The three use cases are:
      -Choose roommates
      -Check available rooms
      -Select Housing

Persona

Based on the information that I gathered, I created a persona.

What I would do differently:
- I would collect and use more data next time in creating personas.
- I would also add some design element to the persona so it's more visually appealing.

User Flow/ Task Sequence

This is the high level architecture of what pages there will be and the flow of the system.

Design

Sample Sketch of Some Pages

Paper Prototype in preparation for usability study

Validate Initial Design

To validate the application design, I used heuristic evaluation to evaluate the page, and conducted usability testing on the low fidelity paper prototype.

Heuristic Evaluation

I did heuristic evaluation on the paper prototype.
Below is an example of how I changed my design.

Paper Prototype Usability Testing

I did 2 rounds of usability testing with 5 individual participants in each round using think aloud technique. Users were asked to complete 3 tasks based on the three initial use cases: choose roommates, check available rooms, select housing. Below is some of participants' behaviors:

What I would do differently:
- During the usability testing session, I often caught myself probing the questions. I would ask more neutral questions.
- I would also quantify the results during synthesis.

Example Changes

This is an example of how I changed my design based on user feedback.

During the testing, users had a hard time understand the functionality of the buttons below. I changed the design to make the buttons more informational.

High Fidelity Prototype Design Process

Wire Frame

Add Color

Final Design/ Project

Screen 1

Screen 2

Tools I have used in the project

Client: ReactJS, JQuery, Vanilla Javascript, HTML5, CSS, Foundation 5
Server: NodeJS, Express
Database: MySQL
Architecture: REST
Design tool: InVision, InDesign