<Overview/>
QUICK BACKGROUND
HomesOffCampus project started from my bitter experience of getting scammed by an off-campus property after arriving in the U.S. This experience made me realize how common this problem is in U-M (University of Michigan) and how difficult finding a good place to live off-campus is for students like me.
This is a 3-month individual project aiming to help college students find off-campus housing in an easier and safer way.
My Role
UX Designer & Researcher,
Developer
Timeline
Sep 2021 - Dec 2021
Tools
*NEW UPDATE*
To practice my App-building skills, I have chosen this project and used React Native to build a simplified App version of HomesOffCampus, highlighting its housing forum feature. Check out 'Build An App' for an App demo!
Design: Figma, Miro, Canva
Development: React Native + Firebase
PROBLEM
New international students at U-M face a lot of challenges when trying to find suitable off-campus housing that meets their needs. They are unfamiliar with the campus and city, lack local connections, and most times have to sign a lease before even coming to the city. As a result, they may find themselves settling for subpar accommodations or, worse yet, falling victim to rental scams.
So this is a map around University of Michigan, Ann Arbor.
Yes, this looks like anywhere on the planet of Earth to people not from Ann Arbor. You can get tired simply by looking at it.
However, most new U-M students have to find the right off-campus housing which they probably have to stay for a whole year on such a map before they even come to Ann Arbor city, or even worse, before they come to the U.S. for international students.
Unfortunately, the size of U-M won’t help either. It can be a 2-hour walk from one end to the other. Moreover, with all these off-campus properties claiming themselves to be “your best choice” that offer you “the best ever living experience”, students get lost easily among their beautiful websites.
Thus, finding the right off-campus housing is a daunting process for new U-M students where credibility issues are also involved.
WHY IT'S RELEVANT?
According to a survey done by a UM student group,
79% of students in UM live off campus in Fall, 2020, and
95% of the interviewees believed the house-searching process needs improvement.
MY SAD STORY :(
In June 2021 before I came to the U.S., misled by the information on their website, my friends and I signed a lease with a property called “The One”. When we came here, it turned out the construction had not even finished! Around 600 students like us were homeless and I had to sleep on my friend’s couch for over a month.
DESIGN PREVIEW
Housing Search Page
Students can search for accommodations by setting the most relevant filters.
Community Page
This is a place where students can post various kinds of questions regarding different residences and help each other out.
Buddy Page
Here students sign up for the volunteering-based Buddy Program where students provide or get housing advice/help.
<Research/>
USER INTERVIEW
In order to better understand this problem, I conducted interviews with 5 first-year master's students from U-M. Because the problem of house hunting would be the greatest for international students, I had chosen international students from different countries as interviewees. Here is what I found.
-
They use nearly the same set of tools to get housing information, including Google, online house rental platforms like apartment.com, property official websites, UM off-campus housing website, Google Map (for location and reviews), online communities like group chat and Reddit, and people they know.
-
They all have doubts about the information they get from the property website. Instead, they trust people they know, followed by students and their peers.
-
They tend to struggle on their own when doing house hunting and have no easy connection to those who can help.
-
Many indicate that they couldn’t find certain information they cared about directly from the website or the house review section.
-
They would use multiple platforms or apps (at least 3) to double-check everything about the houses they are interested in and verify the information they get.
These findings suggest THREE main problems in the current process.
COMPETITIVE ANALYSIS
I then conducted competitive analysis for the products that students typically use when they are doing house-hunting.
-
Most of them are not catered to college students, but for more general purposes. Therefore, some important college contexts are missing.
-
All of them only address some parts of the housing problems during the house-hunting process. In fact, they are quite different from each other functionally. This could suggest the need for a more integrated platform.
-
None of them has credible and trackable information.
DEFINE
>> Problem
Incoming UM students find it hard to choose the right off-campus houses remotely because the resources they get are usually limited and spread across different platforms with mixed credibility.
>> Goal
PERSONA
Based on the findings from the interviews, I developed two primary personas. The two primary personas are shown below.
<Design Process/>
IDEATE
>> Sketching for ideas
For exploration, I sketched out many possible tools/solutions that may help the house hunting process, some of which are shown below. They are rough sketches but I found this idea-exploring method to be extremey fun and useful.
>> Possible Solutions
After sketching, brainstorming, and for course eliminating some unpractical ideas, these are the ideas I was left with.
>> Final Solution by QOC analysis
I used 3 rounds of QOC (Questions, Options, and Criteria) analysis, an approach to representing design rationale, to choose the best solution from the solution space above.
STORYBOARD
USER STORY MAPPING
USER FLOW/ROADMAP
The user flow diagram is BIG, so I'm only including a part of it below.
For the whole diagram, check out the Miro board.
PROTOTYPE
From Low-Fi to High-Fi
House Search Page
Housing Forum Page
Housing Forum Page
<Design Showcase/>
FEATURES
The website is designed based on the three goals I set previously:
<Iteration & Evaluation/>
To test out my design, I conducted user testing sessions with 5 users who were all international students and had been through the process of off-campus house searching. The testing is broken down into two parts: test for usability and test for overall success.
TEST FOR USABILITY
Test for usability focuses on how easily the user completes individual tasks, in which users are prompted to perform certain tasks given a context and rate how easy they are on a scale of 1 to 3. Below is part of the User Test Matrix I had.
This test really helped me identify the usability issues. Later, I made some adjustments based on the identified usability issues and user feedbacks in general. Some of the adjustments are included.
House Search Page
Navigation Bar
Price Filter
TEST FOR OVERALL SUCCESS
To make sure the final design does serve the goals that I set, I asked the students to fill in a questionnaire after the usability test. The questionnaire was developed in a way that each question corresponded to one of the set goals. (The questionnaire was developed following the Likert Scale)
Check out the detailed questionnaire here.
Here is a summary of what I found.
The testing results were reassuring. Overall, I was able to get a lot of positive feedback from the students, indicating that this design solution will indeed solve the problems that I defined in the first place.
FINAL DESIGN DEMO
You can play with the live prototype below or check the Figma prototype website.
You can also click here for a 10-min video walkthrough.
<Retrospective/>
SOME OPPORTUNITIES
>> Expand it beyond U-M
Although I started this project thinking only about U-M students and areas around U-M, the final design is actually not very U-M specific. In fact, considering that the housing problem is a common problem in the U.S. and that every college should have its own verification methods for students, this website can be expanded and scaled beyond U-M and serve the housing needs of many other colleges. It will be so much nicer if students from different colleges can log in using their student accounts and access information from different colleges independently from the same website.
>> From Tool to Community
I started this project from a new coming student point of view and the only thing I wanted was a tool that can help them find apartments. However, during the design process, I had to bring those student tenants who are already living off campus into the equation and somehow also solved some of their problems with the forum function I designed. This indicates the possibility of turning this website from a tool to a community.
SOME CHALLENGES
>> Volunteering can be difficult
The Buddy program is entirely volunteer based. So one major problem is: Why do people want to volunteer? Personally, I believe in the good that people have and I have found that those who had been through the tedious house searching process are more willing to help. But I do think some incentives would be necessary/helpful. Some of the possible incentives include member points, small thank-you gifts, and some privileges on the forum. Similar incentives could also be applied to encourage reviews.
After all, the website will still function without the Buddy program, but I do hope to bring warmth to the platform.
>> What about Roommates?
Finding roommates is another problem on its own, but is also closely related to house searching. Even though the current design allows students to post roommate-finding posts on the forum, this is definitely not the best solution out there.
One possible way is to add algorithm-matching for roommates. But right now I’m reluctant to do this because the website already has many functions and adding that could make the website too heavy and clunky.
>> How to keep them on the platform?
House searching is a one-time thing. However, in order for future new students to get the most information and advice, it’s essential to keep “old” students on the platform even after they have found accommodations. This ties back to the “Community” thing I’m trying to build. Ideally, this is not just a house-searching tool, but also an off-campus community where people engage in and contribute to.
Right now, the forum has Sublease, Event/Activities, and Buy&Sell that will benefit the “old” students. I would like to expand them in the future and find more efficient ways to solve their needs in addition to the forum function.
<Build An App/>
BACKGROUND
To practice my App building skills, I recently decided to actually build a simplified App version of the above website, keeping only its forum feature due to time reasons and also the fact that the forum would be the core feature if it were a mobile App.
For the tech stack, I used React Native for the frontend and Firebase by Google for backend services like user verification, database, and storage.
KEY FEATURES PLAN
Green for completed; Yellow for partially completed; Red for incomplete.
From High to Low Priority:
-
Create your own housing-related posts
-
View posts in the Home tab and set filters on Post Category and Residence Building
-
Comment on other students’ posts
-
Sign in and use U-M account for authentication
-
UM account authentication doesn’t work for Firebase
-
-
Enter name, interest, profile, and a short description for first-time login
-
Doesn’t support profile image upload
-
-
Edit profile in own Profile tab
-
Click on other students’ profile pics to check out their personal information
-
Message other students
-
Sort posts by the time posted or the number of comments
-
Users can favorite the subforum they are interested in
WORKING APP DEMO
Check out the current working App demo. I had been focusing more on the functional aspect of the App and will update this soon when I finish modifying and polishing the UI :)