Divar Image Editor

🗂 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.

😥 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 process, so I can submit my ad faster and don't get rejected because of the image issues.

👨‍👩‍👦‍👦 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.

📚 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.

📊 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.

🖥️ 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

📲 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.

🧐 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 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.