Our team's personal experiences drove the creation of Break Buddy. We have faced unique work situations and personal challenges, including mothers juggling remote work while taking care of families at home, a young father managing a demanding job in the hospitality industry, and a team member recovering from burnout on sick leave from their job in the Emergency Room. We noticed a blind spot in existing platforms, such as Focusmate.com, which is a platform for finding a work accountability buddy. Instead of being on a video call together silently working, we wanted the users to experience our app in a more social and fun way.

Problem Background

Not all breaks are equal; some, like doom scrolling or zoning out, are more about coping with your current situation, particularly for a large segment of remote workers who have stopped taking breaks since the pandemic. This is due to blurred work-life boundaries, the lack of physical workspace cues, and pressure to prioritize work.

Being present and mindful of what you're doing is a genuine way to detach from work or other obligations. This understanding guided our team as we developed our product.

Break Buddy, a social platform for remote workers, can help. It lets users schedule breaks with various activities to improve well-being, set work-life boundaries, and practice mindfulness. Plus, it offers built-in accountability through social connections, boosting productivity and well-being.

Research Insights

Pain points

From our 2 surveys and user interviews (with 4 remote workers), we have found the following pain points:

Remote workers missed office social events, camaraderie and collaboration with colleagues the most
They were not able to separate their work and life because, at home, there were distractions and demands that they would normally not have in the office
They experience some bodily aches and pains due to their work environment (sitting too long) and not leaving their desk
They wanted to step away from their computer and have more in-person meet-ups

Forms response chart. Question title: What do you miss most about working at an office?. Number of responses: 21 responses.

Feedback

User feedback refined our target audience to all workers seeking breaks, as they preferred to detach from work. This shifted our focus from breaks with co-workers to breaks for anyone. Additionally, users expressed a need for balance between solitude and social interaction during breaks.

Solution Explanation

How about we help workers take social breaks together so that people who work from home are motivated to take breaks?

We have focused on the following user stories:

As a user, I want to be able to create a post that will show when I take a break, the duration of my break and my intended activity so that other people, new or familiar can join me because it would be nice to meet new people and not have all my conversations of the day be all about work.
As a user, I want to see when others are taking a break, the duration and which activity they will partake in and have the option to join them because I would like to be more social and feel more inspired (to engage in hobbies and self-care) on my breaks.

Lofi & Hifi Mockups

Exploration for different dashboard layouts depending on developer feasibility - We pivoted from Dashboard 5 to 4

Explore the Prototype‍

Feature Prioritization

We identified problems and solutions for each user goal, prioritizing them by impact and effort. Here's an example.

Iterative Design Learnings

Usability Test Objectives

We wanted to make creating and booking breaks easy and smooth for users. Additionally, we sought feedback on the landing page, product idea, style, and copy, as well as, which term users would associate most with "close personal network."

Usability Test Results

6 Participants

100% success in each task
80% rated each task as 1 (easy): users gave the most feedback about the Landing page (their impression) and for creating a break post (they were rated 2 or 3)
Confusions were in regards to copy and CTAs (so we changed the wording on some)

User Feedback

Users had the most comments about meeting people without knowing more about them, gender inclusivity, meeting strangers instead of friends, and wanting more information about activities and past breaks.

Originally, we wanted to have the user’s calendar integrated but usability tests showed that being able to invite a friend to take a break with, might be more of a priority.

Implementation Details

Technical implementation

Where is it hosted?

https://break-buddy-react.vercel.app/

We utilized Vercel as the hosting platform for our live Break Buddy product. You can now explore our collaborative creation here at Co.Lab.

What is your tech stack?

Frontend

Our web application, Break Buddy, was crafted in Figma by our designer. We brought it to life using HTML and Tailwind CSS to create an engaging user experience.

Code Editor

We utilized Visual Studio Code to create all our development pages using React, Tailwind CSS, and JavaScript.

Platform

