Roommates are frustrated. Conflicts arise because users have inadequate tools to manage money, communicate payments, and organize payment history that would help them meet their goal of living harmoniously. How can we design technology to help roommates eliminate these conflicts?


OCTO’s design will help users avoid conflicts by allowing them to manage money, communicate payments, and organize payment history with minimal effort, and without miscalculations, arguments, and misunderstandings that they currently experience. This will dramatically improve users’ lifestyles and lead to a happier living situation.

Our Process

We did user research by interviewing college students who currently live in an apartment with roommates to see what their current methods of handling bills were. We also asked them if they had any pains or frustrations. We also did web research to gather information on how college students organize their money as well as exploring what apps are already out there. By combining all this knowledge we gained, we made an affinity diagram to brainstorm what users would want out of an app for roommates. As a result, the key features we wanted to include in our app are listed below. We also created two provisional personas and user scenarios based off all our research and ideation: One describing a college student who is very organized and one is a grad student who has trouble with organization.


  1. Ability to link app account to utility companies and banks. Linking to utility companies will automatically populate the app's calendar with bill due dates.
  2. Ability to invite roommates to join the app.
  3. Ability to collaboratively write and agree on a roommate agreement.
  4. Ability to specify how to handle splitting bills, and have the app automatically split accordingly.
  5. Ability to pay utility companies and roommates through the app.
  6. Ability to view upcoming expenses.
  7. Ability to view "I Owe Yous."
  8. Ability to view payment history with the apartment as a whole, as well as with individual roommates.
  9. Ability to set up reminders and sync events to other calendar applications, as well as send these to roommates.
  10. Ability to chat with all roommates in the app.

Persona Ideation Persona 1


Then, each person in our group made initial wireframe sketches and later came together to synthesize all of our ideas through discussion and critique. I drew the sketches are below, which are the combined results of all of our best ideas.

Sketch 1 Sketch 2 Sketch 3


Next, were our storyboards. Each person on our team made three and then came together as a group to discuss our ideas. My storyboard sketches are below.

SB 1 SB 2 SB 3


Our next step was to create a sitemap for our application. We ideated with sticky notes first, then I translated it into Illustrator.

Sitemap Brainstorming


Paper Prototype

After gaining feedback from our instructor, we modified our site map and then created a paper prototype using powerpoint. I printed out the screens and cut them out, labeling each interaction with its cooresponding page number on the back. We created a short task list and a set of post-test interview questions and carried out our test with two target users. After getting feedback and analyzing results, we came up with a list of common themes of problems and forumlated solutions shown below.

Paper Prototype


  1. The purpose of the app was not clear.
    Recommendation: Include a description of the app (either before downloading the app or a summary right before registering).
  2. Participants were confused on what to do after they registered.
    Recommendation: Include a walk-through tutorial after registering for the first time with an option to skip.
  3. The Adding Roommates feature was confusing. Participants pressed “add” before typing in any names.
    Recommendation: Add a description of this feature at the top of the page.
  4. Participants had different experiences with the Roommate Agreement.
    Recommendation: Improved implementation of the Roommate Agreement feature: Notifications for when someone disagrees with something, more templates laid out.
  5. Participants would like to see app’s calendar synced with Google Calendar.
    Recommendation: Add syncing feature between app calendar and other calendars (Google Calendar, iCal, etc.).
  6. The purpose of the green and red colors on the calendar were not clear.
    Recommendation: Add a legend explaining the color coding system.

Annotated Wireframes

Using these results from our paper prototype test, we went into creating annotated wireframes for our entire user interface in Axure, making sure to incorporate all our recommendations. Printing all of our screens, we participated in a class critique of our work and recieved valuable feedback. After implementing our feedback, we created inital visual designs which we also did a class critique on.

A couple of wireframes depicting the roommate agreement feature.

Wireframe Exercise Wireframe Exercise 2


After another round of revisions, we finalized our designs. Because of the time limitations of this class, we were only able to create designs for four screens.

Final Design

Stephanie Grose
Geraldine Ragsac
Brian Vergara
Jennifer Wong

UX Designer
Visual Design

Paper Prototype
Annotated Wireframes
High-Fidelity Screens