COLAB12 - WEB APP | Breakful | Co.Lab Portfolio

Problem Discovery

COVID-19 has severely altered the way employees and students work. In particular, working from home seems to be the new norm. Although this style of working has its benefits, there are a few downsides to this such as burnout, lack of community, and lack of motivation. A problem we have seen is the lack of breaks people take during their work day and the feeling of exhaustion afterwards.

This could be partly due to the fact that working in an office creates a separation between your personal life and work life. Also, there are usually established parameters for break times. However, at home, the lines between your work and personal life get blurred. We suspected that people are not taking enough breaks at home, or their “breaks” are not very restful.

User Pain Points and Feedback

While conducting our own user research, we found that more than 60% of people working from home struggled with time management - they find that they are “rushing” to get back to work while on breaks, and thus don’t take restful breaks. Not having “breakful” breaks can result in numerous problems such as burnout, declines in mental health and physical health, and decreased productivity.

The problem now is that there is not an effective solution that promotes taking breaks while taking into account people’s work schedule. This is a problem because people feel rushed during their breaks, unsure of when their next meeting is or if they have unfinished work.

Solution

Our solution to the problem is a website where users can schedule breaks into their google calendar. The three main features in our product are:

The ability to connect to your google calendar and schedule breaks directly on your calendar
Users will be notified of when it is time for their break and have a timer to indicate the amount of break time left
Users are able to choose what they want to do during their break and will be provided content to watch depending on their choice of activity

Lofi’s & Hifi’s

Landing page

Choose time for the break

Choose content for the break

Confirm the break

Break notification

Design Learnings

Be reliable and flexible when working with developers and managers
Always focus on the main goal, remember to make the solutions based on the research, not intuition
Coordinate with developers with feasibility at early stage of design, and be flexible to adjust design in different iterations
Provide clear design system (color pattern, iconology, fonr) for developers

Implementation Details

Tech Stack Used

React
Redux Toolkit
ExpressJS
SCSS
Bootstrap
Material UI

Technical Tradeoffs

For the sake of some components implementation and time, we decided to switch Breakful Breaks to a website instead of building a Chrome extension as planned originally.

‍Future Steps

Our time at Co.Lab has been such a unique experience. We were able to foster new connections with each other, learn new skills on developing products, and refining skills necessary to thrive in our careers. We will not be continuing this project but we hope to take what we’ve learned in this program and apply it to our future careers!

Learnings

Product Manager Learnings:

Cathy Xie

It’s important to remain flexible. I learned that it’s not always possible to complete certain things at a certain time, especially if it’s complex. The important thing is learning how to pivot and strategize moving forward.
I learned that understanding my team’s communication styles and motivations were extremely important. It helps the team function better and helps everyone feel and do their best.
It’s so important to be open to learning new things and admitting that you don’t know it all. I don't have a background in tech and I try to be a sponge when learning new things - whether it’d be listening to developers or designers. It helps me be a better communicator and PM.

Designer Learnings:

Sunny Can Sun

In agile working, we need to stay on track, as well as being flexible. Road map is useful for tracking time and progress.
Hands off experience with developers. I learned how to discuss with developers about usability and feasibility about the project, as well as iterations based on time and tech limit.
Always focus on the main goal, which is based on research plan, not intuition.

Developer Learnings:

Beatriz Ferreira

Communication is really the key. Don’t be afraid to ask for help or clarifications related to the project. There’s no such thing as “dumb question”. Be empathetic and open to learn new things.
Collaborating with a product manager and a designer gave me the opportunity to learn how to develop a reliable product based purely on user research and teamwork. It definitely helped me to be a better developer getting to cooperate with people beyond my dev team.
Adaptability is paramount because time does fly and changes happen all the time. Stay on track, stay flexible and keep focusing on the main goal.

Developers Learnings:

Ernesto Gonzalez

&

It is okay to err. We are all human, we have to understand that other people err just like we do and that is okay. We can learn from one’s own errors and from other’s errors.
Working with people who are not familiar with technical terms, in my case, a product manager and a designer, allowed me to better my communication skills. It is important to communicate technical issues in such a way that it is understood by the general public, aka, people who are not familiar with the software development technicalities (ex./ databases, queries, APIs, etc.).
Listening to others, not only the people we interviewed but the rest of the teams helps a lot at the time of making a technical decision. Asking as many questions as I can allows me to have a more solid idea of the final product and allows me to predict more accurately the tools, functions, and structures that we are going to need in the final product.

Full Team Learning

As a team, we recognized the importance of working together. This includes empathy, radical transparency and communication. Going into the program, we all came from different backgrounds and this program put us to the test on whether four very different individuals could work effectively together and create a product - as a team. At the end of Co.Lab, the skill of being able to communicate and work cohesively will be an important skill for all of us to continue developing.