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.
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.
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.
Some sellers include photos of their stores in their posts.
In the description of most store posts, they refer to the address and location of the store.
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.
After many ideas were presented, two designs were selected for further consideration.
(Note that the page UIs are concepts and the original screens are at the end of the article)
As a result of the costs and benefits, we decided to implement the second one.
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.
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.
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:
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:
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.
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.
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.
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:
We can measure usage of our feature with:
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: