KUPIVIP
KUPIVIP originated as a web-only e-commerce fashion website. Sometime in the mid-2010s, going through the motions, both iOS and Android apps were developed by different outsourced teams. That led to an inconsistent user experience: our apps looked and behaved differently across the platforms.
Goals and Challenges
- Refine and improve our user experience on mobile, to not only meet the competitive baseline, but to exceed it;
- Come up to a unified design solutions that would work great on both iOS and Android;
- Create a library of reusable components to speed-up the development process and encourage early experimentation and speedy iteration;
- Keep an eye on core metrics, such as conversion rate, average order value, cart abandonment rate, refund rate, and return rate, and constantly find ways to rocket them;
- Work within constraints of our server architecture, business model, and local laws.
Shortly before I joined the company, KUPIVIP has hired an in-house mobile development team with a very talented designer. He initially started shaping up a new visual style for our mobile apps, but soon after he quit the job, which ended up with me having to work with dozens of screens and concepts uploaded to Zeplin on my own.
On my 30-60-90 plan I set the goal to move all the pixels from Zeplin into Sketch components. We’ve created a mobile design system to help our designers, PMs, and developers communicate with each other in order to build consistent high-quality solutions at a faster pace. Our design system contains design tokens like typography, spacings, and colour scheme, and also libraries of both shared, and specific to iOS and Android components.
Creating these components was not a simple job of transferring the pixels from Zeplin, since the same visual elements could vary from screen to screen. Because of my passion for the product consistency, I had to review every pixel of the uploaded layouts to come up with a structure of components for the design system.
Besides this pattern library, the final design system also included our design principles, tone of voice, and best practices that later, with some additions and amendments, were also applied to our website.
We reworked our navigation on both platforms. More dramatic changes came to the Android app as we replaced the navigation drawer with a bottom navigation, in order to provide a better discoverability of the app’s sections for the first time users. It wasn’t a norm back then, as it was utilised only in Google Photos, but this change has performed well on a hall test and then on production.
Making it a thumb-friendly
On Android, to navigate through the hierarchy of available categories and subcategories users had to scroll the drawer (left), and the cart was located in the top right corner so it wasn’t visible when the drawer was open. We replaced the navigation drawer with a bottom navigation (center). iOS allows up to five items in the tab bar so we’ve made a decision to add the Wishlist to the navigation (right).
Personalised Home Screen
We got rid of the list of offers on the home screen and made it a hub which allows users to navigate wherever they want, and highlights the items they are currently interested in or might find relevant in future.
Catalog and Filters
Unlike the most majority of e-commerce services (at least in Russia), we had a challenge of supporting multiple shopping carts: one cart per one of three of our partners. We didn’t position ourselves as a marketplace, so we couldn’t communicate the real reasoning behind that split. We were also constrained to initiate checkout for each cart by the finance and accounting nuances.
New Cart
New Checkout
Our checkout screen had the largest dropout rate of all steps of the funnel. We’ve run a numerous amount of quantitative and qualitative tests that shown that:
- A shopping card combined with checkout on a single screen performs better;
- Many users use cart as a wish-list;
- In cases when user’s cart total was less than the minimum order value, they would rather abandon the order than add more items. Especially for sub-carts with items from our partners;
- It’s hard to make an order for another person, e.g. your relatives.
We had tested a multi-step checkout but it didn’t perform well. Instead, we continued to use a one-screen checkout with all the elements but built it from the ground up. We took into account all possible scenarios and made the checkout process linear and easy to complete, whether you are a first-time buyer or a signed-in user; whether the items value is within the limit of duty-free import or exceeds it; whether the order is below the minimum order value or not; and so on.
Initially, user had an option to deliver their order to one of our five stores which were shown in a(the) list. Later we have partnered with several parcel locker providers and expanded our pickup locations to dozens or even hundreds in each city. To show all the locations we’ve created a map view.
We had a great opportunity to partner with Tardis (now Sizolution), a new startup that measures garment properties and processes 80 customer’s body measurements from a simple questionnaire or a full body selfie. By matching that information together it helps customers select the right size.
At the time of the integration, Tardis had nothing but the technology, so I had to create the userflow from scratch. We’ve designed and tested several ideas for the questionnaire to gather user’s body parameters, and decided to use the one with image answer options. After introducing the widget, we got 20% returns decrease and 30% revenue increase.
Product screen allows users to calculate their size. To do that, user has to enter their height and weight, and then either upload a full body selfie, or pick their body type, hips and tummy shape from using the images I’ve designed. We store that information later so they only need to enter that once.
All-new user profile provides key information about bonuses and personal discounts, and allows to get in touch with customer support in a tap. But most importantly, we’ve provided holistic overview of what’s happening with the order.
Profile
All-new user profile allows users to access key information about their orders, bonuses, personal discounts, and also contact our customer support team.
Orders
My Orders section allows users to view and manage their orders; we worked with our logistic team to let users update their contacts and address for the orders which haven’t been dispatched yet.
- Read all the Baymard studies. Proved some of them wrong;
- In a year we’ve completely updated the design of the app on both platforms;
- Conducted dozens of user interviews;
- Streamlined our internal processes and improved communcation with developers. Emptied backlog;
- Onboarded two new designers;
- Created a new direction for the catalog photo shoots;
- Evolved our branding: introduced a new typeface across the platforms (thank you, Gayane Bagdasaryan!), created new guidelines for banners and graphic materials;
- Worked closely with the hired agency on a website redesign.
We’ve also created the app extensions for Apple Watch and iMessage, got featured on the App Store several times, and increased the average app rating from 3.6 to 4.7 stars. 🚀
When a visual language of our mobile apps has been established, we’ve transitioned the website to use it as well, considering how aged it looked in comparison.