UX bite: Optimising Mokobara’s shoppable video experience
Instagram-reel-style videos have made their way to e-commerce websites: I recently spotted these fast moving, eye-catching videos on Mokobara’s website and was intrigued.
Turns out these are actually shoppable videos powered by a platform called Whatmore, which claims that these videos can boost conversion rates by 10–15%. Getting this experience right is important because it could lead to a sizeable bump in conversion rates.
As someone interacting with these shoppable videos for the first time on an e-commerce site, I encountered a number of issues:
#1: Visual overload 🤯 To see fast moving videos side by side is visually overwhelming. Try focusing on a single video without getting distracted by the other (it’s hard!) Seeing two videos side by side on mobile feels like your eyes are playing ping pong, so seeing five simultaneously on desktop is a lot (scroll to the bottom to see). The lack of focus can feel overwhelming.
#2: Lack of clarity 🤔 It’s not obvious that each video is actually a snippet of a longer 10–20 second video (not just a GIF on loop), and that you have to click to watch the full thing. It’s also not obvious that there are more than just two videos on mobile, as there’s no indication that the user should scroll horizontally. High quality videos made to sell the product, that users might never actually see!
#3: Cognitive effort 😬 In order to understand which product is featured in each video, the user has to parse the fast moving shots and read the accompanying product details — which is asking quite a lot from the user when there’s already so much going on.
How can Mokobara turn this into a seamless experience and encourage users to watch the videos with minimal friction? I reimagined what this section of the website could look like:
What changed?
✨ Featuring one video at a time: Highlight a single video at a time and use a static cover for the surrounding videos instead of looping GIFs, so users can focus on watching the content in focus without the visual overload.
✨ Auto-playing the full video: Rather than having the user take an extra step (clicking to watch the full video), have the full video automatically play on the landing page itself. The less friction, the more likely the video is likely to capture the user’s attention. It’s more captivating and easy on the eyes to see a continuous video than a looping GIF too.
✨ Guiding the user to swipe: Include a small preview of the videos on either side helps users understand that they can swipe to see more.
✨ Adding a call to action: Feature a “shop now” button on the video to direct users to the product page and help drive conversions.
✨ Helping users distinguish better: Add a thumbnail along with the product details to help clarify which product is being featured.
And a bonus:
✨ Designing for accessibility: The current discount tag (white text on ochre) fails the contrast test, which means people with poorer vision will not be able to read it. Switch the text to black and use Mokobara’s bright brand yellow, to ensure that *everyone* can clearly see those juicy discounts.
And that’s a reimagined experience to fully leverage Mokobara’s high quality video content, engage users, and maximise conversions! (P.S: these are all just recommendations to be tested)
If you made it to the bottom, enjoy the before & after of the experience on desktop:
— —
Want something like this for your website? DM me or reach out via email
