Streamlining Digital Chaos On Your Browser

Chelsea Jones

Art Director
Product Designer
Figma

Background

It's easy to get lost in a sea of open browser tabs. It's a common problem we all face: too many ideas, too much to explore, and a cluttered browser that slows us down. Project White Rabbit is a startup of engineers with a dream to streamline this problem. When the founder approached me with his vision of a tool that could act like a Jarvis-like digital assistant, I was intrigued.
Together, we embarked on a mission: to transform a brilliant idea into a tangible product that could be presented to potential investors. The vision was clear - create a user-friendly web app and Chrome extension that tidily organizes tabs, grouping related thoughts together, and helping users to think and work more efficiently. It wasn't just about decluttering; it was about enhancing the digital experience, one tab at a time.

My Role

As the primary designer on this project, I shaped its unique visual identity, transforming initial wireframe sketches into polished, ready-to-develop designs. In close collaboration with the founder, we tackled each feature through focused sprint cycles. The result? A modular design system, seamlessly prepared for the development team's endeavors.

Simplicity at its core

At first glance, the app mirrors a straightforward note-taking interface, ensuring users can easily locate what they need without any browser interference. With the emblematic white rabbit as your guide, users can effortlessly hide or reveal the application with a single click, ensuring an unobtrusive browsing experience.
Closed
Closed
Open
Open

Expanding on ideas

Notes are smartly segmented into categories - drafts, active tabs, items saved for later, and essential resources. This allows for an organized flow of ideas.
Notes are smartly segmented into categories - drafts, active tabs, items saved for later, and essential resources. This allows for an organized flow of ideas.
Opened Note
Opened Note
Adding comments to your links
Adding comments to your links

3 Ways to Save

1. Click the Rabbit

Simply highlight your desired content and tap on our signature white rabbit to swiftly add insights directly to your note.

2. Drag and Drop

Highlight your eureka moments and seamlessly drag them over to the desired note, streamlining your thought collection process.

3. Sync with a Tap

At the base of your page lies a handy sync tab button. One-click, and your current page's essence is effortlessly integrated into your note, capturing the full breadth of your discovery.

Organizing Browser Tabs

Merge your open tabs into bespoke note groups aligned with your specific train of thought. By syncing your tabs with a chosen note theme, you construct a clear path of inquiry tailored just for you.
Tapping on a note unveils the workspace, displaying the associated browser tabs. This intuitive design ensures a distraction-free journey, allowing you to hone in on what truly matters.
Ever accidentally closed a tab? We’ve all been there. Our 'Recently Closed' section offers a lifeline, letting you quickly revisit any pages you might've closed prematurely.
Once you're done with a train of thought or research pathway, simply shut the note. This action closes associated tabs, ensuring a tidy, manageable browser is ready for your next deep dive.
In the example below, you can see how you can take your chaos and begin to streamline them into groups. (PWR is live and available to test)
Do not judge my browser lol
Do not judge my browser lol

Seamless Handoff

At the end of the project, I included a componentized design system so that their engineers could begin building it for launch.
Atomic design system for developers
Atomic design system for developers
Partner With Chelsea
View Services

More Projects by Chelsea