How I Designed a Chrome Extension in 24 Hours
In June, Progressive Leasing held its first-ever company wide hack-a-thon event. Employees were encouraged to form teams that would produce something in 24 hours. My team consisted of a product manager, a product researcher, a software engineer, and a user experience designer (me).
The idea
We decided to create a Progressive Leasing Chrome extension to solve common issues for repeat customers. Repeat customers are valuable to the business because they drive profitability. Our product researcher helped us identify repeat customer issues from customer service calls and NPS surveys.
We categorized the issues into six main problems:
- Customers have to take too many steps to access their lease data.
2. Customers are unaware they can have two leases at a time.
3. Customers have a difficult time using the Store Locator on our website.
4. Customers don’t have a way to tell us what stores that want to shop at.
5. Customers have no way to refer friends to Progressive Leasing.
6. Progressive Leasing has a very small social media footprint.
Audit extensions
I had never designed a browser extension before, nor do I use them often. I audited some popular extensions to learn more about them and any specific requirements they might have.
These audits were not only helpful in the visual design and user journey within the extension, but also in the steps necessary to install it.
Determine flow
I lead the team in an exercise to determine the user flow through our extension. This helped the team align on user goals and product features.
Sketch wireframes
I quickly sketched out some ideas for the main screens in the extension. I didn’t have as much time to spend on this part of the process as I usually do, so iterations were minimal.
High fidelity solutions
I translated my quick sketches into high fidelity mocks in Sketch. I utilized components existing elswhere in the company’s product line to save time, editing them as needed to fit our user goals. This also made the browser extension consistent with existing products.
The three main sections of the extension (dashboard, store locator, and profile) each solved for two of our customer issues. The dashboard included a snapshot of current leases for increased accessibility to lease data. It also informed users that they could have another lease.
The store locator was updated to allow users to search in more ways. I also added a “suggest a store” feature on the results page. This feature allows users to tell us where they want to shop, and could help Progressive Leasing partner with more retailers.
The “help a friend” section of the profile incentivizes users to tell their friends about Progressive. This is done by by providing them a shareable link, which also helps the company’s social media presence.
Prototype
I uploaded the final designs to InVision and built a prototype to present to the other teams participating in the event.
And that was it! I spent a total of 20 hours planning and designing, so it’s a little rough, but I’m proud of the final result!
