Case Study
Rethinking how AI insights are delivered, providing users with clear answers
Vizit leverages its patented AI to analyze images and predict how engaging those images will be to a specific target audience.
There are a wide range of AI insights Vizit can provide to a user — including ranking multiple images, comparing their appeal to a competitive set, and applying a number of heat maps that outline specific engaging or attention grabbing areas of the images.
User education was desperately needed. After multiple brainstorms and deep dives, the team hypothesized that guiding users to select their inputs — with sufficient user education — would help users better understand the AI analysis provided.
While this new workflow will introduce the often-scary “extra-clicks,” the team was willing to sacrifice some speed for education and understanding. We felt that “meaningful” clicks were better than confusion.
By Role
Graphic designers
A lot of users come to Vizit to while working alongside in Photoshop. They want Vizit to tell them what to change, so they can make quick iterations to the images they are editing. They are frustrated by unclear instructions on how to improve an image.
Ecommerce marketing managers
These folks want to analyze the images they plan on listing to ecommerce sites. They need to easily know which image to keep, which to send to designers for edits and which to avoid using altogether.
By Experience
New users
Anyone using Vizit for the first time needed to be able to learn the platform themselves, without long training sessions.
Existing customers
We needed to make sure we didn't forget about our power users. Slowing things down too much would hurt their existing workflows.
Director of Product Design
Lead Product Designer (me)
Senior Product Manager
Various stakeholders and internal users
My Responsibilities
Lead all design efforts from wire-framing to final design
Conduct user interviews and usability tests
Scale design implementation across entire platform
Work with engineering to correctly implement the solution and conduct QA
Early Exploration
The team gathered for a two-day workshop in Boston to start brainstorming early ideas. We focused on drawings and getting all ideas on paper so we can quickly iterate and validate.
As we fleshed out these new ideas, I was responsible for user testing — both with internal users and customers. I hosted Zoom call sessions with users at each stage. I demoed each idea to get their feedback on the designs, asked about their frustrations with the current platform, and gained invaluable insight into how to make Vizit better.
Starting Design
Early concepts involved taking an approach inspired by Photoshop or other photo editing tools — use a toolbar or side-panel to store the actions users can take on their images. Those are image platforms, Vizit is an image platform — makes sense, right?
However, early feedback showed that creating a sidebar for this page took up too much space, hid the actions too much, and too much interactivity was stored off to the side in an overlay panel.
Another early concept was to follow an advanced filtering pattern that can be see in many apps, like AirTable or Linear. We knew that there were inputs to be selected, and a user could manipulate those inputs to change the view and AI insights that were given.
Early feedback to this was that it was still too confusing, and felt more like something a power user could handle, and not intuitive for new users coming into the platform for the first few times.
Another iteration style involved “Quick Tasks” at the top of the screen. Interaction was closer to the top of the page, which is where the old patterns lived. It was easier to remember where to do your analysis for existing users.
There still wasn’t quite the right amount of education or selection yet. Users were clicking fewer times than previous iterations and could visually see previews of the outputs. However, we ended up back at the original problem: users weren’t sure what went into the analysis.
The final designs are focused on interactive training, simple repetition, and ease of understanding.
Consistent, repeatable user patterns allow expert users to get analysis quickly. All pages that allow for AI analysis on images now have AI Tasks, so all of Vizit works in a cohesive way.
We came up with the analogy of cooking a meal:
The analysis was the meal itself, which is derived from a recipe — a task.
Each input of the task was an ingredient. To get users to understand how to complete their recipe, we guide them through selecting the ingredients they want. Once the recipe is complete, the meal is served!
Education and Training
Hover interactions give users a preview of what each AI Task will accomplish, and what outputs the user can expect.
Once applied, Vizit explains the output, and how users should interpret the analysis.
Visual Design Upgrades
Enhanced visual design brings Vizit’s UI from a flat, grey structure into a more modern, techy feel.
Before
After
Project Size and Scale
What really separates this project from some of the rest is the scale and amount of workflows. There are tons of combinations, edge cases, and the scope of the project touched the entire application. We needed to make sure the solution we came up with would work for all the different areas of the platform that provide different AI insights.
In addition to concepting, creating a lot of the early designs, and hosting user feedback sessions, my responsibility was final design and scale. I needed to produce pixel perfect designs for every possible flow on every possible page.
It’s not the sexiest part of the process, but I pride myself on thorough, detail oriented designs that include interaction and flow notes so developers know exactly what to build.
A clean and organized Figma file is an underrated part of this process, especially when it’s as large of a project as this one.
AI Tasks are now a staple of Vizit, which is defining the AI image analysis space.
Customer retention increased dramatically within 2 quarters, with 0% customer drop off for Q4 of that year. Our great customer success team was a big part of this improvement, but customers found Vizit far easier to use thanks to AI Tasks.