chrome extension

Visualist

Elevate creativity with the all-in-one Chrome extension

Visualist: A web-based productivity software for creative individuals

Visualist is a web-based software suite that operates on cloud services, dedicated to visual inspiration collection, management, and work. It is specifically designed to empower creative individuals by providing them with the tools to collect, organize, and share visual inspiration.

To streamline users’ workflow, Visualist decided to create a Chrome extension that seamlessly integrates with users’ browsing activities, without requiring them to open the main software.

Role

UX designer

Team: Cho Huang, Francene Robert (UX designer), Jonathan Tran (UX designer), Cherie Young (CEO), Madeline Corjuc (PM)

Tools

Figma

Timeline

May 2023 to Jun 2023

Scheduled to be launched in July 2023

Create a Chrome extension with 3 key functions

Based on the previous user research, Visualist’s team has set a clear scope for the Chrome extension, which will offer 3 key functions enabling users to save images, take screenshots, and generate color palettes without having to open any additional tools.

Function 1: Image saving

This function allows users to effortlessly save pictures directly from web pages to Visualst software for future inspiration or future work.

Function 2: Screenshot capture

This function enables users to capture screenshots and save them direct into their inspiration library in Visualist for further work with ease.

Function 3: Palette creation

This function allows users to create color palettes by extracting colors from images and saving it in Visualist when browsing websites for future reference.

Emphasize with users & learn from competitors

To ensure informed design decisions, we dedicated 1-2 weeks to conducting heuristic research to emphasize with the prospective users and learn from our competitors. Each of our three designers takes responsibility for reviewing 2-3 color-picking tools and 2-3 image or note-saving tools. Additionally, we organize a working session with senior members at Visualist, where we gather valuable feedback and design insights for our next steps.

Insights from reviewing Color Picker tools

We conducted a comprehensive review of 6 color picker tools, namely Pantone, Coolors, Dopelycolor, Appypie, TinEye, and Pika. Here are our takeaways:

Intuitive interface: Make it easy for users to customize the color palette

Immediate information: Provide immediate information when users hover their cursor over a color

Effortless color code conversion: Make it easy to convert between different color modes.

Display colors in one place: Include a way for users to view the selected colors in one place to see how different colors match each other

Insights from reviewing image-saving tools

We assessed 6 image-saving tools, including Eagle, Notion, Cage, Notebook, Colorzilla, and Moonsift. For image-saving tools. Here are our key insights:

3 screenshot options: Users should be able to capture: a specific area of a web page, the full web page, the visible part of the page

Clear introduction: Provide a brief introduction when users use the extension for the first time

Visual clues: Display appealing visual clues to help users copy, cancel, or resize the size of the screenshot

An appealing menu: The extension menu should be visually stimulating instead of just showing a boring list

Creating user flows, designing & iterating collaboratively

In this step, three designers from our team created individual drafts of assigned user flows based on the research insights and collaborated to revise them based on Visualist team's feedback. Then we worked together to create the low-fidelity and high-fidelity designs after multiple rounds of iterations, incorporating input from Visualist. Discussion and consensus-building led to the refined final design outcomes.

Feature 1: Image saving

The saving image feature serves as the default menu for the whole Chrome extension. With this feature, users have the option to:

  • Batch save: Allow users to click the “Batch save“ button to save all images on the current webpage

  • Save by drag & drop: Enable users to drag an image from the webpage and upload to Visualist

  • Right-click & tag save: Allow users to click on the Visualist tag or right click the mouse to save one image

Feature 2: Screenshot capturing

When users click on the "Take screenshot" tab in the tab navigation on the default menu, they will enter a screen specifically designed for capturing screenshots. Within this screen, users have the option to take a screenshot of:

  • Selected area: Allow users to use the cursor to drag a specific area on the screen to make a screenshot

  • The visible screen: Enable users to immediately make a screenshot of the visible area on the current screen and save it in Visualist

  • The full web page: Make it possible for users to make a screenshot of the full length of the web page that they are browsing.

Upon selecting one of these options, users will be directed to the next screen of the extension with the corresponding button in active mode. Simultaneously, users will be able to preview the captured screenshot within the extension. They can choose to either copy the screenshot to the clipboard or add it to Visualist for further use.

Feature 3: Color palette creating

Users can select the "Make the palette" tab to access the color palette creation screen. In this section, users can:

  • Pick colors from images when browsing: By clicking the "+" button, users can activate a color dropper tool to collect a color from the web page they are currently viewing. The maximum number of colors that can be added to the palette is limited to five.

  • Edit colors in the palette: When users wish to customize the palette, they can hover their cursor over a color swatch. This action will reveal options to remove the color, rearrange its position, or copy the color code.

  • Display colors in different code systems: Users can change the color mode by using a dropdown menu located above the colors.

Final outcome: A ready-to-be-launched mockup

Finally, we successfully delivered a high-fidelity mockup for Visualist that received approval from their team. The launch of the extension is now scheduled for July 2023.

What did I learn?

The value of collaboration, feedback, and continuous improvement

In this project, I acquired invaluable experience through close collaboration with fellow designers, project managers, and the CEO. The diverse perspectives brought forth by the team of designers and the Visualist team consistently provided me with fresh and valuable insights.

The importance of iteration for making a product better

In this project, we progressed from concept to user flow, low-fidelity mockups, and finally high-fidelity mockups. Each design iteration incorporated feedback from designers, project managers, the CEO, and users, resulting in continuous improvements. We witnessed the project being refined time and again, progressively aligning with user needs and achieving the company's goals.

The effective way to utilize the company’s design system

Through this project, I learned how to effectively utilize the company's design system, ensuring that my screens adhere to the system's style in terms of layout, button styles, colors, details, fonts, and icon designs. This valuable experience has provided me with a solid foundation for future work within a company.