Designing an AI-based
image-processing platform
I led a 6-person design team as product designer. Our objective was to design 5 different dashboards (for end-users and back-office users) for Revivoto.
RevivotoA product for an AI-based image-processing
The Canadian startup, which specializes in AI-based image processing, wanted to develop a product that would cater to both end-users and back-office users. The end-users were individuals and businesses who wanted to edit and process their images, while the back-office users were employees who would manage and process large quantities of images. The primary target audience of the product was photographers, digital marketers, graphic designers, and e-commerce businesses.
Faster image processing for end-users and back-office administrators
We faced a problem where users were struggling to process and edit images quickly and efficiently. The existing image processing tools were either too complicated or lacked advanced features, resulting in users spending more time editing and processing images. Additionally, back-office users were struggling to manage and process a large number of images efficiently, resulting in slower turnaround times for their businesses. This problem was affecting the end-users’ productivity and the back-office users’ ability to deliver work efficiently.
Creating a design team and workflows
As design lead, I oversaw the entire process from start to finish while also working hands-on as a product designer. I was in the details on every step, not just directing from above. Managing the design team and making sure the final product met the client’s needs and goals fell to me as well.
Metrics for both side
Metrics are an important aspect of any product design project, and in this case, we had several metrics to track the success of the image-processing product for end-users and back-office users.
We’d targeted 22%, in line with what similar prosumer image tools typically see; the redesigned flow landed at 26% once it had a full quarter of real usage behind it.
Retention came in at 54%, a few points above the 50% we’d set as the bar for the product being genuinely sticky.
On average, users spent 15 minutes per session and processed an average of 20 images per session.
On a scale of 1-10, the average customer satisfaction score was 8.1, above the typical SaaS average of around 7.8.
Back-office users processed images roughly 46% faster than with the manual workflow they were replacing.
The error rate was less than 1%, and issues were resolved within an average of 10 minutes.
57% of back-office users had adopted the new dashboards within the target window. That was short of the stretch goal but past the 50% we needed to justify the rollout.
Cost savings settled at 29%, just under the 30% target but still meaningful at Revivoto’s processing volume.
These metrics showed what the image-processing product delivered for both end-users and back-office users.
User-centric design vs technical feasibility
There were several challenges that we encountered during this case:
- The complexity of the product: Developing a product for both end-users and back-office users was a complex task. We needed to ensure that the product was user-friendly and intuitive for both types of users.
- Integration with AI: The product was based on AI technology, which required us to integrate various algorithms and data models. This was a technical challenge that required a lot of testing and iteration to get right.
- Multiple dashboards: Designing four dashboards for back-office users and one dashboard for end-users was a challenging task. We needed to ensure that each dashboard had a unique user interface that was intuitive and easy to use.
A step-by-step approach to developing the solutions
As the design lead for this project, the first step was to conduct a thorough analysis of the user needs and the current market. We reviewed competitor products and identified gaps in the market where our image-processing product could excel. Through user interviews and surveys, we gained insights into the key pain points and needs of both end-users and back-office users.
Based on these insights, we created user personas for each audience and mapped out their user journeys, identifying the key touchpoints and pain points in their experience. We then used this information to create user stories that helped guide our design decisions and ensure that we were creating a product that would truly meet their needs.
We created wireframes and low-fidelity prototypes to test and validate our initial design ideas with users. Based on their feedback, we refined our designs and moved into high-fidelity prototyping. We created multiple design options for each dashboard and tested them with users to identify the most effective layouts and features.
As we moved into the development phase, we continued to iterate on the design and make adjustments based on user feedback and our own analysis. We worked closely with the development team to ensure that the final product was not only visually appealing but also highly functional and easy to use.
To select the best design option, we used a combination of qualitative and quantitative data. Qualitative data included user feedback gathered during user testing sessions and surveys. Quantitative data included metrics such as task completion rates and time on task. We used these metrics to compare the performance of different design options and identify the most effective one.
Designing for two audiences at once was the recurring tension. A layout change that made the back-office dashboards more efficient for power users would sometimes make the end-user version feel more cluttered, so most decisions ended up being a trade-off we tested rather than a clear win.
Uncovering key insights for designing an image processing dashboard
- Define the problem: We first identified the problem that needed to be solved, which was the need for a user-friendly image processing product based on AI that could cater to both end-users and back-office users.
- User research: We conducted extensive user research to understand the needs, pain points, and preferences of both end-users and back-office users. This involved user interviews, surveys, and usability testing.
- Competitor analysis: We also conducted a thorough analysis of competing products in the market to identify the strengths and weaknesses of these products and to identify any gaps that could be addressed by our product.
- Feature prioritization: Based on the user research and competitor analysis, we prioritized the features that needed to be included in the product and created user stories and user flows.
- Prototyping and testing: We created wireframes and interactive prototypes to test the product with users and to iterate on the design based on user feedback.
Throughout the design process, we kept the user at the center of the design, and we continuously iterated on the design based on user feedback and testing.
Professional photographers
These users need a tool that helps them quickly and easily process large quantities of photos. They require a high level of accuracy and control over their editing process.
Digital marketers
These users are looking for a tool that can help them create visually appealing content for their marketing campaigns. They require a fast and efficient way to edit images and need access to a variety of editing features.
Graphic designers
These users require advanced image editing tools to create visually stunning designs. They need a tool that can handle complex editing tasks and can integrate with other design software.
E-commerce businesses
These users need a tool that can help them quickly and easily edit product images for their online store. They require a fast and efficient way to edit images in bulk and need access to features like background removal and image resizing.
We conducted qualitative research to gain a deeper understanding of the needs and behaviors of our target audience. This involved conducting user interviews, contextual inquiries, and other forms of user research to collect rich, descriptive data about our users.
During this process, we developed hypotheses about our users’ pain points, goals, and behaviors, which helped to guide further research and design decisions. For example, one hypothesis we developed was that our users needed a more efficient way to manage large numbers of images, which guided our decision to design dashboards for back-office users.
We used George Box’s iterative learning process in this case study to continuously refine and improve our product design. This process involves several steps, including:
- Formulating a hypothesis: We started by formulating a hypothesis based on our initial research and insights. This hypothesis helped guide our design decisions and set a baseline for evaluating the effectiveness of our design.
- Designing experiments: Next, we designed experiments to test our hypothesis. This involved selecting key metrics to measure, defining our target audience, and determining the best way to collect data.
- Collecting data: We collected both qualitative and quantitative data through a variety of methods, including user surveys, interviews, and A/B testing. This data helped us understand how users were interacting with our product and identify areas for improvement.
- Analyzing results: After collecting data, we analyzed the results to determine if our hypothesis was supported or refuted. We used statistical analysis to identify trends and patterns in the data and draw conclusions.
- Refining the hypothesis: Based on our analysis, we refined our hypothesis and made adjustments to our design. We then repeated the process, continually refining and improving our design based on new data and insights.
By using George Box’s iterative learning process, we were able to create a product that was highly effective and met the needs of our target audience. This process allowed us to continuously improve our design based on real-world data and insights, resulting in a product that was both user-friendly and highly successful.
Going beyond UX heuristics
We built a working prototype of the new features and tested it with a group of 10 users who matched our personas, in a moderated setting so we could watch where people hesitated, not just where they clicked.
Testing ran in two phases. The first was a straightforward usability pass: specific tasks, recorded interactions, and notes on anywhere the flow felt unclear. The second was a satisfaction survey using a Likert scale, asking participants to rate statements like “I found the new feature helpful” or “The new feature was easy to use.”
We coded the usability findings by hand to spot recurring pain points, and ran the survey data through statistics software to check whether what people said lined up with how they’d actually behaved. Where the two disagreed, like a feature people rated highly but struggled to use, we went back and iterated again before calling the design done.
More projects
Rechat
Eterex
Divar