Single people often have to share space in the expensive city housing market. They need a way to search for housing based on their specific needs, and to find housemates that will be a good lifestyle fit.
Improving the specificity of room rental postings to help both seekers and posters to spend less time looking at irrelevant postings or corresponding with poor matches.
A responsive web app geared toward matching housemates in shared housing situations with likeminded people and streamlining the process of finding roommates.
I learned a lot about my own design process through this course project, since I had the flexibility to make my own choices about what UX tools to use on an as needed basis. I enjoyed working in a non-linear way. I found that I sketched whole flows rather than individual screens, and learned more about my mobile designs by designing the larger breakpoints.
I was given a general brief, but decided to inform my specific project by talking to a few people I found through my network.
Location. This lead me to set the map as the central focus.
I found that people consistently forget to include important things in their postings. This requires a lot of emailing back and forth just to determine whether a house meets their needs. So I spent some time fleshing out the content of the room-posting form to prevent anything from being missed.
In just a few minutes, I visualized what some key screens might look like and numbered a flow through them. In retrospect, the idea was less visual and more flow-based, so I could have started with the flow and done the visual aspects later.
I needed to document all the pages and functionality that belonged at each stage of the process for each type of user. To make sure I didn’t forget anything the app would need, I created a sort of hybrid user flow/site map.
It served to demonstrate both the paths users could take to either post or find a room, as well as show all the pages I’d need to create to demonstrate the app as a prototype.
See it as a PDFMatching: I envisioned this as OK Cupid meets Craigslist Housing. An optional rabbit hole users could get into where they’d answer match questions and weight them in importance to help them match with others who would make great roommates.
It turned out to be outside the scope of the project, so the feature never got designed beyond this point.
This project was my first experience with Sketch. I watched a bunch of YouTube tutorials and explored a lot on my own. Here, I used Sketch’s built-in prototyping feature to run quickly through the basic functionality: Signing in, setting parameters, viewing results, filtering, viewing details, and contacting the poster.
Even though it was a UI focused project, I spent time fleshing out the content, since forms are key to the site’s functionality.
Don’t spend forever on alignment in early iterations. Things get adjusted over and over while different UI elements evolve and things change. Saving the perfection until I was truly satisfied with the layout and content saved me tons of time.
Early experiments with logo, colors, and the general sense of camaraderie I was hoping to evoke.
Making a template with masks ahead of time would have saved a ton of time and kept the layout looking neat so that it wouldn’t distract a client or stakeholder from the content.
I experimented with a few color palettes, based on the three colors from the mood board.
I learned that running a preference test is an appealing option when faced with a decision I am torn about. The results weren't statistically significant because they were very close, but the comments helped me choose the gold colors. The site is meant to make a house feel more like home and the warm colors help give that sense of welcome.
There wasn't time in this project to test the reception and comprehension of the icons and buttons, so I did not do any. In retrospect, I could have tested them on my own time with a few friends or other designers, just to look for any glaring issues.
As I moved beyond mobile into other breakpoints, I found myself making bigger changes to the overall look of the site, even the mobile version.
I learned I should iterate more widely in the earlier stages, and even start visualizing the larger breakpoints earlier in the process.
When both YouTube and my mentor couldn’t help me animate a swipe motion with Principle, I found a workaround that still demonstrated the functionality without being a true animation.
The main thing I learned doing this course is how much I don’t know. I took a Udemy course in graphic design in addition to this UI specialization course because I knew it was a weak point of mine and I wanted to face my weakness head on. What I learned was that most UI skills come with practice, but I have a good foundation to build off of in the years to come.
Also, big thanks to my tutor/mentor Craig Hansen. And thanks to all the artists posting their vector illustrations for free on Vecteezy.
