COLAB10 - CHROME EXTENSION

Take Care

Take Care is a chrome extension that helps manage burnout through self-reflection.

Problem Background  

Burnout at work has become a massive problem during the pandemic. At 40%, burnout is the most cited reason for people leaving their jobs across many industries. Although there are many mindfulness tools in the USD 1.1 billon market, there is a lack of tools that integrate into our busy workdays.

Our user discovery focused on those with the highest burnout rates, users working in Social Services. Interviews showed our users are interested in new tools to help manage their burnout.

Particularly, All 4 users were interested in self-reflection as a way to stay grounded and grateful. They try to practice self-reflection already but want to do so more consistently. Users are aware they need to take care of their mental health but their demanding work can often supersede their own needs. 

Take Care’s vision is to empower our users to reduce and manage burnout through mindful practices. Reducing burnout will better their work-life balance, productivity, and allow our users to better serve their communities. 

Research Insights & User Pain Points

Key Pain Points

  • Stressful and varied days make it hard to self-reflect consistently
  • Current solutions are not geared for self-reflection
  • Precious time is lost when reflection is not guided

Feedback

Explanation of the Solution

We created a chrome extension with social workers in mind. Social workers can download Take Care, a chrome extension to their work web browser, and receive mindful statements throughout their busy day. 

The key features users can expect from our chrome extension are:

  1. They can like or share a statement with their social circle. 
  2. If they need to stop receiving statements throughout the day, they can toggle the slider off. 
  3. When they are ready to resume statements again, they can toggle the slider back on.

Lofi & Hifi Mockups

Iterative Design Learnings

Not only did I have our users in mind while thinking through every step of this extension, I had to take feasibility into consideration. I wasn’t working in a silo for this project. When I presented my idea for an all settings button in the chrome pop-up to store the liked statements on its own page, my internal stakeholders, the developers suggested I scale back my solution and design the settings in the popup with a toggle for feasibility reasons. 

Additionally, I used icons that would be familiar to our users so usability testing wasn’t crucial at this early stage of development. Instead, we chose to product validate and determine if we we’re meeting our users needs. Understanding that 90% of users successfully liked and shared statements ensured me that I could continue to run with my designs.     

Implementation Details 

Technical implementation

Where is it hosted?

  • The goal is to publish it in Google Web Store

What is your tech stack?

  • React
  • Firebase
  • Material UI
  • Chrome

High level journey of a request

  • User downloads extension
  • A call to firebase is initiated
  • Firebase returns the prompts
  • React fetches the prompts and displays it on the DOM
  • User receives notification from browser

Technical challenges

What was the hardest part of development?

  • One of the challenges was getting chrome notification set up to display prompts throughout the day
  • Converting to React

Does your app have any scaling issues?

  • We need to expand our prompts

What are some key takeaways?

  • Chrome’s API has extensive documentation
  • Determining how to interact with the browser actions was more difficult than we anticipated
  • React or Vanilla JS?
  • You really need a team to develop a product

Future Steps

As we complete our product and launch to the chrome store, we look to gain further insights from active users. We hope to use key insights to further iterate on our product to serve our users in further iterations. We have our further features, such as a resource newsfeed and an activity suggested on standby till then. 

Learnings

Product Manager Learnings:

Alam Zia

  • Communication is key! It is helpful to use agile practices to create visibility
  • Trust each function to perform their responsibilities
  • Keep users in the loop throughout development

Designer Learnings:

Melissa Reyna

  • Talking feasibility with developers early and often
  • How critical it is to design with the users in mind during all iterations
  • Most of all, how to work efficiently with a team and quickly problem-solve through all of the hiccups 

Designer Learnings:

Jo Sturdivant

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

Sara Amiri

  • As a bootcamp graduate where I only collaborated with other devs, it is very nice to experience working with a PM and a designer, see how they would approach an issue, and see development from their perspective. 

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:

Ghameerah McCullers

&

Developer Learnings:

Maurquise Williams

&

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

  • Building Take Care allowed us to understand how a cross-functional team works together. We were able to learn about each other's domains, processes, and how each function interacts with one another.