KIDCITY

B2B E-Commerce

Redesigned Kidcity B2B retailers app - Increased 5X Conversion On App Install & New Subscribers

Project Overview

Kidcity is a B2B Ecommerce app, designed to connect kidswear retailers with manufacturers in India. As the app had been launched with an outdated design and unsatisfactory user experience, my task was to redesign it.

BEFORE REDESIGN

My Role

Lead UX Research UI & Visual Interaction Design

Team

1 UX UI Designer

4 Developers

1 Project Manager

Timeline

Over 6 Months Research + Design + Testing

Challenges

The key challenges with Kidcity's existing app included outdated visuals, a complicated invoicing system in the cart, and a lack of direct communication options. The time constraint to redesign over 50 pages in a month and the budgetary restrictions, given Kidcity is a startup, added another layer of complexity to these challenges.

Time Constraints

Budget Restrictions

Cluttered Design

DESIGN PROCESS

STEP 1

Research

Brand & User research to understand audience & business needs and goals.

STEP 2

Define the Problem

Define problem and create user-centered solutions

STEP 3

UI & Prototype

Develop UI & prototype for testing and feedback

STEP 4

User Testing

Conduct user testing and gather feedback

STEP 5

Iteration

Refine prototype and iterate for improvement

STEP 6

Launch and Evaluation

Launch and continuously evaluate product success

Research

To tackle these challenges, I started with interviewing stakeholders to understand the business perspective. Simultaneously, I conducted user interviews to gain insights into the retailers' experience with the app. These interviews were immensely helpful in understanding the pain points of the users and the expectations of the stakeholders.

USER PERSONA

Based on the collected data, I created user personas representing our primary users - kidswear retailers. This persona aided us in understanding our users' needs, experiences, behaviors, and goals.

USER JOURNEY MAP

Next, I mapped the user journey detailing the process a retailer would take when using Kidcity, highlighting the points of frustration in the original design and how they were addressed in the redesigned version.

DESIGN IMPLEMENTATION

I then redesigned the Kidcity app, focusing on creating a simplified and accessible design. I added features like a Custom Stepper Cart, a custom filter component, Sticky Contact Button and a city-based product catalog. Each of these additions aimed to improve user experience. Let's Talk In Details Below.

BEFORE REDESIGN

CART

The Challenge

Each city on the KidCity platform had its own rules for taxes and minimum order values. This was causing confusion for users and was making the billing process complicated. Furthermore, users could only download a single invoice for all city orders combined, while they expressed a need for separate invoices for each city.

AFTER REDESIGN

CART

The Solution

In the face of this challenge, I designed a new cart system. Instead of having a single invoice for all the orders, the new system allows users to have separate invoices for each city. Although it increased the number of clicks for the user, it solved a major pain point and was met with positive feedback from users

BEFORE

AFTER

FILTER

Redesigned the filter section

CONTACT OPTION

Added a Sticky Contact Button

FIGMA

For Design and Prototyping

PHOTOSHOP

For Graphics Design & Photo Editing

AFTER EFFECTS

For Animation And Interaction

LOTTIE FILES

For Animation And Interaction

FILMORA PRO

For Video/Visual Editing

CITY BASED CATALOGUE

Added a city based catalogue

DESIGN SYSTEM

Expanding and modernizing an established brand identity.

RESULTS

From 1000 to 5000+ Retailers

4.8 Google Play Rating

Raised Fundings

FINAL UI

My Tech Stack

Results

FINAL UI

DESIGN PROCESS

STEP 1

Research

to understand user & business needs and goals

STEP 2

Wireframing

Choose solution and create wireframe

STEP 3

Prototyping

Develop prototype for testing and feedback

STEP 4

User Testing

Conduct user testing and gather feedback

STEP 5

Iteration

Refine prototype and iterate for improvement

STEP 6

Launch and Evaluation

Launch and continuously evaluate product success

USER PERSONA - PARTNER

USER JOURNEY MAP - PARTNER

SOLUTION

To address this, I conceptualized and designed an intuitive and easy-to-use Partner Dashboard App. The interface was kept clean and minimal, focusing on simplicity and clarity of information. In collaboration with the stakeholders, I formulated the app's wireframe and navigation structure, ensuring that it met the needs of the users while adhering to the business objectives. This effort resulted in a comprehensive tool that enhanced the partners' ability to track and manage their contributions to Kidcity effectively.

WIREFRAME

The app's user base magnified from over 100 to more than 5000 retailers, indicating a robust expansion in the Indian market.
Our improved UI/UX design received acclaim from users, evidenced by high ratings on Google Play and the Apple Store, signifying enhanced user satisfaction.
We successfully addressed the invoicing issue, fostering a sense of trust and transparency with our users.
By incorporating a direct helpline number and city-specific product catalogs, we boosted user engagement and satisfaction.
The redesigned UI, focusing on simplicity, usability, and a user-centered approach, marked the completion of our endeavor.

Learnings

Grasping B2B Dynamics: This was my first exposure to a B2B app, where I learned the criticality of balancing business requirements and user needs.
Time Management: The project honed my skills in managing time effectively, especially in coordinating with various stakeholders and adhering to project timelines.
Clean Design: I gained a deeper appreciation for the role of clean, minimalistic design in creating user-friendly interfaces that enhance user engagement and satisfaction.
Custom Animation: Implementing custom animations was an exciting learning experience that showed me the potential of interactive elements in enriching the user experience.
Component-Based UI Design: This project helped me understand the benefits of a component-based UI design approach, promoting consistency and reusability across the application.

RETAILERS APP

DOWNLOAD ON PLAY STORE

VIEW FIGMA PROTOTYPE

DOWNLOAD ON APP STORE

2. KIDCITY PARTNER DASHBOARD

Problem Statement

The Kidcity business identified a need for a dedicated partner analytics dashboard app. This app would enable their registered partners to monitor the number of retailers they have onboarded onto Kidcity, track earned commissions, and other analytical details. There was a lack of a user-friendly interface to manage this information.

AFTER REDESIGN

CART

Iteration & Testing - Tackling Challenges

We observed that despite the improvements, users faced some initial hiccups in using the newly designed Cart system. The task of making payments for individual orders separately seemed a bit complex. Recognizing this, we added a 'Tutorial Button' on the Cart page. This button triggers a quick guide explaining step-by-step how to use the KidCity Cart effectively and how to manage payments for individual orders. Our aim was to ensure a seamless experience for our users, so we continually listened to their feedback and iterated our designs accordingly.