
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
.png)
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
.png)
Budget Restrictions
.png)
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
.png)
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
.png)
PHOTOSHOP
For Graphics Design & Photo Editing
.png)
AFTER EFFECTS
For Animation And Interaction
.png)
LOTTIE FILES
For Animation And Interaction
.png)
FILMORA PRO
For Video/Visual Editing

CITY BASED CATALOGUE
Added a city based catalogue
DESIGN SYSTEM
Expanding and modernizing an established brand identity.
.png)
RESULTS
From 1000 to 5000+ Retailers

4.8 Google Play Rating
.png)
Raised Fundings
.png)
FINAL UI

My Tech Stack
Results
FINAL UI
.png)
DESIGN PROCESS

STEP 1
Research
to understand user & business needs and goals
.png)
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
.png)
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.
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.
.png)
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.