Imagine yourself searching for information for any question or problem you are thinking about. Figuring out how Jira works, looking for a job, and studying by watching tutorials. You may need help with the tabs you opened quickly to access multiple resources and lose focus on your work.

Our team explored a problem in people’s productivity in managing multiple tabs. How can we help users browse information, positively impacting their time management?

Problem Background

In a digital world of remote working and studying, it’s normal to open multiple tabs from articles and presentations shared by colleagues, friends, and family. By the end of the day, a person feels tired from looking at the computer screen for 5-8 hours daily.

At the same time, the Psychology Behind Opening So Many Tabs article refers to a Consultant Clinical Psychologist at The Summit Clinic who says that our computers/phones have now become an extension of our brain. The research team at Carnegie Mellon University completed a study on tab overload, which showed that people feel invested in the tabs they have open. They feel ashamed and overwhelmed by how many tabs they have open. In addition, while multitasking and paying attention to multiple tabs, the human brain allocates less power to each tab or task.

Our research included various jobs where users use tabs. We noticed a tendency in two scenarios: users who don’t mind trying a new tool and users who want to use a tab management tool. This clarified a perspective of productivity and frustration in time management.

Research Insights

To dive deeper into the problem Maria ran 3 user interviews to identify user pain points. One of the users, who works in the tech industry and spends on average 6-8 hours on a screen, shared that she gets lost in tabs and sometimes doesn’t know where she stopped reading,

‍“While working on a new project or completing the previous task, I need multiple tabs that relate to each other, such as a pipeline in CRM and a few workflows, for example. When switching between tabs, I found myself having three of the same tabs open at once. This was an indication for me that I overworked.”

However, the problem space can be vast depending on personal preferences. Lisa created a survey to provide the team with concrete data points. The results showed that the users were split into two groups: students and full-time employed individuals. Out of 48 responses, 39.1% of users spend on average 9-12 hours on a screen while almost the same percentage (32.6%) spend 5-8 hours. More than half of users feel somewhat productive. The feedback we received helped Maria to identify two user personas: a user who needs a tool and a user who doesn’t mind trying a new one.

Solution Explanation

What led us to a solution was that the surveyed audience uses Google Chrome as a primary browser. From here Manas and Mudassir suggested building an extension for users with a Google account and those who need to create an account in the extension itself.

From the beginning, we knew we needed to focus on core features such as:

Login functionality using a Google account
Tab visibility on a main screen
Organizing tabs into folders
Use Analytics to set time limits on tabs

Lo-fi & Hi-fi Mockups

Iterative Design Learnings

We ran a usability test with 3 users and found that there was confusion on grouping the tabs into folders. This informed us that we need to update the Instructions page or do an onboarding tutorial to make it more clear to the user on how to put tabs into the different folders. However, they completed the other tasks like navigating to a tab and deleting a tab easily.

We would like to test with more users to get even more recurring feedback that can help shape our product.

Implementation Details

Technical implementation:

Where is it hosted?

Chrome Web Store (Under Verification), Vercel, Render

What is your tech stack?

MongoDb, Express, React, NodeJs, NextJs

High level journey of a request:

Conceptualization and Ideation: Identify user needs and brainstorm ideas for the extension.
Design and Prototyping: Create wireframes and prototypes to visualize the user interface. Development kick-off.
Plan the project: Backend and Frontend Development. Develop server-side components using Node.js and Express.js. Create the user interface with React, Next.js, and TypeScript.
Testing and QA: Conduct testing to ensure stability and performance. Deployment and Launch. Prepare for deployment to the Chrome Web Store and execute a launch plan.
User Feedback: Monitor user adoption and gather feedback for future improvements. Post-Launch Maintenance

Technical challenges

Setting Time Limits for Specific Domains:

> Tracking user activity on specific domains accurately

Handling interruptions and ensuring a smooth user experience.
Implementing this securely and efficiently, dealing with browser APIs
Collecting and Displaying Time Usage with Pie Charts:

> Accurate time tracking for each saved tab.

Designing an intuitive and visually appealing pie chart interface.
Handling various technical complexities and edge cases.

While we have made significant efforts to address potential edge cases and scalability issues, it's important to acknowledge that like any software, there might still be a few small bugs that could emerge. We are committed to continuous improvement and quick resolution of any issues that may arise.

Key takeaways

Team Collaboration: Effective teamwork between developers, product manager, and designer.

Tech Skills: Gained expertise in React, Next.js, TypeScript, Node.js, Express, and MongoDB.

User Focus: Prioritised user feedback and research.

Iterative Development: Frequent testing and improvement.

Maintenance Commitment: Continued maintenance and prompt bug resolution.

Learnings

Product Manager Learnings:

Maria Dmitrieva

I learned how to apply key product management principles and agile methodology.
I learned how technical feasibility can impact ideas and final results.
I learned how to run user research and usability testing.

Designer Learnings:

Lisa Weng

I learned the importance of sharing designs with developers earlier to get their feedback on the feasibility of a feature.
I learned how to brush up on my usability testing skills.
I learned to create a mini design system to keep the product consistent.

Developer Learnings:

Manas Verma

Frontend Experience

I gained hands-on experience with React, Next.js, and TypeScript for frontend development.
Introduced TypeScript for improved code quality and bug prevention.

Backend Development:

Developed the backend server using Node.js, Express, and MongoDB.
Implemented authentication and authorization for data security.

Collaboration and Problem-Solving:

Collaborated closely with the product manager and designer on feature discussions.
Worked closely with the frontend developer to ensure seamless integration.

Version Control and Teamwork:

Proficiently used Git and GitHub for version control.
Coordinated efforts to meet project goals and deadlines.

Adaptability and Continuous Learning:

Embraced a growth mindset, adapting to both frontend and backend tasks.
Committed to ongoing learning and skill improvement.

Developers Learnings:

Mudassir Khan

&

Cross-functional Collaboration: Working alongside a product manager and product designer provided valuable exposure to a collaborative team environment. Learning to effectively communicate and align design, development, and product goals was crucial.
Full Stack Exposure: While primarily a Frontend Developer, the project's nature allowed for the exploration of backend technologies like MongoDB and Express. This broadened your skill set and provided a more holistic view of web development.
Chrome Extension Development: Building Tabstacker as a Chrome Extension involved understanding the intricacies of browser-based applications. This experience now adds a unique skill set to your profile.
ReactJS Mastery: Developing the front end with ReactJS solidified your expertise in this widely-used library, enabling you to create responsive, dynamic, and efficient user interfaces.
Tailwind CSS Proficiency: Utilising Tailwind CSS for styling not only expedited the design process but also improved your knowledge of utility-first CSS frameworks.
Real-world Project Experience: Tabstacker provided hands-on experience in developing a real-world software product from ideation to deployment, enhancing your problem-solving and project management skills.
User Experience Focus: Collaborating closely with a product designer honed your ability to prioritize user experience (UX) in development, ensuring the final product meets user needs effectively.
Adaptability: Switching between frontend and backend tasks showcased your adaptability and willingness to learn new technologies and concepts.

Full Team Learning

We learned how to cross-collaborate with each other, considering different time zones and the variety of work and study experiences each of us has.