We used GitHub to store files from Visual Studio Code. When creating a new page, developers discussed it before merging it into our main repository. All issues related to our web app were logged on GitHub, where developers used labels to identify bugs. This process helped us know what needed to be changed or updated.

Backend

The developers crafted Break Buddy in Visual Studio Code using React and JavaScript, while Firebase was utilized to store user data information when they signed in and joined Break Buddy.

Server-Side Operation

We employed a video SDK, enabling each user to utilize our video platform to connect with their Break Buddy and join the session they booked

Here is a screen capture demonstrating how issues were created using GitHub

Here is a screen capture demonstrating how we can observe user authentication with Firebase.

Here is a screen capture demonstrating how we can view meetings that are set up using Video SDK.

High-level journey of a request

Below are visuals of user flows created by our designer. It helps developers understand how different pages connect and visualize the high-level journey of our web application.

Technical challenges

What was the hardest part of development?

Learn how to code out the video SDK as the token was not working.
Knowing what was within our scope like the interactive c

Does your app have any scaling issues?

Padding issues occur when resizing the screen, especially noticeable when comparing the desktop and mobile views of our website development.

What are some key takeaways?

A key lesson from this project was the importance of scalability and performance optimization. By designing our system with scalability in mind and continuously monitoring and optimizing our code and infrastructure, we ensured our application remained fast and responsive as our user base grew.

Collaboration and communication were also crucial. We worked closely as a team to overcome challenges and make decisions impacting the application's architecture and performance.

Future Steps

We will not be continuing the project; however, if we ever decide to resume work on this product, we would like to integrate a video platform where users can communicate and see each other.

Additionally, we plan to add a feature displaying the user's calendar to show their appointments for the day and/or the next day. We are also considering the development of a mobile app for our product, as we currently only have the web application for our MVP.

Images

Learnings

Product Manager Learnings:

Antoinette Okai-Koi

I aim to present an overview of my experience, emphasizing effective product lifecycle management through strategic planning, consistent follow-through, and a user-focused, analytical approach. My strengths include communication, team charisma, and relationship-building. Our team has achieved efficiency and adapted to technical changes in a fast-paced digital environment, shaping my leadership style to emphasize diverse team dynamics and mentorship. I value relationship-building and creating user-backed products.

Designer Learnings:

Loisel Wilson

The most valuable lesson I learned is how to prioritize. Both in the product and the needs of all stakeholders. I’ve learned to value time, effort and resources, to realize what is relevant to present and to better help all involved to understand the process and the goals of the user. Knowing how to communicate this information to create a cohesive environment of shared knowledge, especially in supporting the developers has been my biggest takeaway.

Designer Learnings:

Jo Sturdivant

Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.

Developer Learnings:

Constance Dubose

At Co.Lab, collaboration is ingrained in our culture, and I've thrived in this environment where we pursue common goals and celebrate successes. Embracing diverse viewpoints, our teamwork encourages open dialogue, allowing for both agreement and disagreement, which in turns into learning opportunities. While maintaining focus is essential, we also recognize the importance of flexibility when circumstances change.

Developer Learnings:

Vanady Beard

&

As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.

Developer Learnings:

Stephen Asiedu

&

As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.

Developer Learnings:

Jose Laurito

&

For my second time joining CoLab, I initially believed I knew everything from the first cohort, but as it turns out, there were still many things I had not learned. I can confidently say that my coding skills and time management have improved even more the second time around. I learned the importance of valuing other teammates' opinions to collectively make crucial decisions for the team. Moreover, I have acquired the skills to work and communicate effectively in an asynchronous environment.

Developer Learnings:

Maurquise Williams

&

Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.

Developer Learnings:

Jeremiah Williams

&

All in all this experience was very awesome I learned that in coding with others being transparent is key

Developers Learnings:

Justin Farley

&

I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.

Full Team Learning

As the Break Buddy team, we've learned that teamwork, communication, and flexibility are essential for success.