Optimole is the all-in-one solution to all of your image optimization needs. With full automation and a range of evolutionary features, Optimole makes it easy to clean up your heavy images and bloaty pages.

My contribution to Optimole included from the day to day Product Design tasks, contributing to the product expansion with the DAM (Digital asset Management) feature - to hiring and mentoring the Design Interns.

The Process

While it was clear to us what the user's pain points were trying to solve (limited organization, time-consuming search), in the beginning, we still didn't know how to approach it. So after doing more research on the problem, we ideated and prototyped our first version, which solved some of the user's pain points - but the UX felt different between the Web App and the WordPress plugin. After this, we conducted more research (competitor analysis, UX research) to understand potential solutions and iteratively prototyped another solution to address user pain points in managing media files.
The final prototype included a unified Design System ((Tailwind CSS + Optimole styles) to ensure a consistent user experience across the web app and WordPress plugin, and the DAM features were gradually rolled out with user behavior tracked via analytics (Metabase and Microsoft Clarity).

Beginnings

Since Optimole was already in production as a WordPress plugin and on a web app, and each medium was using a different style and components, we had to start with creating a new Design System to align everything under one umbrella. For this, we used Tailwind as a base, combined with the Optimole style guide - while also expanding and adjusting depending on the medium. For example, some components were perfect in the web app context, but adjustments were needed for the WP plugin.

The Challenge

WordPress is awesome when it comes to content, but managing media files can become a pain as your site grows or if you have multiple sites. That's because WordPress's default Media Library doesn't offer any organization, such as folders or categories. For example, imagine the user has a website with multiple page templates, and each page template represents an image. If we scale this up, the default WordPress Media Library will look something like this:

In the example from above, there are around 1200 images.

Now imagine having to search for an image and knowing only a few details about it. Doing it with the default WordPress Media Library would take a lot of time.

The Solution

With Optimole Digital Asset Management services, we wanted to solve this pain point by providing a central location to easily store, organize, and control access to all the images and videos. This means better security, faster website performance, and smoother team collaboration. Optimole DAM removes users' cumbersome experience by categorizing their assets in folders and subfolders, and all these changes are synced across your websites.

More specifically, Optimole adds:

• Folders and Categories

• Image Tags

• Advanced Search

• Ability to add Watermarks on your images

• Image editing capabilities

• All images can be synced between sites
  
  

Using Optimole DAM we managed to bridge the User Experience between the web dashboard, where all the images are stored, and the WordPress plugin context. This means that users now see the same familiar UI both in the Optimole Dashboard and in the Optimole WordPress plugin:

UX Research and Data analysis

We released the DAM features gradually, which allowed us to track the user adoption and usage - making refinements based on that data. We used Metabase for Analytics and Microsoft Clarity for user session recordings. The second one added some weight on our shoulders since the number of recordings was quite large. At the same time, seeing actual recordings of how customers use the new features was very useful.