Bukalapak (or written normally in Indonesia as ‘Buka Lapak’) means Open Stores. It is one of the largest unicorn e-commerce in Southeast Asia.
Background
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 the 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.
Goals
The goal is users can easily copy-paste the embedded code link of the 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, we previously still adopted the layout from the admin side. So the design was the same as the admin panel, the difference was the function 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 would come up with various image size formats that:
- They needed to 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 image below- on each creative file seem redundant and not effective to indicate that inside each Creative File, there are various image sizes. And with this type of layout, users were not expected to open the modal when they clicked the thumbnails. Instead, they expected that when they clicked the thumbnail, they could see all image size formats at one time and then choose one.
Before
4 Squares Thumbnails within this example- ‘+2’ to indicate there are various size formats of images
The user opened the modal/pop-up when they clicked the thumbnails. which users said was unexpected. Also, users cannot see all image size formats at one time before they choose one.
After – Solution
Because the old design above, which was showing the 4 squares in very small thumbnails with the same image, 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.
In the new design, the thumbnails are bigger and use a card style with only one image preview because, actually, all the image banner designs are the same in each 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 clearer information, particularly on the image sizes option to choose. We use the dropdown so the users can now see all the image size options at one time.
2. We remove the modal/pop-up and open the new page instead.
DETAIL OF OPTION 2: Keep the modal when clicking the thumbnail/card, but use the dropdown to choose image size formats. So users can now see all the image size options.
When users click zoom-in on the top right, it will show the full size of the image in a modal (pop-up).
Between the 2 design alternatives
We decided to choose the right one without a modal, hence it’s better when the user zooms in on 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 isthat 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.
