Milad Safarzadeh
UX Case Studies
Back to milaad.net

Divar Image Editor

Making it easier for users to edit images and reducing ads rejection by the review team. image editing is going to be a part of the ad submission process.

6 min read

Divar Image Editor – UX Case Study

πŸ—‚ Overview

Divar, Iran's leading online classified ads service. One of the most popular Cafe Bazaar’s products is the largest and fastest-growing mobile-first general classifieds with +30 Million Monthly Active Users and +500k daily listings. Active listing's value on Divar is almost 6 percent of Iran's GDP!


πŸ‘¨β€πŸ’» My Role

UX/Interaction Designer

We are a team of 12 designers working on Divar (Including two verticals). UX researchers, Interaction Designers, UX/UI Designers, UX Engineers, and a Design System Manager.

Divar Image Editor – UX Case Study

πŸ˜₯ Problem/Challenge

Divar’s users submit hundreds of thousands of ads every month and their ads get reviewed by the Review team or our review Bots. user's ads get rejected because the ads in the images need rotation or need to have the standard ratio. Users also had hundreds of feedbacks requesting the ability to edit the images before submitting them. hiding a part of the image was another problem. Users need to hide their car plates for example. 

Framing with JTBD

When I'm submitting my ad, I want to edit my images in the processso I can submit my ad faster and don't get rejected because of the image issues.

Divar Image Editor – UX Case Study

πŸ‘¨β€πŸ‘©β€πŸ‘¦β€πŸ‘¦ Users & Audience

500 thousands of users submitting different ads every day with different backgrounds & knowledge in different ad categories.

🎯 Goals

Make it fast, easy and as simple and possible for users to Crop, Rotate or Brush any part of the image in the ad submission process.

😰 Product side challenges

Because mobile devices have small screens, an in-app photo editor can’t include all the tools together. Biderectionality, Localization, system-wide consistency.

Everything starts with the basics!Β 

Everything starts with the basics! 

πŸ“š My Process

Gathering requirements, Problem defining, Navigating through Data to validate the problem or see what I can find out my self, Generating Ideas, Gathering feedback and discussing it with other team members, Designing Iterations, Prototyping, Feedback, Defining Metrics, Delivering to the Client team and DSM.

Define, Research, Design & Prototype, Evaluation, Iterating & Delivery.

Divar Image Editor – UX Case Study
Divar Image Editor – UX Case Study

πŸ“Š Gathering data

I have a background in digital web analytics and a basic understanding of quant data analysis. so I did run a few queries to see what are the most rejection reasons? 

Key Insights:

  • One of the most rejection reasons was "needs rotation".
  • One of the most observed issues by the customer support team was people using weird stuff to cover some parts of their ad images.

πŸ› οΈ Structuring Information Architecture

I did a competitor analysis to identify common tools and design patterns in photo editing apps to structure our image editor Information Architecture. To simplify the learning process for novice users, we needed to use common design patterns. We didn't want to make it another confusion for them to edit the photo in the submission process.

I analyzed Instagram, VSCO, and Snapseed. The apps with the most users in Iran which have image editing features.

Divar Image Editor – UX Case Study
Divar Image Editor – UX Case Study

πŸ–₯️ Design

Defining clear objectives for our design.

In response to the pain points we identified during our research, we established 3 main objectives to guide our design decisions moving forward.

  • Simplifying the photo editing process
  • Including only the necessary tools like rotate, brush and crop.
  • Working with familiar frameworks of other photo editing applications.

Tools I use: Pen & Paper, Balsamiq Mockups, Sketch

Divar Image Editor – UX Case Study
I used

I used "Principe" for prototyping

πŸ“² Prototype

Prototyping is an integral part of my design process for two key reasons: 

  1. Visualization & gathering feedback from teams and users. You can interact with a near-final product and highlight areas that are less than user-friendly. 

  2. The design team can then iterate the design before the product team rolls out the final product, saves us both time and money. They’re good for testing and for getting a team’s final sign off on a product design before development begins.

Divar Image Editor – UX Case Study

🧐 How we are going to measure it's effectiveness?

By setting action logs and events we would be able to measure it.

  • Usage of the edit button in the ad submission process.
  • Usage of tools like crop, rotate and brush in the image editor.
  • Saving the edited image.
  • Ad rejection rate by review team for "needs rotation" reason.

Design critique session with UX chapter

Design critique session with UX chapter

πŸ—£οΈ Design critique Session with the UX Chapter

Conducting a productive design critique session can be challenging. Designers often forget that not everyone understands the finer points of the design process. I gathered feedback on the designs in the design critique session to iterate again.

πŸ™‹β€β™‚οΈ What I've learned?

While working on this project it was important that I took a step back to understand the constraints we were working under. the challenges were also complicated due to the need for constant communication with the Design system manager to make sure we are on the right path and solving the right problem with the right reusable components. 

Divar Image Editor – UX Case Study

πŸ“ˆ The Impact

The editor could help users to edit the images before submitting their ads so they won’t be able to re-submit because of a simple β€œNeeds rotation” reason and it leads to reduced customer service calls and ad rejections. made it easier for users to have better control over their ad’s images.

Divar Image Editor – UX Case Study

Next Iteration

The AI team working on detecting the license plate automatically in images So we can detect it and give the user the proper tool to hide only the license plate part of the image without having to zoom in and brush that part.

This is our amazing team I have the pleasure to work with everyday.

This is our amazing team I have the pleasure to work with everyday.