“Roomie” app | Interaction Design Project

Background

Arvind Agarwal
4 min readNov 22, 2016

In Dec 2015, I enrolled in the Interaction Design Specialization by UC San Diego on Coursera, comprising of 8 courses, including a 10-week Capstone Project that covers the skills taught throughout the program. This app was built to meet the requirements of the course and I’d like to share how my design process evolved throughout this rigorous, yet fulfilling journey.

Design Brief

Using the process of design thinking, find the problems in one of the three briefs(Time, Change & Glance) to design a solution around it. Walk through the structured steps designed for this project course to come up with the design for your product — go through needfinding, ideation and paper prototyping to design as many creative solutions possible. Then turn those ideas into one concrete design with the help of Heuristic Evaluations. Test your application prototype, get feedback, iterate and test to keep on improving your designs. After all the refinements, demonstrate your final product design and document your process.

Mission: GLANCE — Find people and design a personal dashboard tailored to their needs.

Needfinding and Ideation—

During the number of years I lived in shared households during undergrad and graduate years, I faced the issue of lack of accountability among housemates, especially regarding household chores. With everyone working or studying at different times, getting everybody to even meet to discuss the issues was cumbersome. So, I decided to choose this “Remix project”, wherein students get to work off the contributions from their peers and extend and build on it for the next stages. The ideation design was from Christopher Griffin, and the early prototype was from Prasitha Thomas. The point of view for this ideation was:

“Shared living would be much more convivial, if communication and collaboration were seamless. Every click is an obstacle, this communication should be available at a glance.”

We have all faced situations where we have to share work, remind, and ask permissions from our roommates for a multitude of things. Idea of the app was to — at a glance provide all the information of a shared household — tasks, calendar, messages & weather!

Storyboards, Low fidelity Prototypes & Heurisitic Evaluations —

With the design idea selected, the next step was storyboarding — describe the steps from start to end, the goal a user would accomplish and the various phases till success.

Here is one of the storyboards I used in the design:

Tim is asking his roommates, before making plans to use a shared household resource

This storyboard made it clear the need to have a way to communicate and the need for a shared calendar.

Next step was building a paper prototype based on the storyboards. I created two prototypes, one for adding a task and assigning to a housemate and the other was to message housemates to seek permission to use a shared resources and create and event for same.

Next step was to evaluate our app using Neilsen’s 10 Usability Heuristics. I first performed a self-test to smoothen out the app and remove any dead ends. This was followed by an in-person evaluation, where a user interacted with our paper prototype while voicing their opinions. This opinions were later mapped against the 10 heuristics and a potential list of problems and their severity rating was assigned.

This was by far the most important step of the design process. At this stage, the ease to test your idea and design with your would-be customers in a cheap and efficient way was really helpful.

Digital Prototype —

Next step in the design process was to take all the design feedback and create a wireframe of the home screen of the app, the screen that provided all the information — at a glance.

Prototype testing —

After fleshing out all the other pages, prototype was tested by in-person and online evaluators. Based on the feedback of the in-person testing the designs were further tweaked.

In-person prototype testing

Final Product —

Finally, created the fleshed out interactive prototype using Invisionapp. Below is the final version of the prototype.

--

--