| MindMemo is a progressive web browser extension that helps keep saved content top of mind. With MindMemo, users create memos to save valuable content, set reminders, and receive calendar notifications.

“The real value is not in saving it, it’s actually using it.”

Problem Scenario

You are sitting on the couch at home, scrolling through a feed on your computer when you stumble upon an article about a topic you’ve been eager to learn. It’s too important to skim, too relaxing on the couch to be productive, and now your phone is ringing. You use a bookmark to save the article, temporarily. You plan to read it right after your phone call.

Right after your phone call, it slips your mind; you start a load of laundry.

The web is an endless source of digital content. Regardless of how it is discovered -by happenstance, on purpose, or from others- saving content is essential to make it more accessible later. Using bookmarks, pins, curated lists, or third-party apps are common practice to keep saved content organized. However, saved content is frequently forgotten or overlooked and in time, loses its value.

“How can we help users remember valuable online content so they can easily revisit the saved content?”

Research

To begin, we distributed a user survey to learn how users engage with the digital content they save for later. We focused on discovering the type of content users save, how they save it, and why.

From our 50 responses, we discovered that digital content is saved at various frequencies, most often due to time constraints or its required level of concentration.

Forms response chart. Question title: What influences your decision to save digital content for later?. Number of responses: 50 responses.

Regardless of the type of content: social media posts, how-to’s, guides, articles, and videos, users do not necessarily reengage immediately; it stands at the back of their minds. Primary, they forget.

‍

Forms response chart. Question title: When you reengage with this digital content, it's often... Number of responses: 50 responses.

We conducted 3 in-depth user interviews to learn more about the efficacy of saving content in order to revisit later. We learned that users save content based on its value. A common go-to is to store valuable content within the specific platform or to create a curated list through a third-party app, such as Notion.

We discovered several pain points:

The more frequently valuable content is saved, the faster the list accumulates; the faster the list accumulates, the more likely it is for content to be overlooked
Users will revisit content if they suddenly get a “reminder in [their] mind,” and currently have the time
No matter how well content is organized, it can quickly become dead weight

“Maybe I save something for work, which I need today, but then I completely forget about it. The reason I needed it may no longer be relevant and now that content is just there..."

Sandeep, User Interview

Solution

Ideation

For our MVP, we focused on two of our key findings, brainstorming ways to help users reengage with content and sustain its value:

When more content is discovered and saved, it becomes difficult to remember to revisit: As a user, I need to revisit the content that I save, so that I utilize its value

Set a reminder to revisit saved content -> Select a date & time

Block time in the calendar -> Sync with Google Calendar

Rediscovering older saved content does not guarantee its value is intact: As a user, I need to quickly access the content I save, so that I optimize my productivity in time

Receive a notification of the reminder -> Via Google Calendar

Include essential details for added context -> Title -> URL to the content page -> Additional notes, or a quick one-liner

Design

Lo-Fi & Usability Testing

We conducted three usability tests, using observational and think-aloud methodologies. We provided minimal details, “This is a chrome extension…” with the aim of understanding how users perceive our product and what it accomplishes.

Each participant perceived our product as “reminder for content they find online,” and emphasized the word “later.” When discussing the notes she would include, one user explained that she would keep it simple: “If I was a writer, I’d say ‘for the pandemic article’.”

This validated our product: MindMemo helps keep content top of mind. For instance, it’s Monday and perhaps this writer’s pandemic article is due Friday. To make sure this TED Talk is watched in time, this writer could set a reminder scheduled for Wednesday.

Iterations

First

During this initial usability testing, we observed the participants select the date and time in one fluid motion, bypassing the cancel or okay in the calendar picker. Therefore, in our next iteration, we separated these key inputs into two fields and included their own labels. To create a MindMemo as quickly and diligently as possible, the notes section also became optional.

Second

As a product that helps users reengage with content that they save for later, selecting a date to be reminded was an essential feature of our MVP. To revisit content with more immediacy, we added three small chips in conjunction with the calendar picker: today (later on), tomorrow, and in 2 days. This boosts productivity and decreases cognitive load. Instead of picking a date, users have the option to select a day based on a shorter time frame that works best for them.

Final Testing & Hi-Fi Mockup

We held five moderated, remote user testing sessions using our first live prototype. During each test, participants completed a series of tasks based on their scenario goal: saving digital content for later. At the time, our front and back-end development were not yet integrated and the resulting usability problems were predominantly linked to this disconnect. However, our open-ended questions helped guide users as they voiced their expectations and assumptions of MindMemo, which to a large extent, validated our MVP and design.

Pivot

After integrating back-end and front-end, we discovered a barrier and given our time limitation, had to pivot. We transitioned MindMemo, an event, into MindMemo, a task. Now, when setting a reminder, users only select a date, with no definitive start or end time.

After making the appropriate adjustments to the design, we found that our product was still in alignment with what it helps users accomplish:

Implementation Details

Frontend

After Signing up:

Popup at bottom right corner of screen

Filling out title, date and notes to create mindmemo

After clicking on ‘Save Mindmemo’ button

Mindmemo task is created

Notifying user about their saved memo:

Technical implementation

Where is it hosted?

The Authentication middleware page hosted on Vercel
The Chrome extension is presently installed using a zip file (It will be present on the Chrome extension soon)

What is your tech stack?

Javascript, ReactJS, TailwindCSS, Vite, React Router

High-level journey of a request

