Designing Africa's Largest Online Retailer

eCommerce

Background

Quoted by the media as "The new African Amazon", Jumia, Africa's largest online retailer, is on a mission to improve the quality of everyday life through technology. That's what led them to reach out to Pixelmatters.

They didn't just want to make their online shopping experience more pleasant, they wanted to guarantee it would be accessible to anyone, anywhere - a mission that matches our very own vision.

Challenge

The business of selling consumer goods and services online is a relatively young market across Africa, and, although showing promising signs of growth, there are still considerable technical challenges that need to be considered.

Low-performance devices and poor internet connections are a frequent reality across Africa, one that can lead users to leave the app without purchasing what they need. Ultimately, this was the challenge to beat in Jumia's path to making online shopping accessible to anyone.

Representation of some constraints taken into consideration during the design process.
Representation of some constraints taken into consideration during the design process.

The bridge to design

You can say this project required efforts on a global scale, with different teams working "side-by-side" with hundreds of miles between them, all trying to reach the same goal, and Pixelmatters was the bridge to get there.

On one side of the bridge, in Africa, was the Jumia's team responsible for the definition of the user experience, and on the other side was Jumia's development team working from Porto. Even though Jumia's development team was working in the same city, Porto, the entire collaboration happened remotely.

Asynchronous communication and collaboration between Jumia and Pixelmatters team.
Asynchronous communication and collaboration between Jumia and Pixelmatters team.

Understanding the U in UX

Before diving into the design, we had to take a step back and go over the groundwork provided by the Jumia's team. They were proactive in understanding their user's needs, which helped to speed up the project.

By going over every research and UX decision previously made, including analyzing the user flows and wireframes, we guaranteed the usability heuristics were being applied correctly before making any further UX decisions. We ended up making a few suggestions which were then included, and after agreeing on the path we should take, the new Jumia's look and feel followed.

Representation of Jumia's flowmap.
Representation of Jumia's flowmap.

Less is more conversions

After going through some changes in the UX, we went on to design what would become Jumia's new look and feel. The expression that better translated this new look and feel was "less is more", where every design decision had in mind this mindset of simplification.

The goal was to make sure Jumia's users would only have to take the necessary actions to get to the checkout and complete a purchase. From a visual standpoint, one of the biggest challenges was the cluttered multi-market products that we simplified, also following the user's preferences. We even avoided the usage of custom fonts, that could be an issue in terms of load time.

Flexible UI

Anticipating the need for scalability, as with any other eCommerce app or website, we designed and provided components that could easily adjust to different screen sizes and different contexts in the purchase process.

This flexibility in the UI not only allowed us to design clear interactions and reach a high level of consistency, but it also laid the ground for future scalability while making the app's management simple and straightforward for the Jumia's team.

Different components adjustable to different screen sizes and contexts.
Different components adjustable to different screen sizes and contexts.

Fine-tuning the checkout

Poor internet connection or low-performance devices negatively impact the interaction a user has with the app, which may result in them leaving without ever getting to the checkout and making a purchase, or in other words, converting.

The original checkout flow was divided into steps, not only for performance reasons but also to inform the user of his progress during the purchase. The post-checkout experience was also redesigned, and features like tracking the orders and rating a product were included, making the checkout not only simple but also functional.

Representation of the checkout flow divided into steps.
Representation of the checkout flow divided into steps.

Overcoming the bounces

Optimizing the original checkout flow was the first step of an iterative process. In order to guarantee users stayed in the platform and completed a purchase, even with a poor internet connection, we had to also take into account their feedback and let testing guide our design decisions.

The end goal was to ultimately reduce the bounce rate, and overcome these technical limitations, without ever neglecting the user's behavior, preferences, and needs.

Different checkout iterations to reduce bounce rates.
Different checkout iterations to reduce bounce rates.

Designing responsively

This project was not only big in the number of miles distancing the teams in Africa and Europe. Jumia was one of the few projects to date where we designed for 5 platforms simultaneously, including Android smartphone native app, Android tablet native app, iOS smartphone native app, iOS tablet native app, and Mobile Web.

Same screens adapted to different platforms and devices.
Same screens adapted to different platforms and devices.

Ensuring consistency

With the different types of mobile devices being used to access the platform, ensuring consistency in every design was key to guarantee online experiences users could rely on.

We made sure the design system was built considering this applicability in different contexts and devices, by using components that work in a similar way across devices. These compononents could easily adapt to native behaviors and different guidelines, including the Apple Human Interface Guidelines or the Android Material Design.

Several components created to maintain consistency and guarantee scalability.
Several components created to maintain consistency and guarantee scalability.

An ongoing "handoff"

Since Jumia already had their own development team in place, collaboration happened in a hybrid approach scenario, as with many other clients that reach out to us. We usually don't collaborate as an "outsourced" company but as an integrated part of our client's teams.

Instead of a "handoff" from Pixelmatters' design team to Jumia's development team, an ongoing collaboration between both teams was essential to secure the quality and consistency the mobile app needed. We established communication channels from the get-go and made sure every Design process was in sync with Development, plus all the ongoing specifications, decisions, and components were properly documented.

Ongoing collaborative approach.
Ongoing collaborative approach.

The Result

After a design journey of simplification and optimizations, the result could not be any more fulfilling than it was. Even though the work we created with Jumia is not entirely visible, and some of it was never released, we ended up taking another step forward in this long path of making people's life a little easier with top-notch products, this time alongside the new "African Amazon”, Jumia.

Summing it up

Jumia is rapidly transforming the African digital landscape, creating opportunities, and making online shopping accessible to a population that should have the same opportunities as the rest of us. Digital should be accessible to anyone, anywhere - that's the World we believe in.

Check live website