CMU Housing
This was a very collaborative project and all of us contributed to pretty much every piece of it. I primarily focused on the visual design and layouts for each of the pages, and most of the team worked on writing the content to fill out the mockups with.
Our goal with this project was to create a website that would help students understand the housing options available to them at Carnegie Mellon University, primarily for incoming first-years, transfer students, and exchange students who don't have any idea what the differences between the options are. The website is designed to provide them with easily accessible information, student reviews, and details that typically you have to explore many different websites, official and unofficial, to find.
If a student chooses to make an account, we start with a survey that first lets the student analyze their own behaviors and goals to figure out what they actually need in a dorm, and then asks about any required accommodations and preferred amenities they might have.
Following the survey, the student is presented with a few buildings to look into, based on their survey responses.
From here, students can explore all of the possible building options, sorted into three categories of Best Fit, Decent Fit, and Wild Card buildings that don't necessarily fit what the student said they want in the survey or the filters in the sidebar, but could get them thinking more deeply about what they really want or need.
The page that students would likely spend the most amount of time on is the Comparison page, after adding buildings from the All Buildings Page. Here, a student can look at a selection of buildings side-by-side to compare amenities like bathrooms and kitchens, locations, room sizes, and most importantly, reviews from past students that lived in the building in previous years, with a summary of the general sentiment at the top.
A student can also view all of the information, like amenities, about a specific building, collected from the offical housing portal as well as other resources like video walkthroughs other students have made, the same reviews as on the comparison page, maps showing where the building is relative to others, and photo and floorplan galleries that on the offical portal are specifically hard to find and browse.
There's a page dedicated to comparing how far each building is from other buildings, shown with primarily walking, but also biking and transit if the distance is far enough.
The review page was designed to be quick, so that it could be something sent out to students and actually have a chance of being filled out because having student reviews is one of the biggest values in a website like this, and if the process of reviewing is too long, noone would do it.
We wanted a sense of fun in the interface, to avoid it feeling overly corporate and off-putting, and the iconography was a major aspect of this for us. The small, monotone outline icons are bubbly but still minimal, and then for anything a bit bigger, we styled the icons in a way that was inspired by stickers, with colors and a heavy stroke, as if we were putting stickers onto the ui like you might with a notebook.
The ui elements are overall mostly standard - our segmented slider took the most development because of how much we use it. We used a bright orange on all of our primary controls to distance the visuals from the blues and reds that the school itself typically uses - we didn't want students to feel like our website was an official school website. All of the grays that we used are slightly tinted towards our secondary teal color helping to unify everything together.
