[Problem] Looking for housing & roommates is a distressing experience for college students.
[Solution] We designed an integrated website to help users quickly find housing & roommates
[Process] Competitive Analysis, User Research, Information Architecture, Prototyping, and Usability Testing.
We conducted competitive analysis to see what other products are available for college student to look for housing and roommates. I investigated four apps, and summarized the results. There are three types of websites;
We conducted 8 user interviews with students to learn about their pain points and desires. Our interviews asked about
Based on the interviews, we generated an affinity diagram, a persona and journey maps.
Based on the previous user research, our team created three customer journey maps as shown below. Here is my creation as an example.
To define our information architecture, we conducted sessions for
We defined defined four levels of navigation for the content and the initial structure of our website. (It will be revised later.) Also, there are six global navigation - Look for housing, Look for roommates, Sublease, Home, Profile, and Message.
We conducted a card sorting activity to define our sitemap. We gave global category cards, and participants organized cards based on that. One of the findings was searching for roommates and housing is a non-linear process, one doesn’t necessarily have to follow another. Thus, we decided to have "search housing" and "search roommates" separately.
Based on the card sorting activities, we created a sitemap to . visualize our function structure. Main functions are:
Besides main functions, there are three sub functions to help users find housing and roommates smoothly:
Even though our original structure better fit into the data structure (engineers' mental model), our user testing informed that it was not intuitive for users, so I made a change as shown here. In the revised structure, the concept is easier to understand.
These are some of my sketch works for main functions based on our information architecture:
Through several iterations of prototyping and usability testing we refined UI designs from lo-fi to hi-fi. I was in charge of prototyping. Some examples of my works are shown below;
Based on usability tests, we made changes on our design.
You can interact with our prototype here.
Information Architecture: I personally struggled to build our information architecture that is intuitive to users and that fits into users' mental models. Although our original structure covered all the possible scenarios, users could not easily understand that. I learned how to utilize card sorting activities and usability testing to define information architecture. Also, defining filters and metadata was not easy for me. I learned how UX designers need to consider using metadata in order to show the best results to users.
Design: It was also a hassle for me to make all the design consistent, in terms of terms, icons, themes, photos, sizes, etc. I created a design system before starting, but I think I should have more detailed and well-documented guides. Moreover, our team did not spend enough time on usability testing for our lo-fi prototypes, and then the participants focused a lot on the aesthetics of our design during our testing of our hi-fi. Thus, in order to imrove high-level structures, I would invest more time on testing during earlier stages.
Overall: In this project, I could spend a lot of time thinking of the information architecture, and so it was a good opportunity for me to learn how to better define navigation and support users' flow through UI/UX design.