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. 

Team 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 

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's Learnings:

Ghameerah McCullers

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.