Designing for roommate chores
Bubble is a roommate chore app that simplifies responsibilities, fosters harmony, and effortlessly divides chores among college roommates in India’s hostels.
“For those seeking a hands-on visual experience, here’s the Figma link. Dive in and explore the design firsthand. Enjoy!”
Part 1: A Roommate Dilemma
In a brand new college hostel, I found myself sharing a room with two diverse roommates, Varun and Nishant. Varun was pursuing Biology, Nishant was studying Economics, and I was studying Philosophy. Our backgrounds and majors made us a unique trio, thanks to the college’s decision to mix things up.
Our room was adequately furnished, with an attached washroom. We had a bunk bed and a single bed, complemented by two wooden almirahs. Additionally, three steel almirahs were available for our belongings, along with two spacious study tables and chairs.
Right from the outset, we agreed to distribute the household chores fairly among ourselves. We noted down the rotation schedule on a piece of paper and affixed it to the side of one of the wooden almirahs. This way, each of us would know whose turn it was and who had performed the task last. However, we soon discovered the limitations of this paper-based system. Despite our efforts to manage, it became evident that Nishant had difficulty remembering his assigned chores. Even if we reminded him before he left for his classes, he would still forget. Consequently, our room started to accumulate dirt and mess, and we found ourselves investing significant energy in constantly reminding Nishant.
Part 2: Research and Design Process
As fate would have it, I received an assignment to design an app as part of my @10kdesigners cohort. It presented the perfect opportunity to address our roommate's chore problem. To tackle this challenge, I embarked on the design process.
My research journey began by dividing it into general research and user research. I defined the brief, identified the target audience, outlined the objectives, and explored different possibilities for the app’s features using the MSCW framework (Must Have, Should Have, Could Have, Will Not Have). To gain diverse perspectives, I interviewed friends using a set of thoughtfully crafted questions. 👇
After gathering insights, I moved on to moodboarding, drawing inspiration from existing apps like Chap, Google Calendar, Nipto, Home Tasker, Tody, and Sweepy, Flatastic. By analyzing their designs, I created an inspiration board featuring various visual styles.
With the research and inspiration gathered, I proceeded to develop the app’s information architecture. Although I made several adjustments along the way, I embraced the fluidity of the design process. As new ideas emerged during the design phase, I allowed them to flow freely, resulting in a dynamic and evolving architecture. I have attached the latest version of the architecture for reference.👇
After completing the moodboarding and finalizing the basic information architecture, I picked up pen and paper to create low-fidelity wireframes. While I am not an avid fan of wireframes, I believe in capturing the essence of crucial screens. By focusing on visual designs and iterating through digital wireframes, I found it easier and faster to incorporate changes. The design process allowed for seamless iterations, as I had a comprehensive understanding of the context, along with the convenience of copying and manipulating various elements.
Part 3: Visual Design
Visual design played a crucial role in making the app intuitive and visually appealing. I went through three iterations, constantly refining the user interface. On the home screen, I added personalized elements like the user’s name and an account icon for easy access to settings. I made a conscious decision to remove the bottom navigation bar, eliminating redundancy and providing a cleaner user experience.
To ensure users could quickly grasp their upcoming tasks, I prominently displayed them on the home screen. Each task card featured essential details such as the chore name, due date, and a brief description. Users could mark chores as in progress or completed directly from the card. The accordion design allowed for compact information display, expanding only when needed. A button provided easy access to view all tasks. with an add button at the bottom to add chores or a new bubble in their respective sections.
I incorporated bubbles, representing groups, with a dedicated section. Furthermore, I designed the “My Statistics” card, showcasing weekly statistics like completed chores, tasks in progress, and incomplete chores. Along with a section for the tasks showing all the tasks of the user with relevant information for action or planning.
Here’s the Figma link to the file if you want to explore all the screen designs.
Part 4: Typography, Color, and Spacing
To ensure a cohesive visual identity, I carefully selected typography, choosing DM Sans as the primary font and Product Sans exclusively for onboarding. These fonts offered readability and a modern aesthetic.
The colour palette featured shades of grey as secondary and tertiary backgrounds, with red for negative elements, yellow for warnings, green for positive feedback, and shades of blue as the primary accent colour. These choices aimed to create visual depth, evoke specific meanings, and foster a harmonious user experience.
For spacing, I adopted a mix of 4 and 8-grid systems with 20px spacing from the sides. This approach maintained consistency, accommodated curved screens, and ensured an aesthetically pleasing layout.
Part 5: Prototyping and Handoff
During the design process, I explored the realm of prototyping, creating an interactive model of the app. It was an exciting and fruitful experience that allowed me to refine the user experience further.
To facilitate a smooth handoff, I divided the project into different pages, ensuring clarity and avoiding confusion. Additionally, I designed error states and edge cases, considering various scenarios to ensure a comprehensive user experience.
And that concludes our case study! It was an exciting journey, starting from a simple roommate problem to designing a solution-oriented app. Through thorough research, thoughtful design decisions, and iterative processes, I tried to create an app that would enhance the living experience for roommates everywhere. With a focus on user-centric design, the app can solve chore management problems and finally, roommates can live peacefully 😄.
The key was to design not just around aesthetics but to do so to help solve problems and improve people’s lives. And I think the app will do a good job in that.
Thank you for reading till the end also, feel free to reach out to me on Twitter or LinkedIn for any feedback or discussions!
