Anticipating the beginning of student apartment-hunting season, Bruinshack was preparing to welcome its new student users with a revamped site. Students were starting to look for roommates and transitioning from dorm life to apartments in the upcoming school year. This was the perfect opportunity for us to refine the website and introduce a new and improved apartment hunting alternative to Facebook groups, which often are cluttered with posts and scams.
Based on recommendations from the Analytics Team, we decided to make changes to several pages on the site, one being the ShackPanel.
An essential page in gathering information on an apartment, the ShackPanel is an individual apartment profile page.
To understand the current user experience of the Bruinshack site, we conducted 10 user interview sessions with UCLA students of varying years and living situations. The first part of the session involved their first impressions upon walking through the website, and the second part was a usability test where they were asked to conduct given tasks. For the ShackPanel page in particular, we were able to gather insight into what we could improve.
Here were some key insights we found:
The description boxes across the website are visually inconsistent, all containing varying word count. The text-heaviness and lack of visual hierarchy makes it difficult for users to look for relevant information.
Users expressed disappointment in missing information such as lease details. This information often supports the legitimacy of an apartment and can facilitate trust in an apartment manager.
UCLA Facebook groups are used widely by students to find apartments, but they are also infamous for having scam listings and false advertising.
Synthesizing the insights from user research, 2 main problems stood out to me:
The visual layout and organization of information on the page makes it difficult for users to look for information easily and quickly.
The apartment listings don’t include enough pictures or important details that students typically need to help fully determine if the apartment meets their needs. This availability of information impacts how much users view the legitimacy of the apartment.
After deciding on these 2 main issues as my point of focus, I came up with the following question that would be my guide throughout the rest of this redesign:
How might I improve the way Bruinshack users are gathering information about the apartment, so that they can better judge if it's a right fit?
With this question in mind, I looked at different features on the page and what changes could be made to address the mentioned pain points.
Focusing on 5 features, I explored different design changes that could be made through quick low-fidelity designs. With each feature I decided to redesign, I connected it back to a problem.
Replacing the “View all photos” button, I decided that it would be much easier for users to be able to view the images within the page. Here, I thought about different ways the hero image could be displayed.
Since users collectively agree that commuting time to classes is an important factor, I decided to include 2 additional landmarks on North and South Campus. To be mindful of spacing, I opted for a dropdown.
The amount of different filters (e.g. price, units) was overwhelming and required a lot of clicks, so I decided to simplify it to a filter based off of rooms. Also, to combat the text-heaviness of the description, I added icons and smaller sections to establish hierarchy.
Information regarding the lease, such as property information, application fees, pets, and parking, will be its own section. This is very pertinent information since students may have certain dealbreakers, so this addition would also promote transparency between apartment managers and students.
Before moving on to high fidelity designs, I synced with developers on our team to ensure the feasibility of our designs. It was during these conversations where I learned how investing time into practicing good design habits, such as Autolayout, can not only create cleaner designs, but also make developers' work significantly easier. In addition, I was able to run the expected user flow and the low fidelity designs by the developers and make changes accordingly.
One change was the Lease Details Cards, where a developer brought up spacing issues and the case of more cards being added in the future. As seen below, I ended up opting with a grid layout and using autolayout for more consistency.
After going through several rounds of design critiques with my team and iterations, I was able to end up with these final designs.
Quickly scan different images without having to leave the page.
Check how long the commute is to your classes, whether it be in North or South Campus.
Parse through the details of a unit you’re interested in with ease.
Find out more about the property and the lease.
To validate the redesign, I planned for a second round of user interviews with the same interviewees to compare and contrast the user experiences.
Here were some key findings from this round of user testing:
Next Steps
Because we have more oversight over what listings can get posted and now, more structure into what information apartment managers post, Bruinshack has the upper hand over Facebook groups in providing more transparency to its users.
Yet, users' continued preference for Facebook groups may imply that increased transparency isn't enough for Bruinshack to completely win over users. Perhaps, not having a social component (e.g. likes, comments, tagging) is something worth exploring next time.
Having been through the initial user testing to the redesign to the user validation, the journey throughout this entire project was a gratifying process. I enjoyed being able to learn more from users and apply their shared yet varied experiences of apartment hunting. While the finding at the end was disappointing, it was a reminder that user experienced is continuous cycle of improvements to be made and new user needs to be met.