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
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).
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).
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. |
Login and registration screens
For non-guests, I made basic login, register, and registration successful screens.
For non-guests, I made basic login, register, and registration successful screens.
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.
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.
Created a “buildings” filter for users looking for spaces near their class.
Selecting a room shows the following details (left):
|
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.
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.
Viewing reservations
Basic screens to view upcoming and past reservations.
Basic screens to view upcoming and past reservations.
Link to prototype: tinyurl.com/studyspaces-app Programs - Adobe XD, Sketch, Illustrator Font - Open Sans |