Hi-fi wireframes of UniHomes application.

UniHomes

team role

ui designer

duration

8 weeks

Created for my project in human computer interaction course at uci, UniHomes is a mobile application that facilitates the off-campus housing rental process for college students. Within a team of 4, I primarily took on the role of ui designer where I sketched and designed the application's primary user interface.

problem statement

According to Erudera, 62% of students in the US considered dropping out of university due to housing insecurity. It’s a staggering statistic and needs to be addressed immediately. That’s where our new mobile app concept comes in. our app, UniHomes, simplifies the process by aggregating rental listings, offering personalized recommendations, facilitating communication with verified landlords, and sourcing roommates.

Due to the lack of availability of various housing options, students often struggle to navigate the complexities of the rental market, including finding suitable roommates, locating suitable properties, negotiating lease terms, and understanding legal and financial obligations. This application aims to simplify the process of finding off-campus housing for college students by providing a user-friendly platform that aggregates rental listings, offers personalized recommendations, and facilitates communication between students and landlords.

surveys

After crafting and reflecting on our problem statement, our team members conducted a housing experience survey regarding lived experiences and pain points with the off-campus housing rental process. our survey consisted of close-ended questions and resulted in 20 responses. our key takeaways from the survey were the following:

personas

Three UX personas.

Based on our survey results, our UX researcher created 3 user personas to reflect our application's target users and summarize our findings into a more readable, interpretable, and humanizing format.

sketches

Various lo-fi wireframe sketches.

Based on our comparative analysis and personas, our project manager and content strategist worked on specifying the general design system. The main pages that were initially decided on were a search page, bookmarks page, roommate finder page, and personal page. a main page is defined by whether a page had its own button on the bottom navigation bar. I generated about ~5 sketches for each proposed page. However, while creating these sketches, I realized how some subpages were better as its own main page, and how some main pages were better as subpages. This included moving bookmarks inside the personal page and converting roommate/landlord messages into its own main page. I then met with my team members to communicate my proposed changes and to pinpoint the final sketches that would be converted into lo-fi wireframes.

lo-fi wireframes

Lo-fi wireframes of UniHomes application.

While creating the lo-fi wireframes, we realized how many details we were missing from our initially proposed design system. There were a lot of subpages that we didn't account for, such as how the user would even receive both personalized rental listings and roommate recommendations. Would they fill out a preference survey in the beginning? Would they have an option to edit these preferences later on? We had to constantly go back and forth between our wireframes and initial design system.

hi-fi prototype

Hi-fi prototypes of UniHomes application.

I decided on a simple yet reliable color palette for our app after observing how many other applications incorporate blue as their accent color. A reliable color palette would also provide a reliable experience for users during the off-campus housing process. Poppins was chosen as the primary font due to its aesthetic and readable glyphs, and varying weight options. Overall, the application interface is minimal and consistent with recognizable controls in order to ensure that users could easily traverse through the off-campus housing process.

view our prototype