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.
The goal is users can easily copy-paste the embed code link of 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 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.
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.
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.
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.