DURATION
Sept 2022 - Nov 2022
10 Weeks
TOOLS AND SKILLS
UI/UX, User Research, Wireframing, Mobile App Prototyping, Figma, Procreate
In the fall semester of my Sophomore year at UC Berkeley, I created Cal Seats, a mobile app that helps student users reserve seats at UC Berkeley libraries to efficiently study on campus. I worked as a team, with UX researchers and UI/UX designers, to collect and analyze user experience data. From there, I led the journey mapping and user experience of searching for and reserving a seat at a preferred library. I then took the concept and created my own UI design with inspiration from modern app styles and UC Berkeley's design system.
Features include:
- Randomizing a library and seat if the user does not have a favorite library
- Searching an interactive campus map for libraries
- Viewing interactive library floor layouts with available seating based on their preferred date and time
THE PROBLEM
Students who choose to study or do work on campus tend to find it inefficient and inaccessible because of the lack of space, which leads to their time being wasted.
How might we improve the accessibility of school study spaces for students to allow maximum efficiency of completing work?
THE SOLUTION
Design a mobile app that allows students to reserve seats at libraries on campus to ensure students have a work space and to save them the time of looking for seats.
USER RESEARCH
QUESTIONS WE HAD:
1. What is preventing students from utilizing on-campus study spaces?
2. Why do students want to use school study spaces?
3. What services can be improved upon?
Because on-campus libraries is a resource that every student should have access to, we noted the needs and the significance that our app should address.
TOP KEY INSIGHTS
After multiple user interviews through surveying UC Berkeley students, ages 18-21 years old, we collected our data and concluded:
1. Study spaces are not accessible/utilized often due to lack of awareness.
2. The overall consensus for problems regarding known shared spaces are the lack of available seating and overcrowding.
1. Responsive - Students need quick information and help.
2. Accessible - School services need to be available to all with the least friction possible.
3. Awareness - Students need to be aware of all school services available and where to access them.
4. Productivity - School resources must be designed to improve students' productivity & time management.
UX VISUALIZATIONS
From our data and conclusions, I created a user journey map based off of one of the user personas my teammate created to lead us to possible solutions.
LOW-FIDELITY
Now, I started to create my own UI design. I first sketched the main screens of the mobile app.
MID-FIDELITY PROTOTYPE
I continued with a mid-fidelity prototype using Figma shown below.
INSIGHTS FROM USABILITY TESTING
The wording for the "Filter by Group Size" button and the design of the button on the Search Page was confusing. Users were unsure about what the purpose was or how to use it. After reviewing the feedback, I decided to recreate the button design and improve the wording.
CANNOT ASSUME USERS WILL UNDERSTAND BUTTONS WITHOUT ACTION WORDS
Users thought that “Searching Seat” on the Profile Page was confusing because they thought that holding a seat meant that they picked a specific seat they wanted but because it said "Searching Seat" it was already occupied and they have to wait for it. However, I created it to mean that users are able to randomize a seat for themselves if they have no preference for study spaces. Therefore, I realized that I need to design a randomize button that starts with a better action word on the Search Page to clarify that.
HIGH-FIDELITY PROTOTYPE - 1ST ITERATION
A clickable prototype for this iteration can be accessed HERE.
After the first iteration, I was not satisfied with the app's look because the design seemed outdated. So, I wanted to make my design cleaner and more modern. I went back and redesigned every screen with a more modern, minimalistic design, using UC Berkeley's official colors and elements like drop shadows and rounded corners.
HIGH-FIDELITY PROTOTYPE - 2ND ITERATION
MODERN STYLE
Throughout the app, the themes of rounding buttons and using Berkeley's gold and blue colors can be seen. I also took inspiration from Google Maps to redesign the Search Page with an interactive map that displays every UC Berkeley library. My main focus was on the flow of users searching and choosing their preferred library and reserving the seat they wanted after viewing the layout of the library.
FOCUS ON WHAT USERS NEED TO RESERVE SEATS
A notable decision I made when designing and prototyping this flow is that I originally created a flow that took the user from clicking their preferred library straight to the seat picker layout page, however I realized that the available seats depend on the desired reservation date and time. Due to that, I inserted a calendar and time page before the seat picker page in my updated flow.
That flow can be viewed in the video below.
Displayed below is the finished Cal Seats mobile app that helps student users reserve seats at UC Berkeley libraries to efficiently study on campus. I decided to utilize more icons and loading pages to incorporate a seamless experience for the users. In addition to that, I also maintained a white background with drop-shadows on various buttons and sections to create depth and emphasis on various elements throughout the app.
Thank you!