Angela Dong
  • Home
  • UI/UX
    • Tempo
    • StudySpaces
    • Mango
  • Graphic
    • MDB
    • ML@B
    • B@B
    • Chou Hall
    • Promenade
  • Me
    • LinkedIn
    • Resume

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
​
Picture
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).
​
Picture
Loading screen
Picture
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.
Picture
Home screen

 
Login and registration screens

For non-guests, I made basic login, register, and registration successful screens.
​
Picture
Login screen
Picture
Signup screen
Picture
Registration success!

 
Picture
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
​
Created a “buildings” filter for users looking for spaces near their class.
Picture
Building list/filter
Picture
Search for a building
Picture
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.
Picture
Rooms in building
Picture
Room list/filter
Picture
Search for a room
Picture
Rooms by search result
Picture
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 bookable time slots.
From there, users can view their reservations or hit “Nevermind” to cancel and return.
​
Picture
Reservation screen
Picture
Successful reservation

 
Viewing reservations

Basic screens to view upcoming and past reservations.
​
Picture
Upcoming reservations
Picture
Reservation history

Picture

​Link to prototype: tinyurl.com/studyspaces-app

Programs - Adobe XD, Sketch, Illustrator

Font - Open Sans
Proudly powered by Weebly
  • Home
  • UI/UX
    • Tempo
    • StudySpaces
    • Mango
  • Graphic
    • MDB
    • ML@B
    • B@B
    • Chou Hall
    • Promenade
  • Me
    • LinkedIn
    • Resume