Bukalapak (or written normally in Indonesia as ‘Buka Lapak’) means Open Stores. It is one of the largest unicorn e-commerce in Southeast Asia.
I had a redesign project when I worked 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 is 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 does the transaction in Bukalapak via their websites or blogs.
Note: the banner ad images are created by the marketing designers’ team.
The goal is users can easily copy-paste the embedded code link of the image to their own sites.
1 Product Designer (me)
1 UX Researcher
1 Product Manager
1 Associate Product Manager
2 Front End Developer
2 Back End Developer
On the old layout, previously we still adopted the layout from the admin side. So the design was the same as the admin panel, the difference was the function of it where the admin uploaded these images to be published on the user’s dashboard.
After we did some user testing, we found out that when users opened each creative file thumbnail, the modal will come up with various image size formats that they can see one by one. They need to slide it to the left and right to see all the image sizes that are available and not able to see all size formats at one time before they choose one. This flow, layout, and interaction were unexpected to the users.
Also the 4 squares in very small thumbnails with the same images -see below image- on each creative file 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 clicked the thumbnail, they can see all image size formats at one time and then choose one.
After – Solution
Because 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.
When users click 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 the image sizes option to choose. We use the dropdown so the users now can see all the image size options at one time.
2. We remove the modal/pop-up and open the new page instead.
Between 2 design alternatives
We decided to choose the right one which without a modal, hence it’s better when the user zoom-in the image to see it on the modal (pop-up). So there wouldn’t be a modal behind the 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 clicking 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.