Bukalapak Affiliate Marketing – Creative Files Feature

Background

I had a redesign project when I was working at Bukalapak in the Affiliate Marketing team to redesign the Creative Files feature for the user’s side. There are also internal users for Affiliate Marketing which as admin. This feature is about creative image files of Bukalapak Promo’s (and non-promo) collection for users to put on their own sites or blogs as they are affiliate marketers. So they can earn money from Bukalapak, if there is a visitor who clicks the image banner and do the transaction in Bukalapak via their websites or blogs.

Goals

The goal is users can easily copy-paste the embed code link of image to their own sites.

Team:
1 Product Designer (me)
1 UX Researcher
1 Product Manager
1 Associate Product Manager
2 Front End Developer
2 Back End Developer

Problem:

On the old layout, previously we have still adopted the layout from the admin side. So the design was the same with the admin panel, the difference was the function of it where the admin uploaded these images to be published on the users dashboard.

After we did some user testing, we found out when users opened each creative file thumbnail, the modal will came up with various image size formats that they can see it one by one. They need to slide it to the left and right to see all the image sizes that available and not able to see all size formats at one time before they choose one. This flow, layout, and interaction were unexpectedly for the users.

Also the 4 squares in very small thumbnails with the same images -see below image- on each creative files seems redundant and not effective to indicate that inside each Creative Files, there are various image sizes. And with this type of layout, users were not expected to open the modal when they click the thumbnails. Instead, they expected when they clicking the thumbnail, they can see all image size formats at one time then choose one.

Before

4 Squares Thumbnails with -in this example- ‘+2’ to indicate there are various size formats of images
The user opened the modal/pop-up when they clicking the thumbnails. which users said this is unexpected. Also users cannot see all image size formats at one time before they choose one.

After – Solution

Because of in old design above which was showing the 4 squares in very small thumbnails with the same images looks redundant and the design of the banner promo was too small and seems not really clear.

So the design solution here is to make the thumbnail -with only one image preview- bigger with card style. We actually need to show it only one image preview (not 4) because the design of each creative files are all the same. We can show the total number of banner size formats on the card itself simply with text, below the image card within the title and dates of the creative files.

On the new design the thumbnails are bigger and using card style with only one image preview because actually all the image banner designs are all the same in each Creative Files.

When users clicking the card/thumbnail here, there are 2 options of alternatives that we made before;

1. To keep the modal/pop-up but with more clear information particularly on image sizes option to choose. We use the dropdown so the users now can see all the image sizes option at one time.

2. We remove the modal/pop-up and open the new page instead.

DETAIL OF OPTION 1: Open new page when clicking the thumbnail/card
DETAIL OF OPTION 2: Keep the modal when clicking the thumbnail/card, but using the dropdown to choose image size formats. So users now can see all the image sizes option.
When users clicking zoom-in on the top right, it will show the full size of the image with modal (pop-up).

Between 2 design alternatives

We decided to chose the right one which without modal, hence it’s better when user zoom-in the image to see it on the modal (pop-up). So there wouldn’t be modal behind modal.

The trade-off with our choice is users need to click ‘Back’ to see other Creative Files. I asked the developer, will it need more time to load when users click BACK instead of click the ‘X Close’ to see all the Creative Files? He said, once users loaded the files, it won’t take that long to go back.

We always did validation, so there was no problem anymore with this solution.