Introduction

Rumi is an app that allow roommates to communicate more effectively by providing them with a all-in-one tool to keep track of their finances, assign chores, divide shopping lists, create rules and more. Our vision for this app is to create an online community for roommates, and bring people together. We started by doing user research, then designing and testing out design, and finish off the project with a high fidelity prototype.

Our Team

Research

To begin our journey into the user-centered design process, we conducted semi-structured interviews with four people who have experience in living with roommates. We asked participants about characteristics of their ideal roommate, the relationship with their current roommates, how personal differences are addressed, and how household responsibilities are distributed.

Research

User Research

We believe that user research is essential in user-centered design. It is an effective strategy used to uncover valuable information about our users’ goals, needs, and motivations.

User Interview

Roommates have different schedules and daily routines
Roommates often have trouble splitting shared finances
Interviewees want to increase their bonding with roommates
It is difficult to keep track of and fairly distribute chores

Eddy's User Interview

Shiva's User Interview

Tammy's User Interview

Xin's User Interview

One of my most recent fights was last week when I asked my roommate for her class schedule. She blew up at me and said, 'Why do you need my schedule? You micromanage everything.' I explained to her that I wanted to know when I’d have the dorm to myself. She then started saying that she couldn’t wait to move out and both of us were just really upset.

I'm looking for roommates with good communication skills, on the cleaner side, respectful, and friendly enough to engage with me but not get into my business.

Lorem ipsum dolor sit amet, consecstetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Group members putting post it notes onto board

Group members discussing what traits to include in persona

User Personas

We created a document with two personas. Each persona describes a typical scenario of what the user goes through each day. It also includes hopes and desires of the user, and this document is the north star when we design for the user.

Final Personas

User Journey Map

Shiva How did we come up with user journey map?. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

User Journey Map

Design

Researching our design helped us to evaluate the usability of Rumi and analyze the elements that worked well, needed improvement, or had to be discarded all together. We started off with Paper Prototypes to asses the basic flow of the application. This soon developed into a High-Fidelity Mockup after concluding a Quick Evaluation of our prototypes and further refining those into expanded Annotated Wireframes. It’s interesting to see the progress we’ve made from our first few prototypes to the finalized design.

Design

User Centered Design

Shiva What we did during user research. why we choose to ask open questions? What method did we use? Mention we had four interviews on our team. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Storyboards

Tammy How we came us with all the traits on the personas? Mention most data comes from user research. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Design Requirements

We focused on the elements needed for our users to accomplish their goals with our app. We broke down each action that is to be taken, the object in use, and the context of that action. We also specified the data inputted by the user to accomplish this goal and the functionality of these actions. This helped us understand what exactly is needed to fulfill the desires of our users. Visualizing it in the table format, as was asked of us, helped to organize this information better and use it as a checklist as we progressed on our app. This assignment tackles the solution for the problems the user faces, as addressed in the preceding step: the User Journey Map. It is a launching pad for how the solution can be implemented and affect the user, as shown in the next step: the Storyboard.

Design

Information Architecture

We moved onto outlining the high-level elements of our app, looking at the path of each decision the user makes while using the app. The point of the information architecture was to gain a broader perspective on how the app will flow in the eyes of the user, forming an organized hierarchy of possible choices to accomplish a goal. We incorporated the design solutions that were highlighted in the Storyboard in our hierarchical flow chart, and visualized the information architecture as an actual deliverable in the following assignment, the Paper Prototypes.

Sitemap

Design

Interface Design

We believe that testing and evaluating our app early on in the prototyping process is a cost and time effective way to understand how the usability of our interface can be more seamless and intuitive. In addition, it allows us to gain insight on how real users may interact with our app, not just the way we envision it.

Interface Design Sketches

Paper Prototypes

Using the paper prototype, we conducted usability tests on four participants to evaluate its functionality and usability. Each participant was given a series of three tasks that involved interacting with the prototype and was encouraged to think-aloud during their tasks. Each task was followed by a series of questions to further understand each participant’s experience. We then evaluated the responses and discussed ways we could improve our RUMI app.

Evaluating Paper Prototypes

Participants had confusion with unnecessary buttons and button placement
Some parts of the interface had unclear icons and labelling
Overall there was a lack of confirmation states
Participants felt that the app’s concept would be extremely useful in their lives
Users appreciated how everything could be accessed from one app

Running even a simple usability test and evaluation allowed us to identify our app’s pain points and challenges. Based on these insights, we can refine our design to make it more user-friendly which will be reflected in our wireframes.

Annotated Wireframes

The Annotated Wireframes served as a visual draft and overview of what our application would finally look like. We included a basic design of every page that would be the result of each button that the user could possibly click on. We based the wireframes off of the testing of our Paper Prototypes, gauging an idea of what worked in our design and which elements needed improvement. We proceeded to increasing the quality of three of our wireframes to High-Fidelity Mockups, which used the basic drafts as a foundation for the final design of the app (incorporating color schemes, button shapes, etc).

High Fidelity Prototype

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Feature

Dynamtic Dashboard

It's our vision to design a dashboard where all the most relevant information for the user are put in one place. The dashboard automatically updates the order of the cards based on where the user is and what time it is. It is also interactive so users can check off items straight from the dashboard without going into secondary menu.

Feature

List

Feature

Pay

Reflect

Working together with a team of four on a ten week long project has been one of the most challenging yet rewarding experiences. The beginning of our project started off strong when we all agreed on a certain set of group norms to center our work ethic around. These norms included: strong communication skills (reach out if you have problems), respect each other’s ideas and emotions, be patient and adaptable, be responsible and stay on top of your work, and be creative and set a learning atmosphere for others. Throughout the ten weeks, our group continued through each part of the process during the in-class studio sessions and outside of class. We made the effort to meet up out of class in person for at least 2 hours each week, and communicated regularly on our Slack channel.

Coded by Eddy from scratch with ❤️