Jumbo Colombia
Santiago de Chile, Abr 2018 – Nov 2019
Introduction
The Jumbo’s app mobile provides a digital showcase of exhibition and sell edible, technological and household products for mass consumption.
Role
Experience design, visual design (UI), interaction design, usability. Team of 2 UX, 9 developers (iOS / Android, backend), 1 BA, 1 QA, 1 PO, 1 Scrum master. Agile Methodologies: Scrum
Client
Jumbo Colombia. Cencosud.
Problem
In need of improving the funnel metrics, the following KPIs have been analyzed: conversion, retention and growth, and within this the DAU, WAU and MAU. This analysis showed 19.5% of users who, being active in the app, entered the shopping cart; of this 19.5% 24.1% entered the checkout (which corresponds to 4.7% of the total active users of the app) and of that 24.1% only 9.8% obtained a successful purchase (corresponding to 1.9% of total users assets of the app), taking into account that it is estimated that from 3.5% of purchase the standard of a successful shopping cart for mobile apps starts. These numbers continued to decrease in the months following the evaluation, reaching 0.9% of successful purchases.
Analysis
After studying these percentages, we performed the Yusef Hassan heuristic test http://www.yusef.es/ and the NN Group PURE test https://www.nngroup.com/articles/pure-method/ to find the points of friction and thus optimize the criteria by which users left the application from the moment they access the shopping cart and then the moment they access the checkout. After analyzing the evaluated criteria, we selected 3 that, when measured, yielded the maximum friction points and their low ease of use:
Layout
The hierarchy areas of the cart are wasted with large empty spaces without relevant information, heavy iconography that overload with information leaving aside what should be more striking, an extensive scroll in cases of large numbers of products without splitting or leaving fixed elements for quick access, in short misuse of visual space.
Accesibility
The font size is not optimal for mobile devices, it is not large enough for its readability and contrast.
Being a web-view inserted in the app it is not possible to control the weight of that section resulting in a slow and frustrating experience.
Control & feedback
The manner of presentation of the snackbars and informative dialogues are intrusive, and alarming, optimized only for the desktop experience. In the cases of cars with mixed products (groceries and others), the deliveries must be divided, select dispatch stores and enter addresses generating complex and exhausting flows given the multitude of options to choose from, complicating their understanding and visualization.
Objectives
The improvement of the purchase, satisfaction and loyalty rates related to the experience in the cart and the checkout, creating a service that provides confidence and flexibility to increase the conversion, retention and growth of users.
That said, I examined the following:
- How users behave during the purchase flow.
- What are the high points where they get blocked.
- Why they abandon their purchase.
Solution
The process of creating the following elements was a lot of ideas and time spent. In the end all this created library immensely facilitated the work being able to create up to 15 application screens in just a few hours. Along with the development of the application, the design grew both on its screens and the elements of the library, thanks to feedback from the client, the team and their own criteria.
Mockup flow & interaction
The redistribution of the purchase flow at checkout: leaving a central screen and restricting the user in their navigation in the identification, delivery method and payment method steps given the amount of information requested, each time a step is completed The user returns to the summary screen where he will find the most relevant information that he has just completed, or else he will notify him that he has steps to complete, giving a sense of order and centrality, this so as not to saturate with information, quickly and legibly access to each step, easily edit and save changes and be able to make the purchase in one click.
Grid
Thanks to the use of a grid based on multiples of 8px and optimized for mobile devices, white spaces and margins that are fixed, proportional and stable for each visual item that maintain harmony on the screen can be achieved.
Colors
Emphasis on white occupying almost 80% of the visual field, this due to the information overload, in addition to the feeling of cleanliness and security that this color gives. For effective contrast I used corporate green and orange for call to actions and 5 shades of gray for typographic hierarchy.
Tipography
The source sans pro apart from being a modern and elegant typeface has condensed characteristics that help optimize spaces by entering more information in the same width. It has 14 different styles for greater control of shape and hierarchy.
Icons
Thiny icons, which reflect elegance and dynamism with friendly shapes and predominance of curved angles, which with sufficient contrast do not saturate the screen, focusing the user on images and typographic information, thus serving as an informative and interactional guide.
Buttons
Thinking about their main function to carry out certain actions calling the user’s attention depending on the importance of the action, I have designed them in 5 different states: Primary, secondary, tertiary, link and icon-text.
Forms
The information being entered by users, design the same elements and components to provide a consistent language that intuitively identifies by learning curve the different types of forms to fill out of the application.
User testing
We conducted several usability tests with different people who meet the characteristics developed in the archetype, and despite having 1 point of friction to redesign and which was not blocking to finalize the purchase, we thus tested the effectiveness of the new flow model and proposed design for the shopping experience.
Metodology
In a multidisciplinary team and working on an agile methodology, the formation of the cell was as follows: PO, QA, BA, Developers (Front-end iOS and Android and back-end developers), 2 UX, and Scrum master. The working times or sprints, with a duration of two weeks, are divided as follows:
Presentation of the product backlog to business.
Planning, where an estimate is made about the work duration of the tasks agreed in the backlog.
Subsequent days the tasks run and contain most of the time and effort of the sprint.
In the last 2 days there are 2 meetings:
The review, presentation to business of what was agreed in the backlog.
The retrospective, where the topics of teamwork are discussed, the points that are good and should be maintained and the blocking issues to improve, all in collective and individual.
Learning
Collaboration is key to making satisfactory projects, since exposure to various opinions, experiences, criticisms, tests, make evaluate each point of the process, especially in vast works where the beginning can be quite nebulous. The time dedicated to the proposal of ideas, planning, sketching, design and development made us proudly deliver a new face of the product: a light, minimalist, intuitive and personalized platform.
