I worked as a team, with UX researchers and UI/UX designers, to collect and analyze the 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.
This is a mobile app to help student users efficiently reserve seats at UC Berkeley libraries through a user centered design process.
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?
Preliminary User Research
Needs & Significance
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 services must be designed to improve students' productivity & time management.
[ Focus of school services due to popularity: on-campus study spaces ]
Goals
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?
Top Key Insights
(subjects : college students, ages 18-21 years)1. Study spaces are not accessible/utilized often due to lack of awareness.
2. The overall consensus for problems regarding shared spaces are the lack of capacity and the overcrowding.
User Journey Map
is what I created, using the data we collected from our user interviews, to lead us to possible solutions.
Ideation
I brainstormed three different solutions to address the problem of improving the accessibility of school study spaces for students to efficiently do work.
1. Seat Holding App - An app that has live seating reports and reservations for on-campus study spaces.
2. Study Spaces Newsletter - A newsletter that includes information (the location, name, hours of operation, and a fun fact) about one of the campus' study spaces each week.
3. Study Spaces Webpage - A webpage attached to UC Berkeley's website that lists all the on-campus study spaces, including a google form for concerns or suggestions of study space improvements.
Narrowing Down
I chose the most practical ideas out of the three, and I created low-fidelity prototypes for both the Seat Holding App and the Study Spaces Webpage.
Mid-Fidelity Prototype
I continued with a mid-fidelity prototype for Idea #1, the Seat Holding App in Figma shown below. A clickable mid-fidelity prototype can be accessed HERE.
Insights from Usability Testing
The wording for the "Filter by Group Size" button and the design of the button was confusing. Users were unsure about what the purpose was or how to use it. I should recreate the button design and improve the wording.
Cannot Assume Users Will Understand Elements
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 should create a randomize button 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 wanted to make my design cleaner and more modern. So, I went back and am now redoing every screen with a more modern, minimalistic design.
High Fidelity Prototype - 2nd Iteration (WIP)
View the work-in-progress Figma file HERE.
A glimpse of a few finalized screens:
