JumiAR: The Jumia AR Experience

Mobile commerce will outpace non-mobile commerce in 2021. In 2021, mobile commerce sales will account for more than half of total e-commerce sales. Today, one-third of purchasing decisions are influenced by researching products on mobile devices. More than half of retailers already have a mobile app. As much as people have gotten used to the idea of e-commerce, there are still some purchases for which we need a little bit more contextual information. That can be a barrier to selling certain product categories online.

AR technology could offer immersive solutions to close the online and in-store shopping experience gap. More consumers are already looking to such tools as a key way to boost their product discovery and brand connection process.

My role

UX Researcher

UI Designer

Concept Artist

Why Jumia

Jumia is the leading pan-African e-commerce platform active across 11 countries on the continent. The platform consists of a marketplace connecting thousands of sellers to millions of consumers, with integrated logistics and digital payment services.

Jumia Marketplace offers goods from a large and diverse group of sellers across various categories, including apparel, smartphones, electronics, homeware, and beauty. Jumia also provides consumers with easy access to several services, such as restaurant food delivery and everyday digital services including airtime recharge, utility bills payment, and transport ticketing.

These statistics show that Jumia is ready to incorporate futuristic technology into its platform to further increase the user experience.

The Problem

Imagine the frustration of not knowing the name of that product right there in front of you but you're so much in need of buying one. Not just that, the sad tales of buying a shoe for your next interview just to realize you got a toy.

Ideation

One of the challenges of online shopping is not being able to test out what you want to purchase, so you have to deal with the disappointment after delivery. But with the integration of AR technology, customers can now practically test out the product from their mobile devices by adding the item into their environment in real-time.

Not just that, customers can now scan products anywhere and make purchases directly from their Jumia app.

The Solution

After understanding the demands for this concept, we decided it would be best to make some UI upgrades to the current Jumia app design to suit the experience we wanted to create. Below is a list of what we decided to revamp

1. The home screen experience
2. Create a flow in which the AR feature will be functional
3. Improve the major UI components of the app to suit the futuristic design
4. Create 3D models of the products to be showcased.

User flow

We designed a User flow to validate the idea and create a functional design for the AR feature.

Wireframes

After creating the User flow, I began creating wireframes to validate the flow and test out possible visual elements that will be used in the design.

Design style guide

For this project, I prepared a simple design style guide for colors and typography.

Visual Design

In this phase, I jump right into adding colors, and images. During this process, I produce high-quality visual designs as well as guidelines and specifications. While also making emphasis on the AR object so it's clear for the user he will transition into AR mode when tapping on the scanner.

The Home Screen

To make the whole mobile experience uniform and the AR feature, we decided that the home screen would need a bit of a tweak and we gave a minimalistic design and has the AR feature right there at the users' reach.

Users can easily search using the object recognition on the search bar that allows them to scan an object. The app shows a list of results available on the Jumia inventory or tests a product from their cart using the AR feature at the center of the app navigation.

The search screen: A new way to search

This is one side of the solution, one we believe will make shopping a more exciting one. With the scan to search feature, users can now search for items they don't know the name of and get instant results from the Jumia inventory and make quick purchases.

Here's a prototype of the UI, you can also test it out using this link here

Test AR: Real-time Product Testing

The second part of the solutions features a real-time product test feature using Augmented Reality right there from your mobile phone. This technology helps you simulate products on flat surfaces and your face as well. The technology is limitless and a whole lot can be done using this technological innovation.

To use the feature, the user selects the AR button and scans for a flat surface which may be the floor or the wall, the calibration changes based on the product type. The user is prompted to select a product from their cart or search for a new product using the regular search or the scan option. Once the product is selected, it would be placed on the surface, and the user can take a virtual tour around the chosen product.

Click here to test it out

Conclusion

The entire design process of this concept design was totally a new experience for me as a designer. I got the opportunity to further learn to understand the basic principles of AR technology and how it affects human life and experience.

Getting resources to help me focus was very tasking as of the time I started the design process there were barely any quality materials to help navigate, so I had to improvise in some areas, I also had to learn a bit of 3D modeling and the concept of 3D geometry.

Finally, creating realistic 3D-like angles on Figma was a completely mind-blowing experience for me as I never actually thought I'd have been able to do so at first.

Next time, I will like to work on easier flows for this design and incorporate it into the application's web version. I also intend to learn 3D modeling to create more precise angles for a more realistic and improved experience.

Thank you for following, your time spent is appreciated.

Feel free to connect with me on LinkedIn, Behance, Dribbble, and Twitter.