Previous Project
.png)
Kidcity
B2B Kidswear Ecommerce App
Played a role in accelerating Kidcity's growth, achieving a 400% increase in downloads and a 100% rise in daily active users across their B2B iOS and Android platforms, through rapid and strategic design in a startup environment
Timeline
March 2021 - September 2024
My Role
UI UX Designer
Platform
Android | IOS
Services Provided
UX Design, Visual Design, Animation, Figma Prototype, Developers Handoff
Tech Stack
.png)
Overview
Kidcity is a leading B2B ecommerce platform that connects kidswear retailers with manufacturers in India. The app faced usability and functionality issues that limited its effectiveness. To address these, a comprehensive redesign was undertaken focusing on improving user retention, interaction, functionality, and aesthetics.
.png)
.png)
Retailers experienced enhanced ease in reaching customer support to address their queries, which bolstered brand trust and increased user engagement.
The number of active retailers saw an increase, driven by the new app's ability to facilitate easier purchases and effectively communicate the brand proposition. Enhanced usability and an improved user experience contributed significantly to this uptick.
Research and Insights
Understanding the Users & The Business
Through interviews with the CEO and a select group of retailers, we identified several key issues affecting the user experience. These Issues were has to be solved in priority before we move forward for the next round of updates:
-
Lack of access to city-specific products and information.
-
Inefficiencies in the cart system, particularly in managing orders from different cities, since each city has their own tax rules and needed separate invoices.
-
Difficulties in accessing customer support, affecting user confidence and operational efficiency.
-
Outdated and non-intuitive filtering options.
-
Visual inconsistency and poor navigation structures.
.png)
User Personas
Before we started designing, we deep dive into existing behavioral and purchase data of our users to understand them better. We also conducted a series of customer interviews.
We focused on identifying what is the job that our customers hire our product for.
In the first three months following its launch, the app experienced a dramatic increase in new retailers.
.png)
The increase in orders was attributed to users recognizing the app's value, particularly in saving time on travel and facilitating stock procurement. This positive response was fueled by the improved user experience provided by the new enhancements.
Arjun Patel, aged 42, is the owner of a kidswear retail store based in Bangalore, India. Moderately tech-savvy, Arjun seeks efficient solutions for his business needs, including bulk purchasing and credit facilities to streamline procurement. He aims to minimize travel to suppliers, reduce overhead costs, and increase inventory turnover. Arjun faces challenges in managing separate invoicing and payments for city-based orders and accessing prompt customer support. He values simplicity, reliability, and timely assistance in navigating digital platforms. In summary, Arjun prioritizes efficiency, reliability, and accessibility in managing his kidswear retail business.
.png)
Design Solutions
After gathering insights from interviews with stakeholders and users, I developed solutions considering budget and time limitations, focusing on addressing the most critical issues first. I relied on my own evaluation and common practices in ecommerce to devise solutions that could be implemented quickly and effectively.
.png)
.png)
.png)
.png)
Cart ( Payment ) - User Flow - Old Flow
%20(2).jpg)
My Role
As the lead designer, I was responsible for creating the UI design, animations, user flows, and the final prototype. My role extended to testing the prototype with users to gather actionable feedback. I collaborated closely with front-end developers, graphic designers, project managers, and the CEO to ensure seamless execution and alignment with our project goals.
1. City-Based Cart and Invoicing
Problem
The app was initially launched as an MVP in 2020 and introduced to the market. Between 2020 and 2021, the design remained unchanged with no improvements or updates made.
The Old App Is Outdated.
The previous version of the app had not been redesigned in over a year, leading to a design language that no longer aligned with our overall branding. Additionally, the old design featured confusing navigation and lacked coherence throughout, which detracted from the user experience.
Inadequate Cart System for City-Specific Orders and Tax Calculations.
Inadequate Cart System for City-Specific Orders and Tax Calculations: The previous cart system calculated all city orders together, and users could only download a single combined invoice. Retailers typically buy in bulk, and each city has its own tax rules. There is a requirement for separate payments for orders from different cities, and a distinct invoice should be generated for each city.
No City-Based Product Catalog Option On Homepage.
In the previous app version, there was no city-wise catalog on the homepage. Typically, users prefer to buy from their most favorable city because they need to make bulk purchases. it was crucial to provide users with a city-based catalog right on the homepage to make navigation easier for them.
No Easy Access to Customer Support.
In the previous version, the process to contact Kidcity customer support was quite confusing. Users had to navigate through the hamburger menu to the contact options and then choose their preferred medium to communicate. The target audience of this app is not very tech-savvy and requires an easy and quick option to contact support. Retailers are often busy managing their shops and making decisions about bulk buying,
Lack of Industry Standard Product Filter,
The product filter in the previous version was very confusing and inefficient, and it did not resemble the typical ecommerce app. This was particularly problematic because every ecommerce app follows a standard design pattern for product filtration and sorting.
We mapped out the user flow to ensure a seamless cart experience, aiming to minimize errors at each step for a smoother user journey. Our goal was to enable users to pay for each order separately while maintaining simplicity and ease of use.
Defining The Problem
.png)
Impact
Hooray, we launched the version 1.1 in september 2021! For confidentiality reasons I have omitted the actual values for these metrics.
Testing & Iteration
Feedback from internal stakeholders and retailers highlighted that approximately 35% of users were initially confused by the new cart system. To address this:
-
Adaptive Iteration: Introduced a 'Tutorial Button' on the cart page, providing users with an interactive guide on how to navigate the new system, which significantly improved user comprehension and satisfaction.
Solution
Developed a custom stepper cart that allows for separate management of each city’s orders, integrating local tax rules and enabling individual invoice generation. Now Users can pay for each city order separately and download invoice for each city separately as well.
Goals
The redesign focused on improving key aspects of the app to enhance user experience and operational efficiency
City-Based Product Catalog
Introduce a city-based catalog to allow users to easily navigate products specific to their city, enhancing the shopping experience and reducing confusion.
City-Based Cart and Invoicing
Make the cart more user-friendly and efficient by enabling separate payments for each order and generating individual invoices for each order. This is crucial for both user convenience and business operations.
Easy Access to Customer Support
Provide users with easy access to customer support to quickly resolve their queries, which will help build trust, and increase customer retention and engagement.
Industry Standard Product Filter
Implement an industry-standard filter system that aligns with those used in other ecommerce apps, making the filtering process intuitive and efficient.
UI Design
Update the app’s UI with improved visuals and animations that align with the brand’s overall branding and value proposition. Add elements to the homepage that clearly communicate the benefits of connecting with Kidcity, making it immediately apparent to users.
Increase App Download and Retention
Address the issue of users still preferring to travel to buy their stock in person. Although the app has the potential to save travel time, the current interface and buying process are perceived as unfriendly and confusing. Approximately 40% of users who have installed the app are not actively using it. They continue to contact Kidcity directly or travel to the location to purchase their stock. Enhancing the app’s usability and simplifying the buying process are key to converting these installations into active, engaged users.
.png)
2. Industry Standard Product Filter
Existing filters were outdated and not aligned with e-commerce best practices.
Cart ( Payment ) - User Flow - New Flow
%20(1).jpg)
Solution
Overhauled the filter system to be more user-friendly and aligned with industry standards, improving the accuracy and efficiency of product searches.
.png)
3. City-Based Product Catalog
In the previous version of the app, there wasn't a city-wise catalog available on the homepage. Users, particularly those making bulk purchases, preferred buying from their preferred city. However, the initial option was to choose gender, resembling a B2C app, rather than allowing users to explore based on cities, as is typical for a B2B app. It was essential to provide users with a city-based catalog directly on the homepage to simplify navigation.
Solution
Implemented a city selector on the homepage, allowing users to filter the catalog based on their city, which streamlined the shopping experience by providing localized content.
.png)
.png)
4. Easy Access to Customer Support
In the previous version, the process to contact Kidcity customer support was quite confusing. Users had to navigate through the hamburger menu to the contact options and then choose their preferred medium to communicate. The target audience of this app is not very tech-savvy and requires an easy and quick option to contact support. Retailers are often busy managing their shops and making decisions about bulk buying,
Solution
Introduced a sticky floating contact button visible on all pages, providing direct links to support via email, phone, and WhatsApp.
.png)
.png)
Final UI
Here's the complete UI revamp, aimed at enhancing both the overall user experience and visual aesthetics.
Challenges
Meeting tight deadlines and budget limitations posed significant challenges. Prioritizing features based on their impact and user feedback was crucial given the circumstances.
.png)
Previous Project
.png)
.png){kind=avatar}
.png){kind=avatar}
