Web Development Project
UC San Diego (COGS 120 – Interaction Design Course)
Scope: Project Management, User Research, UI/UX, Testing, Full-Stack Development
Timeline: 3 months (January to March 2018)
As part of an Interaction Design course at UC San Diego, I worked with a team of three to define, research, design, and develop a mobile web app. Through this 10-week course, our team learned the principles of product development, product design, and web development.
Our application, called Common Ground, aimed at helping college students and young adults in difficult conversations around living situations. I was primarily responsible for designing the user interface for our application, product discovery efforts, feature scope prioritization, and managing development timelines. I also contributed to research, testing, and deployment efforts.
At the end of the course, we presented our app to an industry panel. Our team won 1st Place in the category of Most Innovative App.
"My roommate never cleans up the sink after they brush their teeth. I would bring it up, but it's such a small issue, and I don't know what to say."
Many college students and young adults living with roommates or housemates may encounter small problems between themselves. However, many do not know how to approach the topic, and instead of addressing the problems right away, they let these problems incubate for a while before addressing them.
Need-Finding and Research
The first step of our design process was to conduct need-finding to understand our target audience and observe breakdowns. We needed to identify clear and non-trivial problems that our target audience experienced. We started by conducting interviews and asking open-ended questions, such as:
• What do you like about your college roommate experience? What don't you like about your college roommate experience?
• Tell me about the biggest hurdle of your college living experience. What made it a hurdle?
We looked to three popular apps used by members of our target user base, and pulled inspiration from these three apps. For instance, we liked the clean design format used by Airbnb, the card-like tips in Robinhood, and the simplistic form process in Credit Karma. We wanted to bring these elements and consciously use them to inform our design decisions and information architecture.
To summarize our need-finding and to build a better story of our users, we created a series of storyboards. These three storyboards captured the user's journey and experience through three separate roommate-related issues.
Our team started our designs at low-fidelity with paper prototypes. This helped us reduce the overhead with redesigning at a more expensive and higher stage of fidelity.
In our paper prototypes, we visualized our application in its simples form. After we created our paper prototypes, we conducted multiple heuristic evaluations to gather qualitative feedback from our users.
Our team conducted a number of qualitative heuristic evaluations, according to Neilsen's 10 Design Heuristics. We used Neilsen's Heuristics as a framework to guide our conversations with students to gather feedback that could be directly used to improve our designs.
In addition to the heuristic evaluations we conducted, we also wanted to gather data to support our design decisions. In our heuristic evaluations, we found certain interactions where the user experienced something other than what we had anticipated. In those situations, we turned to A/B testing through Google Analytics. We relied primarily on quantitative testing when our own design intuition was not enough to produce the optimal user experience.
Final Designs and Results
Ultimately, our team was able to design and fully develop our app. We presented our completed app to an industry panel and an audience of 500 people. Against nearly 100 other teams, our team won 1st Place in the category of "Most Innovative App."