COLAB32 - Mobile App

Nook

Discover, create, and share spaces that truly feel like home.

Problem Background  

In today’s digital world, interior design enthusiasts are overwhelmed with choices. With countless home decor ideas, tips, and inspiration available online, it seems like there’s no end to the creativity at our fingertips. But that abundance can quickly become overwhelming. Sifting through an endless stream of content can make it hard for people to find the ideas that truly speak to their personal style. The real challenge isn’t the lack of inspiration—it’s finding a way to cut through the noise. Imagine a platform that effortlessly curates home decor ideas, guiding users to discover the perfect balance between creativity and simplicity. This would allow them to design spaces that truly reflect their unique tastes, without the stress of endless scrolling or decision fatigue.

Problem Space 

How might we make it easier for homeowners and interior design enthusiasts to discover and share curated home decor ideas, so they can create personalised spaces without feeling overwhelmed by endless online options?

Research Insights

Methodologies:

We conducted research through both surveys and user interviews, gathering 14 survey responses and conducting one in-depth user interview to support our findings.

User Pain Points
  • We identified various painpoints of our users through surveys and user interviews. Our research insights shows that users value the ability to save, share, and create content but feel that existing platforms lack sufficient personalization features and a focus on home decor specific content.
  • There is a desire for community-driven features, such as the ability to engage with others and participate in activities like item swaps, garage sales, estate sales etc.
  • Users often find it difficult to define their style and translate that into a cohesive design plan using current tools

Feedback

Our user research aimed to understand the behaviours and needs of home decor enthusiasts, specifically how they search for and curate decor ideas. We gathered insights from 14 survey respondents and one in-depth user interview. Among the participants, a significant majority expressed a desire for more personalised and community-driven features, particularly those who frequently use platforms like Instagram and Pinterest.

Key pain points identified included feeling overwhelmed by the abundance of repetitive content and struggling to define specific styles. For example, 70% of survey respondents noted they often find similar ideas across different platforms, leading to frustration. Additionally, users emphasised the importance of quality and visual inspiration in their decision-making processes, with 80% indicating they seek tools for creating personalised mock-ups and layouts.

These findings highlight a market gap for a platform that offers unique, eclectic decor suggestions, advanced mock-up tools, and community engagement features, differentiating it from existing options.

Solution Explanation

User Challenge: Our users struggle with curating personalized home decor ideas due to content overwhelm and a lack of inspiration that aligns with their individual style.

Our Solution: A platform that integrates key features to address these challenges, providing users with:

  • Personalised style quizzes: Helps users define their unique style from the start.
  • Advanced search filters: Allows users to quickly find decor ideas that match their preferences.
  • Mood board creation: Users can save, curate, and organize ideas they like, helping them visualize their style in one place.
  • Community-based features: Users can share, like, and comment on each other’s ideas, fostering a supportive network of like-minded enthusiasts.
  • Mock-up tools: Enables users to create and test decor combinations in a visual, interactive way.

Value Proposition: By offering a more tailored, user-centered experience, our platform simplifies the process of home decor curation, providing a focused, personalized solution that stands out from existing platforms.

Low-Fi Sketches: Figma Link

Mid-Fi Wireframes: Figma Link

Hi-Fi Wireframes: Figma Link

Iterative Design Learnings

Positive Feedback:

  • The app was very easy to use, intuitive, and user-friendly.
  • Users loved that mood boards were accessible immediately upon sign-up.
  • The design was aesthetically pleasing, with great colors that were nice to look at.
  • Users appreciated the app’s simplicity and how it wasn’t overwhelming, unlike other social apps.
  • The ability to customize mood boards and content was a favorite feature.
  • Several users expressed they wished it was a real app due to the fun and easy experience.

Constructive Feedback:

  • Auto-populate information during sign-up, similar to how phones suggest email addresses.
  • Allow users to create a new board without needing to save content first.
  • Clarify with labels which color indicates that a mood board is set to "secret."
  • Add functionality for users to take notes on saved content.
  • Implement a way to filter which content to follow from a user (e.g., mood boards vs. bulletins).
  • Ensure the sign-up button remains inactive until an email is entered.

Implementation Details 

Where is it hosted? 
  • For development and local testing purposes, the Django backend runs on a local development server at http://127.0.0.1:8000, supported by Postman API test calls. The frontend is served via a local development server at http://localhost:3000. For live hosting, the application was deployed on Netlify, but as of the last update, there were rendering issues that remain unresolved.

What is your tech stack?

• Backend Framework: Django (Python)

• Frontend Framework: React (TypeScript)

• CSS: Custom styling (no specific CSS framework)

• Database: MySQL

• Hosting/Deployment: Netlify (frontend), local development server (backend)

• API Testing: Postman

• Version Control: Git/GitHub

• Django Admin Interface: For managing data and user roles during development.

• Firebase: Used for user authentication, specifically for managing users’ login and signup processes.

High level journey of a request

1. User Interaction: The user interacts with the moodboard by adding, removing, or editing content like images or profile updates. For example, they may upload a new decor photo, remove an old one, or update the title of the moodboard.

2. Frontend HTTP Request: The frontend initiates an HTTP request to the backend using fetch or a similar method. This request is sent when the user performs actions like adding an image to the moodboard or editing the content. Example endpoints might be /add-to-moodboard/ or /update-moodboard/.

