Building a chrome extension to bridge finding inspiration and implementation
Team
1 Design Engineer
1 Front-End Developer
My Role
Conceptualization
User Research
Design
Implementation
Duration
~6 months (Ongoing)
Overview
There was a gap between people searching for inspiration and actually implementing it within their own projects.
Designers and developers are constantly noting different sites they might like, features like buttons, a form, or even a font, without even noticing.
Finding inspiration for new design projects is hard, implementing the styles found from said inspiration was harder. In order to relieve users from the stress of clicking inspect and digging for the font-family of a heading within lines of code.
Solution
How Might We Make the Transition from Finding Design Inspiration to Implementation Smoother?
Decova is meant to allow users to easily access and save code snippets of websites they like for easy design and development implementation later on!
Users are able to save individual and grouped snippets to their dashboard where they can copy the exact stylings in a Figma file or export ready to implement CSS or Tailwind code.
Ideation
Why a browser extension?
During the ideation phase, I identified an opportunity to simplify the workflow of inspecting a webpage for design details. Rather than requiring users to click through the browser's Inspect tool to locate fonts, colors, and CSS properties, I envisioned an experience where users could seamlessly navigate the DOM, select any element on the page, and instantly retrieve the relevant code.
Current User flow to figure out a font
Browser Extension Inspiration
Feature 1: The Pop-up
To make the capture process feel seamless, Decova uses a lightweight extension popup that launches Capture Mode directly on the current webpage. Instead of navigating through browser developer tools or searching through complex DOM structures, users can simply hover over and select the exact UI element they want to save.
Capture Mode provides visual highlights, hierarchy navigation, and multi-select functionality, making it easy to isolate specific components with precision. By allowing users to interact directly with page elements, the workflow becomes significantly faster, more intuitive, and accessible for designers collecting UI inspiration.
✅
Technical Users were able to intuitively select and save options
❌
non-Technical users kept getting stuck in the capture mode, unable to exit
Solution:
In order to resolve this, I wanted to include more direct instructions for users to be able to understand the commands to save and exit. I added clear directions within the initial pop-up frame so users are able to first read them, as well as adding it to the bottom left of capture mode to remind them, as the pop-up disappears when actively capturing.
✅
No users were stuck in capture mode once the instructions were more prominently displayed
Feature 2: The Dashboard
To ensure captured components remained useful beyond the moment they were saved, I designed the Decova dashboard as a centralized design library for organizing, searching, and exporting reusable code fragments.
Rather than leaving users with an unstructured collection of clips, the dashboard allows components to be grouped into projects and categorized by UI element, such as buttons, cards, navigation bars, or forms. This enables designers and developers to quickly locate relevant components based on the project they are working on or the interface element they need to build.
Extraction Pop-up
Item Selection
Item Filtering
Product
Extension-in-Action
Want to try it out?
Here is a quick tutorial on how to install
Next Steps and Debugging
What I want to prioritize fixing in the next version release
Right now, users have to individually select elements and then group them together. In the next release, I hope to implement a drag options where users can then select from the automatic grouping. I also hope to implement a more efficient way of saving the preview options for the saved elements, as right now, the image is saved with the overlay that indicates it is selected.
