![[object Object]](/_next/static/media/leftArrowIcon.5a36c05a.svg){kind=small}
![[object Object]](/_next/static/media/webIcon.76bfc351.svg){kind=small}
RoleCo-creator — Product designer & developerTeamAlessandro Figo — Co-creator & developerTimelineAug 2022 - Apr 2023
Built With
Chrome Manifest V3JavascriptWebpackFirebaseReactNextJSTailwind
DescriptionLuminate is a browser extension that allows users to highlight text, leave notes, and share insights on any website. The highlights and notes made by the users will remain on the site as long as the browser extension is turned on.Context
When the time came for Figo and me to decide on our final year project, we were inspired by a common frustration: the often inefficient process of taking notes from online sources. While traditional methods like bookmarking or copy-pasting might be common, they frequently fall short. When revisiting a bookmarked link, it doesn't always immediately remind the user why that particular resource was saved in the first place.
Hence we built Luminate. Think of it as a highlighter and sticky note combo, but for the web. With Luminate active, notes and highlights users make will stick to the website, ready for whenever they come back.
Hence we built Luminate. Think of it as a highlighter and sticky note combo, but for the web. With Luminate active, notes and highlights users make will stick to the website, ready for whenever they come back.
App Design
Sample components.
Highlighting, jotting notes, and sharing insights on the margins of a paperback book is straightforward. But mimicking this process digitally is tricky. We want our tool to allow users to interact with online content as intuitively as they would with physical paper.
Our inspiration stemmed from the highlighting features of e-books on platforms like iBooks and Kindle. We wanted to replicate the same experiences for websites. The collaborative comment features of Google Docs also struck us as another inspiration for our app.
App Structure
Our app is made up of 2 components, a chrome extension and a web application.
App Features
The main feature of the app is allowing users the ability to highlight text on webpages. Users can also add annotations to provide additional context or insights. The highlights and annotation will remain in the web page after refreshing.
Our inspiration stemmed from the highlighting features of e-books on platforms like iBooks and Kindle. We wanted to replicate the same experiences for websites. The collaborative comment features of Google Docs also struck us as another inspiration for our app.
App Structure
Our app is made up of 2 components, a chrome extension and a web application.
Chrome Extension Functionalities:
- Highlight and add notes on any webpage on the internet.
- Save these annotations to the cloud.
- View personal annotations directly on the webpage.
Web App Functionalities:
- View all saved links and annotations made.
- Organize saved links and annotations.
App Features
The main feature of the app is allowing users the ability to highlight text on webpages. Users can also add annotations to provide additional context or insights. The highlights and annotation will remain in the web page after refreshing.
Highlighting and annotating text in a web page.
The app also provides the convenience of viewing saved notes directly in the extension popup. This is to give the user a bird's eye view of their highlights and annotations on the webpage, granting a comprehensive perspective on their accumulated insights.
Extension popup.
Users can also view their saved annotations and highlights in the web app. This feature provides a centralized location where users can review and manage all their saved content from various webpages.
The web app.
App Demo
App demo.
Closing Thoughts
Luminate is one of my longest and challenging project to date. Since I had a very limited experience in Chrome extension development, I had to learn everything from scratch. This required me to quickly learn and implement new tech and tools, while still managing the design aspects of the project. This project involves a lot of trial and error, but at the end, it’s very rewarding, and it’s one of my proudest creations.
