This case study is about the largest classified ads platform in Iran, Divar, that has more than 35 million users and over 180 categories and services.

On our app, from March 2020, simultaneously with the onset of the corona pandemic, physical stores can have a virtual presence, which is one of the values the our product offers sellers. The problem we faced was promoting stores and introducing them to users using their physical presence.

Goal

In order to increase trust in the stores present physically, it was important to be able to better display them. We had to follow our values in the product department, which include creating more profit, less hassle, and more credibility for the sellers.

Checking the Current Status

The first step is to determine where the store has gained trust from buyers.

Most sellers have Instagram pages and sell their products on Instagram as well. Due to the similarities between Instagram and our product store, I checked how Instagram stores gain trust from their users.

Photos of the posts:

Some sellers include photos of their stores in their posts.

Description of the posts:

In the description of most store posts, they refer to the address and location of the store.

Instagram:

Posts and Highlights:

On the pages of some successful Instagram sellers, we found them to post pictures of inside the store, the warehouse, and the process of sending goods to gain customers’ trust.

Ideation:

After many ideas were presented, two designs were selected for further consideration.

1. Adding headers to the stores page

2. Adding gallery section

(Note that the page UIs are concepts and the original screens are at the end of the article)

Decision making and Implementation:

As a result of the costs and benefits, we decided to implement the second one.

Display place:

First and foremost, buyers need to see the posts and products offered by a store on the store page. Therefore, the gallery could not be shown on the main page of the store, which includes the name, address, and logo. In case of a gallery in the main page, the post gets shifted down.

How to display:

First iteration

Tabs will be added to the store page so posts can be placed in the default tab and other data can be placed in the second tab.

The design is perfect, the main purpose of the page is preserved, and users can easily access posts. In the other side, all information about the store is placed in a separate section. But there was a problem.

Tabs are incompatible with internal design consistency and the SONNAT design system. In the SONNAT design system, the Tabs can only be used on top of the pages — not in the middle. Therefore, we cannot use them in the middle of a page, and the design should be changed.

Second Iteration

We used a SelectorRow to navigate users in the information page. SelectorRow is a component in SONNAT to navigate users to another page.

Then we designed the store page with SelectorRow as shown below:

How to show the gallery?

In SONNAT’s design system, three components can be used in this case. Suggestion Row, Image Slider and Carousel Row.

First, we need to identify what we need to show. Just images? Or do we need captions as well? We decided to use Carousel Row.

Carousel rows include images without captions, so users can tell that it’s a gallery and has groups of photos. In the future, we can check the photos that’ve been uploaded and decide whether to include captions or not.

Finally, the flow for buyer’s side looks like below:

Sellers Side:

In contrast, we should design the sellers flow so that they can add photos to the store information page. The flow begins with the screen where sellers choose photos from a gallery.

On the Adding Gallery screen, you can see how we explain what a photo gallery is and how to use it. Also, we offer a sample gallery to show sellers which photos are appropriate and useful. A SelectorRow displays acceptable photo guidelines.

Users can select images from a camera or phone gallery by tapping on ImageSelector, and in the gallery they can multi-select up to six photos. Users can arrange, delete and edit photos by tapping them.

Sellers can use this feature in two ways:

1. Registration flow:

During registration flow, we add a store gallery field as an optional field. By tapping on that field, the gallery flow starts.

2. Stores Setting:

We added a gallery field in the settings page so that sellers can upload images.

---

Implementation considerations:

In our product posts, sellers can only post product photos and other photos forbidden. This gallery allows sellers to showcase their store and other items. Therefore, the rules for this part do not have many limitations.

Unlike the post section, they can also add photos of different scales in the galley. Images in posts are cropped to 4:3 scale, but gallery photos do not have this limitation. The first view of CarouselRow shows photos in 4:3 scale, but after tapping on photos, in full screen mode, we shows the full image of the photos.

Metrics:

According to the task goal, we need to measure buyer trust in sellers. When a buyer has trust in the seller, he/she is ready to buy from him/her. Or one step earlier, the buyer has already made contact with the seller. Therefore we can measure GetContact Metric on sellers who have a photo gallery on their store page compared with other stores.

GetContact is the way buyers interact with a post by a seller, and it contains:

1. Number of tapping on Call Button.
2. Number of tapping on Chat with seller.
3. Number of post Bookmarks.

Usage Metrics:

We can measure usage of our feature with:

1. Number of tapping on store information SelectorRow
2. Funnel of flow from opening store page to view of photos in gallery. (Tapping on the photos in gallery)
3. Number of uploaded images by sellers.

Design Impact:

After 2 month from launching this feature, 21% of new sellers use the galley, and 8% previous sellers active their gallery.

Data launched recently and there is not enough data to show GetContact statistics. In the future, you can find more information by following my Medium account.

---

Original UI Designs: