Angela Dong - isthisangela

StudySpaces app prototype

My first ever shot at UI design!
Prototype for a potential app, StudySpaces.
It helps Berkeley students find, rank, and book study rooms on campus.

Full finished prototype: tinyurl.com/studyspaces-app

Mockup

Ideation and user research

We decided on this app to address the difficulty of finding open study spaces on campus and the inconvenience of reserving rooms.

I identified three user profiles:

Lone student - Looking for a room to study in. Would benefit from knowing a room’s rating/popularity; if going to a class, might want to find rooms within the same building.
Group member - Looking for the location of a specific room. Would benefit from room info and directions.
Group leader - Looking for a space to host an event. Would benefit from a convenient reservation system and history tracking.

Icon, loading screen, and menu

I created the app icon in Illustrator and incorporated it into a loading screen and options menu.

The menu has 3 subsections - one to view/adjust account information, one for help/info, and one that would pull up a list of buildings (click to jump).

Loading screen

Main menu

Home screen

Because the app is location-based, I opened it to a map of nearby study spaces.

For visualization, we made open rooms different-colored pins: green for empty, red for full, yellow for partly full (pins not pictured).

I made the login/register screens one swipe to the right. To the left is the main menu pictured above, and below is a list of nearby rooms.

Home screen

Signup screen

Registration success!

Account info screen

Account info screen

As incentive to create an account, we implemented a point system (earn by rating study spaces, get priority in booking rooms.)

The account information page has point balance, options to change info, and a button to view upcoming and past room reservations.

After logging in or signing up, the display shifts back to the home screen.

Finding study spaces

To easily find spaces, we allowed users to filter buildings or rooms by different criteria (alphabetical, distance, popularity) as well as search by name, similar to Yelp/GMaps.

Buildings

Users looking for spaces near their class might want to view the rooms in a building, so I created a “buildings” filter.

Building list/filter

Search for a building

Buildings by search result

Rooms

It's possible to find rooms in either of 2 ways.

From a building (right) - Selecting a building displays the rooms within it.
From the home screen (below) - Swiping up yields a list of all rooms, filterable in the same ways as buildings, plus a “favorites” function.

Rooms in building

Room list/filter

Search for a room

Rooms by search result

Specific room

Selecting a room shows the following details (left):

Name
Location (on map and within building)
“Save” button to add to favorites
“Go to” button to get directions
Overall rating + breakdown
Daily hours and current status (open/closed now)
Calendar view of reservations
- Red: closed or no unreserved hours
- Yellow: over 50% of reservable hours are booked
- Green: under 50% booked

Selecting an available date from the calendar expands into a reservation view.

Reserving study spaces

I laid out the reservation screen with the calendar view on top to easily see and/or change the displayed date.
Under that, I formatted the reservable times into a list of time slots. Selecting one and confirming books the slot.
From there, users can view their reservations or hit “Nevermind” to cancel and return.

Reservation screen

Successful reservation

Viewing reservations

Basic screens to view upcoming and past reservations.

Upcoming reservations

Reservation history

Link to prototype: tinyurl.com/studyspaces-app

Programs - Adobe XD, Sketch, Illustrator
Font - Open Sans