array of iphones showing finished screens from Our Place app

Project Overview: Our Place


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.

Potential Solution

A responsive web app geared toward matching housemates in shared housing situations with likeminded people and streamlining the process of finding roommates.

Table of Contents

My Role

  • Competitor research
  • Persona creation
  • User interviews
  • User flows
  • Information architecture
  • Wireframing: low-, mid-, and high-fidelity
  • UI design and style guide

What I learned

  • Sketch and InVision
  • How to edit vector images
  • That the layers panel is my friend
  • To save each iteration in a separate page of my Sketch file
  • To export a version periodically if I want a record of my progress that isn’t automatically updated with my text styles

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.

How might we help people find housemates they enjoy?

Meet Courtney

Persona description of a 31 year old teacher who wants to find roommates that fit her lifestyle

User Interviews

I was given a general brief, but decided to inform my specific project by talking to a few people I found through my network.

What did people look for first?

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.


Scrap Paper Sketch

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.

paper and pencil sketch of ideas for the app screenspencil and paper sketch of a numbered series of screen ideas for the app

Site Map/User Flow

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.

flow chart of each page needed for the appSee it as a PDF


Matching: 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.

Learning Sketch

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.

screen shot of prototype made in Sketch program

Mid-fidelity Wireframes

Even though it was a UI focused project, I spent time fleshing out the content, since forms are key to the site’s functionality.

What I learned

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.

mid fidelity design of seeker profile screenmid fidelity design of filter pageMid fidelity design of results page

Mood Board

Early experiments with logo, colors, and the general sense of camaraderie I was hoping to evoke.

What I learned

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.

mood board with examples of typography and images of happy roommates

Playing with colors

I experimented with a few color palettes, based on the three colors from the mood board.

What I learned

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.

blue color palette with hex codesyellow color palette with hex codesgreen color palette with hex codes

Mobile Mockups

A note on testing

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.

What I learned

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.

final design of home screenfinal design of results pagefinal design of posting form page 2


YouTube lessons

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.

gif animation of a house with lights turning on and off and the words "please wait" below the house

Style Guide

View full style guideeach of the custom icons used in the appthe app's yellow color palette with hex codesarray of texts and sizes used in the appArray of button styles used in the app

Final Mockups

laptop, tablet, and phone featuring the different layouts of the results page for different size breakpoints

Check out the prototype

laptop, tablet, and phone featuring different screens of the app

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.

What I learned

arrangement of iphones featuring different app screens

Thanks so much for checking out my work!

Also, big thanks to my tutor/mentor Craig Hansen. And thanks to all the artists posting their vector illustrations for free on Vecteezy.

decorative line drawing of a bunny