Break Buddy

Product Experience

Problem Space 

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

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:

1. 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.
   
   
2. 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

1. 100% success in each task
2. 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)
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