3. Backend Processing: The Django backend receives the HTTP request at a specific endpoint (e.g., add_to_moodboard(), update_moodboard()). The backend processes the request, validating the input, and then interacts with the MySQL database to save or update the moodboard entry or images associated with it.

4. Database Interaction: Django’s ORM interacts with the MySQL database. It retrieves or modifies the mood board-related data, such as adding new images or modifying existing user selections or content updates.

5. Response to Frontend: The backend sends a JSON response back to the frontend. The response typically contains information about the success or failure of the operation, and in some cases, includes the updated moodboard data (e.g., { "status": "success", "updated_moodboard": [...] }).

6. Frontend UI Update: Upon receiving the response from the backend, the frontend updates the UI accordingly. This could involve showing the new or updated images on the moodboard, updating the moodboard’s title, or reflecting other changes made by the user.

Moodboard Technology Choices:

• Django:The backend logic for handling moodboard interactions is implemented in Django views, which process the HTTP requests, interact with the database, and send responses back to the frontend.

• Django’s ORM handles all database operations, ensuring efficient interaction with the MySQL database.

• React (TypeScript): The frontend uses React with TypeScript to provide an interactive user interface for the moodboard. Users can upload images, organize content, and edit the moodboard’s structure in real time. TypeScript is used to ensure type safety when managing complex data, like user inputs or image uploads, making the development process more reliable and less error-prone. This flow ensures a seamless user experience for interacting with moodboards on the platform, with robust backend processing and efficient database management.

Technical Challenges:
  • User Authentication: The hardest part of development was implementing user authentication using Firebase and ensuring its proper integration with Django’s user model and views.
  • Data Consistency: Keeping the frontend and backend in sync, especially when handling real-time actions such as likes, comments, shares, and saves, presented challenges. Ensuring that the data remained consistent between the two was a key difficulty.
  • Scaling Issues: Server Load: The current setup is geared towards development. For production, the app would need a more robust hosting solution, including load balancing and caching, to handle high traffic and avoid server overload.

Key Takeaways
  • API Contracts: A clear understanding of API contracts between the frontend and backend is crucial to ensuring smooth integration and consistent behavior across the application. There was some uncertainty between both teams about how the API interactions should be implemented, which slowed down the process.

Future Steps

Although we aren't continuing this project, we are excited about the MVP we were able to produce. If we did continue the project, these would be our next features to focus on: 

  • Develop a Style Quiz to help new users identify and define their personal style.
  • Design and implement the content upload feature, allowing users to select and customize the type of content they share.
  • Enhance user interactions by enabling liking, sharing, and commenting on posts.
  • Design the flow for profile customization and improve access to notifications for a seamless user experience.

Learnings

Product Manager Learnings:

Zainab Jibril-Babaita

I learned the importance of balancing user needs with technical feasibility while ensuring clear communication across cross-functional teams. Working closely with a cross functional team allowed me to streamline decision-making, prioritize core features, and manage scope effectively. I also gained hands-on experience in user research, translating insights into actionable product features that resonate with our target audience. Additionally, I led the team in navigating conflicts, clearing blockers, and helping them identify where they needed support, fostering a productive and collaborative environment.

Designer Learnings:

Jo Sturdivant

During the program, I learned how vertical agile sprints, compared to the more rigid waterfall approach, fostered continuous iteration and feedback, improving our design process. I gained valuable experience working cross-functionally with teams, understanding the importance of flexibility, and descoping features to deliver an MVP efficiently. Remaining adaptable and prioritizing key features allowed us to meet deadlines while maintaining focus on the product's core functionality.

Developer Learnings:

Kseniia Rostovskaia

Through this program, I strengthened my knowledge in several areas of front-end development. I enhanced my ability to integrate APIs into React applications, focusing on thorough testing at every stage to ensure smooth data retrieval and display on the front end. I also improved the front-end code structure by learning how to separate responsibilities between components, which increased scalability and highlighted the importance of load balancing and caching mechanisms to manage performance and server load. Lastly, clear communication with the back-end team was key in improving API agreements, reducing errors, and introducing more efficient testing and debugging approaches to streamline the integration process.

Developers Learnings:

Nicole Frische

&

I learned the importance of knowing when to ask for assistance and to get over predisposed nervousness about it. I also learned various backend tools such as Django, Firebase, etc. which I previously hadn’t had much retained knowledge of.

Full Team Learning

As a team, we recognized the importance of balancing user needs with technical feasibility while ensuring effective communication across cross-functional teams. Throughout the project, we gained valuable experience working in agile sprints, which enabled us to iterate continuously and adapt to feedback, fostering a dynamic design and development process. By prioritizing key features and remaining flexible with descoping, we successfully delivered a minimum viable product (MVP) that resonated with our target audience while meeting project deadlines. We also emphasized the significance of maintaining clear communication, particularly in asynchronous work environments.

Following a retrospective, we addressed communication challenges that had arisen, resulting in a more productive and cohesive workflow. This improvement streamlined decision-making, enhanced collaboration, and ensured that all team members were aligned on their responsibilities. Furthermore, the technical aspects of our project allowed us to refine our skills in API integration, backend tools, front-end scalability, and optimizing the development stack to avoid unnecessary complexity. Ultimately, these insights enabled us to deliver a more robust and scalable product.