The user first has to install the Chrome extension using a zip file manually.
After clicking on the sign-up button on the popup, they will be redirected to the auth frontend page - where they have to sign up using a Google account.
After signing up, the server sends some user data, which is stored in the local Storage.
Now the user can use the extension to create mindmemo.
After clicking on ‘save mindmemo’, the user will be redirected to a middleware frontend page which is used to send data to the server.
After successfully sending data to the server, the Google task is created which can be viewed from Google Calendar.

Technical challenges

What was the hardest part of development?

Creating a Chrome extension using ReactJs was the hardest challenge for me.
As it was a combination of more than one Chrome extension, making it difficult to communicate with each other took some time.
Then redirecting to the Google auth page directly was a problem as Chrome extension gave some error which I was unable to solve.
The third is accessing the local storage of the Chrome extension.

Does your app have any scaling issues?

As of now, as it is just an MVP model, we have many things to improve and add on the frontend side.
The first is to make the code more browser-friendly and find out all the bugs in the code.
The second is to implement auth in the Chrome extension itself and not to use any third-party side for authentication.

What are some key takeaways?

Creating Chrome extensions comes with its own set of challenges.
Using React for building Chrome extensions is not the right choice for building complex extensions.
Injecting code using the Chrome extension can break sites or styles too.
Manifest.json is the backbone of any Chrome extension, so configuring it properly is the most important task.
Using bundlers like Rollup makes it easy to build Chrome extensions using reactJS.

Backend

Technical implementation

Where is it hosted?

It is hosted on the render
link-https://mindmemo.onrender.com

‍What is your tech stack?

Javascript, Nodejs, Expressjs, Prisma, Mysql
Database- Mysql

High-level journey of a request

User Sign-In:

Endpoint: /authRoutes/auth/google
Users sign in using their Google accounts.

Authentication Process:

The user's email and profile details are obtained after successful sign-in.

Google API Interaction - Task Access:

API Endpoint: https://www.googleapis.com/auth/tasks
The backend interacts with the Google API to access task-related information.

Callback and Redirect:

Upon successful Google API interaction, users are redirected to the callback URL.
Callback URL: https://mindmemo.onrender.com/authRoutes/google/callback

Success Redirect:

Upon callback, users are redirected to the successRedirect endpoint.
Success Redirect Endpoint: /authRoutes/protected

Data Addition to Mindmemo:

API Endpoint: https://mindmemo.onrender.com/userDetails/userMemo

User data, including Google Calendar tasks, is added to Mindmemo.

Data Storage in Database:

The added user data, including Google Calendar tasks, is stored in the database for future reference.

Technical challenges

What was the hardest part of development?

Authenticating with Google and integrating with Google API
Creating a Cloud Database server
Integrating with that task API had limitations when it came to handling time-related information.
In the context of integration, working with events eventually posed a challenge because events require defining start and end times, which did not align with our intended use case
Focusing on tasks without time was a conscious decision to ensure a smooth user experience

Does your app have any scaling issues?

There are edge cases that have to handle
Handling the JWT token in a better way

What are some key takeaways?

Understanding how to integrate Google account authentication enables secure access for users and leverages their existing accounts.
Learning how to obtain user email, and profile details, and access specific Google APIs (like tasks) provides a foundation for interacting with Google services
Understanding how to handle callbacks and redirects is crucial for maintaining a smooth user experience after interactions with external services

Future Steps

We will continue to build MindMemo as we move forward with the additional features we have planned for Version 2.0. We will be conducting further research and building new features to take MindMemo to the next level. As a solution-focused team, we have great communication and a positive attitude which will highly contribute to our future steps.

Learnings

Product Manager Learnings:

Rebecca Shrestha

I didn’t know what to expect from the Colab experience and needless to say, so far it has been such an incredible journey. I feel lucky to have a team who are equally devoted and curious to learn and build the very first MVP. As a product manager, I have learned a lot about the work that goes into building a product from a designer and developer's end. I have learned to be solution-oriented and become comfortable with the agile methodology.

Designer Learnings:

Olivia-Jane Ureles

My past experiences working in team settings have primarily been with other designers. Here, I worked as a solo designer and together with a product manager and two developers, shipped a product for the first time. Our communication was our strongest asset, leading to open and productive team discussions. The design and development stages worked hand in hand. Through our close collaboration, I learned how to prepare and organize my designs to ensure a fast and productive transition into front-end development, including Tailwind, how to efficiently design a Chrome extension, and how it integrates with the back-end.

Developer Learnings:

Dipesh Halde

Joined Colab to learn new skills and how to interact with teammates. Journey met expectations with fantastic team members. The team's hard work resulted in achieving an MVP (Minimum Viable Product). Learned the process of authenticating with Google APIs. Acquired skills to create tasks using Google APIs. Developed an understanding of connecting to a cloud database using Prisma. Learned the main things about how to deploy and sync with the front end.

Developers Learnings:

Barun Debnath

&

Joining Colab proved to be one of the best decisions that I made. Working with a talented team and building an MVP from scratch - whether it be product ideation, user reviews, designing, development, or user testing. As a frontend developer, I expanded my skill set by learning to develop Chrome extensions, coding UI following the design, and integrating frontend with backend.

Full Team Learning

As a team, we have grown a lot since day 1. The beautiful part is we are all still growing together, setting good norms from the beginning. We all respect one another and are always down for whatever. We were all equally invested in each assignment every week from user research to user testing. The best part is we all gained our many first experiences in building this very product!