PopVia
I have been volunteering my time and skill to help PopVia with their Chrome Extension projects. I have iterated on their Simple To-Do extension to prioritize user experience, and redesign the extension elements to be in-line with company branding, and am currently working on their Code Snippet Saver and their website redesign.
Overview
Started July 2024
​
Role: Web/UX Design Volunteer
​
For each project one designer is paired with one developer for two weeks, and then we switch teams and projects to iterate on the other works in progress
​
​
​
​
​
​
​
​
Table of Contents
As I have had the opportunity to complete more than one project for the same company, you can use the buttons below to jump to any project that's caught your attention
Starting the Simple To-Do
I was eager to get started on this project, so I first downloaded the extension to explore it as in-depth as possible. I noted the buttons and my expectations of them, and proceeded to give myself tasks that would involve every button and path to see the capabilities of the extension. I did this to to see how my expectations aligned with reality, as another user could have the same expectations as me. I had the following notes for my first experience with the extension:
- The spacing for list items and the archive button were a tad far apart and, in my experience, users tend to assume that things that are grouped together are related, and the far spacing between the text and archive buttons might confuse users, especially those in older generations.
- The ‘Archive’ button was used for when a task is complete and the user wants to remove it from their list, and I suggested to remove the archive button and replace it with a check box as it would better fit a user’s assumption for a to-do lists layout. The spacing of each list item also changes depending on how many words are in the task, and having a set amount of spacing for any task could help with cohesion in terms of design.
​
- There was also a button with the title 'Export Active Tasks', and from that alone, I wasn't sure what it meant. I clicked it and it created a .csv file from the archived tasks. I could see how the option to export the list items could be helpful, so I recommended clarifying the functionality of the button by titling it 'Export to .csv'. That way, the user understands what clicking the button will do on sight alone.​​​​​​
In my first iteration, I attempted to simplify certain features with icons. A pencil for edit, and a garbage can for delete. I did this to minimize the amount of reading a user has to do, and to provide a bit of visual interest.
​
I eliminated the 'Archive' button because a user's expectation is to 'check something off the to-do list' so I suggested we make it an actual check list. Once completed, the user can check off their task, and it is visually represented as complete through the check and the strikethrough text.
Based on these preliminary insights, I was able to redesign the functionality as well as the appearance. When I came onto the project, everything was pretty default, but I got to explore the branding of the app with their logo and create something that would be able to transfer to all PopVia extensions, so even subconciously a user would be aware they were on a PopVia extension. I chose purple and black as must-have colors as I was going off of their logo, and from there I played around with different shades that would pass accessibility contrast checkers.
Sizing Up the Code Snippet
My next project for PopVia involved upgrading their Code Snippet extension. Like the Simple To-Do extension, I started with my own deep dive of the functionality of the extension. Giving myself tasks, seeing how my expectations aligned with reality. I took the following notes while using the original extension:
- Text input boxes don’t fit into extension window
- Can make window even bigger, making it further outside extension window bounds
- Had to exit extension window and reopen it to see saved code
- Edit should snap the user back up top to where they’re editing, I thought the button didn’t work for a minute
- Getting out of the edit screen deleted the snippet altogether - we might need to store saved snippets differently
- Copy and paste test: <h1>Test</h1>
<p>This is a test to see how the 'Save Snippet' button operates</p>
- Copy and paste works as expected, logo could be added to pop up window
There were some obvious functionality issues that needed to be fixed, such as the extension window fitting within the bounds of the screen, as well as having more feedback that a user's attempts had been received and saved, as well as error prevention to prevent a user's code from being deleted by accidentally clicking out of the window.
My first step in redesigning the extension, was to update it to the company's branding, and fix some user issues. I made the window fit within the extension dimensions and updated the color scheme. I also updated the extension so the saved code snippets would be accessible through dropdowns. I decided on this layout because I thought it would be more efficient for a user to be able to see all the titles of the code snippets they have, and only open the ones they need. Once they open their chosen dropdown, a user can copy it to their clipboard, edit the snippet, or delete the snippet. I met with the developer of the project to make sure it was a realistic design for function as well.
As we still had time in our sprint for this project, I decided to try and make it a little more visually interesting. I set up a couple options and sent the mockups to the dev to make sure all would be practical on his end. The options involved a luminescent selection feature, a bubbled background playing on the company name POPvia. In the end we decided to go with the bubble design and the dev animated them flowing in. I think it added the perfect amount of visual interest without being distracting.
