
Over the last several years, Zoomcar's product has grown from a single business line to having four consumer-facing business lines and three platforms to manage the whole business. Having a consistent experience across all of a business's products and platforms is essential for Zoomcar's success.

While the company grew, so too did the size of the team. Zoomcar needed an internal style guide and design system to act as the source of truth for the product organization. This system aimed to bridge the gap between designers and developers, making it easier to collaborate and ship products faster.

# Why Build it?

Our problem was no different from companies that had a fast growth phase. Both tech and design debt started weighing us, making iterations and new releases harder. For us, Design System on a high level served to solve three major problems.

## Inconsistency

This was one of the significant problems we wanted to solve with the introduction of the design system. Our app had so much inconsistency that users moving between screens felt like a different app experience. In our five years, multiple designers worked on it. There was no single design directional perspective that everyone could align with.

<SingleImage
    src="v1635934114/johnthachil.com/Projects/drift/drift-inconsistencies.jpg"
    width="1392"
    height="908"
/>

## Inefficiency

Each designer and developer was reinventing components on each project basis since nobody had a centralized place to look for what was already build.

Designers have to spend a lot of time making sure each component handles all the edge cases, which meant less time focusing on understanding user problems.

-   Where is the updated sketch file. Who edited it last?
-   Did this icon was already made?
-   What color can I use here?
-   Why did you develop this component? It was already made before, right.
-   Why it's PNG here, and there it's SVG?

These kinds of questions and discussions started talking about a lot of our daily workhours.

Developers also had the same problem. We had around four definitions for a button component in the codebase at that time. Thus any change to button style in the future requires changing the code at all four places.

## Mindset

I believe there exists a threshold point where people wanted to fight for managing inefficiencies. If that threshold is passed, then people will stop caring about Ineffciesiess. Inefficiencies will start to grow exponentially more time we are in that state.

We wanted designers & developers to fight for the time they needed to clear design and tech debts. This was only possible if they understand there existed a shared purpose to fight for.

# Getting Started

After going through endless Design Systems & case studies that existed at that like carbon design systems, Polaris, lightning, etc., we realized a few things.

-   We can't simply move our entire Design to a new design system language. We didn't have that much resource to allocate.
-   With this project's massive scope, we will not get top-level management without proving its value in the long run.

The question we were trying to answer was, where do we start?

<SingleImage
    src="v1635934114/johnthachil.com/Projects/drift/drift-getting-started.jpg"
    width="1392"
    height="1570"
/>

## Start Small

We had a new project in the pipeline to build an end to end experience for renting eScooter. This became our segway to develop & test our MVP design system. eScooter was launching as an experiment-type project. This gave us a lot of freedom to experiment with a few things without much friction from stakeholders.

Instead of rethinking our entire existing components, We started laying foundational level things like color, type, spacing, elevation, etc. The foundation is essential for guiding our work in a united direction while searching for creative design solutions individually.

<SingleImage
    src="v1635934114/johnthachil.com/Projects/drift/drift-color.jpg"
    width="1392"
    height="1568"
/>

We also worked on very low-level components like buttons, icons, etc. We knew there was a good chance to relook these components when we scale the Design System.

<SingleImage
    src="v1635934114/johnthachil.com/Projects/drift/drift-buttons.jpg"
    width="1392"
    height="642"
/>

With a few foundational level things and few low-level components, we started talking about design systems in every conversation we had with developers for that project. Luckily we had early adopter engineers who were interested in our vision.

<SingleImage
    src="v1635934114/johnthachil.com/Projects/drift/drift-escooter.jpg"
    width="1392"
    height="1902"
    caption="eScooter Launch 🎉"
/>

With this launch, we were able to achieve few things we wanted.

-   Tokenized our colors, shadows & types in code.
-   Introduced few low components like Button, Icon, Illustrations
-   Helped to establish trust among stakeholders
-   People were started getting interested in our vision

## Create Noise

The next step was to get buy-in from all the stakeholders to adopt the Design System at the company level. The answer to this was creating more visibility on the work we did for eScooter and how it added value to the business.

Over the next couple of weeks, we started giving many presentations to almost all the company stakeholders.

<SingleImage
    src="v1635934114/johnthachil.com/Projects/drift/drift-presentation.jpg"
    width="1392"
    height="752"
    caption="First Design System Workshop"
/>

We also did a polling session with our leadership and engineers to determine what we will call the system. We finally ended naming it "Drift Design System."

<SingleImage
    src="v1635934114/johnthachil.com/Projects/drift/drift-name.jpg"
    width="1392"
    height="885"
    caption="Tie vote was CEO's 😇"
/>

We also created a [Gitbook][1]. More than documentation, it was a tangible thing we could show to different people during the conversation.

<SingleImage
    src="v1635934114/johnthachil.com/Projects/drift/drift-gitbook.jpg"
    width="1392"
    height="885"
/>

With all the noise we created, we were able to align stakeholders on the following terms.

1.  Any new feature we design will adopt a new design language.
2.  We will adopt DLS to the existing Design when the company decides we need a redesign.

Yes, we knew it would make the app experience more fragmented, but we also knew we could adapt to a new system within time.

# Drive Adoption at Scale

The next problem was how to take the Design System and scale it to our entire product line, which had 4 Consumer-Facing products and 3 Platforms. We wanted to set a few ground rules before we started thinking about the scale.

## Setting Parameters to the System

We defined a few characteristics of how the Design System will be evolved over time.

**Rules**: Strict Vs. Flexible - To minimize deviations, core modules in DLS are specified strictly.

-   Typography treatments are strictly defined.
-   There is an eight-pixel grid used for spacing.
-   Shadows are documented.
-   Naming conventions are consistent.

We maintained strictness, at least in our mobile ecosystem. We did this since we knew people would not use the freedom that comes with a flexible system to impact our end users positively.

**Team Model**: Centralised Vs. Distributed - We had chosen a centralized approach for maintaining the design system. A few of reason why we did this was

-   It served many product verticals, free from the bias of any product verticals.
-   It enabled to move much faster.

## Build Tools for Adoptions

We invested the time in building a couple of tools, which helped both engineers & designers to adopt design systems.

-   One was a service which used to maintain our icons. Once icons are merged, files are merged in Abstract. It automatically generates device specifics formats.
-   A Zeplin Extensions to show few design tokens like shadow values and some platform-specific rules.

<SingleImage
    src="v1635934114/johnthachil.com/Projects/drift/drift-ops.jpg"
    width="1392"
    height="858"
/>

We continue working on improving these tools that help designers and developers managing Design less dreadful. We wanted all our designers to handle the user's problem instead of focusing on maintainability and other things.

## Change in Design Culture

To ensure all designers are shipping designs based on design system guidelines, we introduced a couple of steps in our design process.

Before Dev Handoff, the designer working on the project has to conduct a design system review meeting. In the meeting couple of things are checked & discussed.

-   If components are rightly resued.
-   If there is an introduction of a new component.

After all, the feedback from this meeting is made, only it is added to Zeplin for engineers.

<SingleImage
    src="v1635934114/johnthachil.com/Projects/drift/drift-abstract.jpg"
    width="1392"
    height="853"
/>

# Where are we Now?

For the past year, we have been working on a design system. Still, it is very much an evolving System. But as of this date, we were able to achieve a fair amount of progress.

-   We are currently happy that 70% of our main app is in our new design system, with 100% adoption over the horizon.
-   We expanded our system to support web platforms.
-   Conversations are happening around maintaining the System between Designers and Engineering, which was a massive win.

<SingleImage
    src="v1635934114/johnthachil.com/Projects/drift/drift-now.jpg"
    width="1392"
    height="1902"
/>

---

# Learnings

We were well aware we did cut down on a few places since we had limited resources to begin this project. Here are the few things I learned over the entire course of building this system

## Documentation

A significant way that documentation helps with adoption is by providing an unambiguous reference for people who want to get started with the design system.

We started building the Design System with a small team. When we started scaling to all teams, there was a lot of confusion on using the design system, especially among people who recently joined the company. This kind of ambiguity slows people down and creates friction for design system adoption.

## Team Model

A massive benefit of centralized design teams is that experience is unified and consistent across many products. In this way, centralized teams have a high vision instead of an incremental vision of a single product.

On the contrary, designers who were not part of the design systems team became distant it resulted in the slow discovery of constraints in each project.

We should have a set process that enables us to get feedback and analysis it from a broader audience.

## Give Voice to the System

There were many instances were adding things to the existing system would have solved user problems quickly. But now we had to manage that added complexity of the system also. We have to play the balancing act of solving user problems and maintainability of the system.

Ex: Instead of merely adding a subtext to the 'Button Component,' we had to make multiple versions for the stakeholder without changing the system. I know it was a small change, but the compounding effect of numerous changes is enormous. It would lead us precisely to the same position we started with.

## Track Metrics

Even though we had metrics to track design systems, different adoption metrics, it's tough to measure people's happiness, or the impact on how people work in terms of UI, or the teams' efficiency and velocity in delivering updates and new features to the product.

A couple of additional metrics I would have tracked if I am starting from scratch would be.

-   Time needed for QA
-   No of Design related debts
-   Usability metrics
-   Team NPS

---

# Major Takeaways

For those of you who are considering building a design system, here are few tips.

-   **Find a real place to start.** It's essential to show the value of a potential design system by solving a small problem first. A design system by itself doesn't have any value. It only serves a purpose when applied to a real problem.
-   **Drive adoption and gauge progress.** The actual work starts once the adoption begins. Design systems are only worthy once they are fully united into the team's workflow.
-   **Every company is unique.** It may get overwhelming, seeing other company's design system progress. But there is no point in this comparison since we don't know the context in which they build the system. Maybe they didn't have to fight to align the stakeholders. They had different engineering culture. They had more resources. It can be a lot of things. So stop comparing and adopt a process that works for your company.

[1]: https://zoomuxd.gitbook.io/drift/


Drift Design System


Zoomcar is India's largest personal mobility platform. The introduction of car-sharing services in 2013 and today is the market leader in the self-drive space with over 10,000 cars in its fleet. Zoomcar allows users to rent cars by the hour, day, week, or month.

# Overview

The core part of being self-driving services is the freedom it offers to customers. It provides the freedom to explore and discover things independently. This freedom does come at a cost as some part of our car fleet is driven carelessly, taking a big hit on our car's health. It also hindered the customer experience of the next customer of the car.

Bad driving had a significant impact on our 3 of the core business metric.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-biz-meterics.jpg"
    width="1392"
    height="642"
/>

Our objective here was to give enough information to customers on their driving behavior. This way, people can understand for themselves what they have to improve upon.

## Defining Bad Driving Behaviour

How do we define what bad driving is? Is it speeding, is it fast turns?

We backtracked from our business goal of reducing Service & Maintenance Cost (SAM). What all events in customer trips impacted the car's health in the long run? After going through our past trip data, our data analytics team finalized three parameters, overspeeding, harsh acceleration & hard breaking.

## Understanding Existing Driving Behaviour

Once we got metrics that contributed to the depreciation of a car's life, we monitored these metrics for a couple of weeks to get a baseline of current behavior.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-driving-distribution.jpg"
    width="1392"
    height="642"
/>

# Stick or Carrot

Once we were able to cast the villans for a car's health. The next step was to figure out how do we use this information to improve driving behavior?

We could punish those customers who drive badly and eventually ban them from the Zoomcar platform. Otherway is to create awareness about their driving behavior and give incentives to improve their score.

We decided to go with a mix of both approaches. We want to reward people who have excellent driving behavior while deterring those who don't. So we're creating incentives for people to drive more responsibly.

# Design Sprint for Idea Generation

Here, a scale is only possible through a product solution sitting at the design/tech/analytics/business overlap. We used the diverge & converge process of the design sprint to get ideas from these company functions. It also helped us with aligning the teams at a later stage of the design process.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-design-studio-2.jpg"
    width="1392"
    height="1542"
    caption="Praveen on Crazy 8s😁"
/>

I defined problem statements to different stakeholders. They diverged and came with different ideas at a wireframe level. We converged on all these ideas and voted few ideas we wanted

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-design-studio.jpg"
    width="1392"
    height="1044"
    caption="Converge and Dot Voting "
/>
<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-design-studio-3.jpg"
    width="1392"
    height="1044"
/>

We were able to get a couple of good sets of ideas from the sprint. Broadly the ideas presented were surrounded by three themes.

-   **Scoring System:** The idea here is to present a score to the customer when they start a trip. We will inform the customer of what all thing he/she do to improve the score.
-   **Reward System:** We can tie the score we have to our reward program. This can act as motivation for the customer to improve their score during the trip.
-   **Gamification.** Use gamification strategy to maintain score over multiple trips. These include ideas like leaderboards, streaks, and community aspects of it.

# Scoring & Alerting - Phase 1

Here we wanted to validate any behavior shift when users know they are tracked on the driving behavior.

As part of the initial release, we restricted the customer touchpoint to two main areas before the trip starts and during the trip. Since this project had many unknown unknowns, we wanted to build something very lean, then observe and course-correct if necessary.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-journey.jpg"
    width="1392"
    height="470"
/>

Our initial wireframe discussion mostly consisted of understanding the best way to represent the score during the trip.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-wireframes.jpg"
    width="1392"
    height="1025"
/>

## Education

We wanted users to set expectations on how the alerts work and make it clear what all the stuff we are going to monitor.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-education.jpg"
    width="1392"
    height="1186"
/>

## In Trip Scoring & Alerts

Scoring system to be a success, we need to convey the score's specifics during the trip accurately.

-   **Context-Based Notification:** There is a reasonable probability that the customer will be driving during the notification. We need to make sure we sent only that notification that needed his attention. We divide each event into three classes based on their severity. Only when customers do a high severity event like hard braking, we notify the customer.
-   **Notification Sound:** We wanted notification to stand apart from regular default device sounds. This way, in the span of a couple of notifications, users can differentiate from regular notifications.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-intrip.jpg"
    width="1392"
    height="1159"
/>

**Impact**

Understanding the business impact with the scoring system would take us some time since it would take at least a couple of months to see the effect getting refected upon maintenance cost.

We monitored the driver score change across the different cohorts. These are the result we came up with.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-driving-impact.jpg"
    width="1392"
    height="642"
/>

## Observations & Feedbacks

After three weeks of data gathering, we divided people into different cohort people who's score improved, was same, etc.

-   **Discovery:** In the calling, we figured a couple of people was not aware driver score feature since they have skipped through the screen.
-   ** Motivation:** It became clear for us to impact people who had less than average scores need more motivation to drive better.

# Reward - Phase II

The main objective was to introduce the reward system to give users more motivation to drive good and fix the issues we discovered in phase 1.

## Solving Discovery

After the first phase release, we identified many people who missed seeing the education screen in our research. We added couple more touchpoints for the driver score during the customer booking journey.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-booking-card.jpg"
    width="1392"
    height="1186"
/>

We wanted also wanted to experiment with driver score as the brand. It also enabled our marketing team to run campaigns with the driver's score brand, which helped with its awareness and education.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-branding.jpg"
    width="1392"
    height="1186"
/>

## Reward

Zoomcar internally uses Z points for a reward, which customers redeem on their next trip. Here Z points worked as a variable reward, reinforcing the user's motivation for driving better.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-in-trip-reward.jpg"
    width="1392"
    height="1186"
/>

## Alerts

We did A/B testing with voice PN in which users can hear what type of alert without looking at the phone.

Given WhatsApp's high delivery date, we opted to communicate driver scores before the trip, mid, and after the trip through WhatsApp.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-whatsapp.jpg"
    width="1392"
    height="1186"
/>

## Impact

We rolled out the new design to 100% of our users in the span of 2 weeks. Fingers crossed all eyes on the dashboards. We closely analyzed how users interacted with the design.

<SingleImage
    src="v1635934116/johnthachil.com/Projects/score/score-driving-phase-2-impact.jpg"
    width="1392"
    height="642"
/>

## Major Takeaways

The only way to know what a possible solution might be is to keep changing and experimenting.

**Driver Score Representation**: During the user's trip, their absolute score didn't vary significantly, especially in city drive. This demotivated a lot of users to try for a better score during the journey. We simulated a percentile scoring system during the release period to understand how scores vary during the trips. Currently, we are figuring out what is the best way to show percentile to users.

**Trust is Key**: In our interview couple of people did express that scoring doesn't represent their actual driving behavior. For this reason, they lost the trust in their score and motivation to improve also. Improving the accuracy of the algorithm has been an ongoing process. There have been many hurdles to overcome in fixing data availability, improving accuracy, turning weightage in the algorithm, etc.

---

I am currently in the process of figuring how to gamify the whole scoring system. This way, we can give more incentive to users who are doing good driving.


Changing Driving Behaviour


At LazyPay, our mission is to revolutionize the banking experience. As a next-generation fintech company, we offer users credit solutions tailored to their diverse needs, accompanied by flexible repayment options. Our latest endeavor marks an exciting leap into the realm of cards, expanding our offerings to provide even more comprehensive financial solutions.

# Printing Cards & Package

Designing something physical was a thrilling and novel experience for our team. Navigating the intricacies of printing and packaging, while also balancing cost considerations, presented an exciting challenge.

## Iterating on card design

We invested a significant amount of craftsmanship to perfect the printing of our cards. Initially, we planned to create metal cards, experimenting with various metal card variations to achieve the ideal design. The process of printing these cards presented its own set of challenges, including navigating different printing techniques and color types.

<SingleImage src="v1716375372/johnthachil.com/Projects/card/cards.jpg" width="2764" height="2885" />

## Insights from Focus Group Studies

The final card design was primarily chosen based on extensive focus group studies and surveys. One key insight from this research was that our target segment desired a card they could proudly show off to their peers.

<SingleImage
    src="v1716375372/johnthachil.com/Projects/card/survey.jpg"
    width="2340"
    height="1365"
/>

## Mastering Package Design

Getting packing right also required us to understand how different folds were made, constrain on cost based on different folding techicing. Keep all this in my we were able deliver on packing that users love

<SingleImage
    src="v1716375372/johnthachil.com/Projects/card/packing.jpg"
    width="2340"
    height="1263"
/>

Below, you'll find an engaging unboxing video from one of our satisfied customers, offering a firsthand look at their delightful experience.

<div
    className="mb-4  rounded-2xl overflow-hidden sm:-mx-24 flex justify-center py-8 "
    style={{ backgroundColor: '#404040' }}>
    <YouTube width="348" height="619.1" src="https://www.youtube.com/embed/nXOv-tuS7MA" />
</div>
<div className=" text-center text-neutral-400"> Real customer unboxing</div>

# Crafting the app experience

We aim to bring the same craftsmanship and attention to detail that we applied to our offline cards into our app. Our goal is to create an experience that is not only seamless but also delightful for our users. By integrating high-quality design, intuitive navigation, and interactive features.

<div className="mb-4 bg-[#404040] rounded-2xl overflow-hidden sm:-mx-24 ">
    <video
        src="https://res.cloudinary.com/drch6exvq/video/upload/v1716514626/johnthachil.com/Projects/card/card-full.mp4"
        autoPlay
        muted
        loop
        style={{ margin: 0 }}
    />
</div>

<div className="my-10 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:-mx-24">
    <div className="bg-[#404040] rounded-2xl overflow-hidden">
        <video
            src="https://res.cloudinary.com/drch6exvq/video/upload/v1716514252/johnthachil.com/Projects/card/card.mp4"
            autoPlay
            muted
            style={{ margin: 0 }}
        />
    </div>
    <div className="bg-[#404040] rounded-2xl overflow-hidden">
        <video
            src="https://res.cloudinary.com/drch6exvq/video/upload/v1716514252/johnthachil.com/Projects/card/card-flip.mp4"
            autoPlay
            muted
            loop
            style={{ margin: 0 }}
        />
    </div>
</div>

## Taking Control

Users have full control over a range of card functionalities, empowering them to customize their experience effortlessly. From enabling online transactions to setting limits, ordering replacements, and swiftly blocking cards in case of theft, managing card features has never been more intuitive or secure.

<div className="my-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:-mx-24">
    <CustomImage
        src="v1716517402/johnthachil.com/Projects/card/manage1.jpg"
        width="1040"
        height="1890"
    />
    <CustomImage
        src="v1716517402/johnthachil.com/Projects/card/manage2.jpg"
        width="1040"
        height="1890"
    />
</div>

# Media

-   [LazyPay forays into card segment with LazyCard](https://www.livemint.com/industry/banking/lazypay-forays-into-card-segment-with-lazycard-a-prepaid-payment-instrument-11641884547842.html)
-   [LazyPay forays into card segment partnering with SBM Bank India](https://www.thehindubusinessline.com/money-and-banking/lazypay-forays-into-card-segment-partnering-with-sbm-bank-india/article38231516.ece)


LazyPay Card


Zoomcar is India's largest personal mobility platform. The introduction of car-sharing services in 2013 and today is the market leader in the self-drive space with over 10,000 cars in its fleet. Zoomcar allows users to rent cars by the hour, day, week, or month.

# Laying the Groundwork

In the next stage, we focused on developing our brand language and laying down the basics. This included defining our typography, colors, icons, spacing, and how information is organized. These fundamentals guided our design work, ensuring we all moved in sync while allowing for creative exploration.

<div className="">
    <SingleImage
        src="v1723079698/johnthachil.com/Projects/lp-ds/colorsv5.jpg"
        width="3933"
        height="3762"
    />
</div>

<div className="">
    <SingleImage
        src="v1723079698/johnthachil.com/Projects/lp-ds/typev4.jpg"
        width="3933"
        height="3201"
    />
</div>

<div className="">
    <SingleImage
        src="v1723079698/johnthachil.com/Projects/lp-ds/spot-icons-v2.jpg"
        width="3933"
        height="4305"
    />
</div>

<div className="">
    <SingleImage
        src="v1723380302/johnthachil.com/Projects/lp-ds/illustrationv2.jpg"
        width="3933"
        height="4305"
    />
</div>

---

# Building out content system

Managing money requires trust and transparency. To support this, our designers and UX writer ([Mohana](https://www.linkedin.com/in/mohanadas-92/)) collaborated to create a standardized content system across the app. They meticulously documented the entire process, including guidelines on how to communicate about the brand, financial matters, dates, and more.

Comprehensive documentation for each topic is available on our [Elevate website](https://elevate.lazypay.in/content/intro)

<div className="sm:-mx-24 mt-12 mb-12">
    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <Block
            title="Brand"
            subtitle="Who we are as a brand and how we speak"
            src="v1723171820/johnthachil.com/Projects/lp-ds/buttons2.png"
            link=""
        />
        <Block
            title="Voice"
            subtitle="How brand personality reflects in writing"
            src="v1723171820/johnthachil.com/Projects/lp-ds/voice.png"
            link=""
        />
        <Block
            title="Tone"
            subtitle="Adapting our voice based on context and users emotions"
            src="v1723171819/johnthachil.com/Projects/lp-ds/tone.png"
            link=""
        />
    </div>
</div>
<div className="sm:-mx-24">
    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <Block
            title="Dictionary"
            subtitle="Nomenclature, glossary or terms and word lists"
            src="v1723171820/johnthachil.com/Projects/lp-ds/tone-1.png"
            link=""
        />
           <Block
            title="Numbers & Currency"
            subtitle="Guidelines on displaying numbers and currency"
            src="v1723171821/johnthachil.com/Projects/lp-ds/numbers.png"
            link=""
        />
        <Block
            title="Date & Time"
            subtitle="Guidelines on writing dates and times"
            src="v1723171820/johnthachil.com/Projects/lp-ds/type.png"
            link=""
        />

    </div>

</div>



Elevate - LazyPay Design System


The home page of a product is the best articulation of its product strategy because it is the primary touchpoint for potential customers and encapsulates the essence of the product and its value proposition. It serves as the digital front door to the product, making a powerful first impression that can determine whether a visitor decides to explore further or leave.

# Increasing Discoverablity

As LazyPay evolved, we continually added new product lines to our platform. Users come to LazyPay with the expectation of completing specific tasks, so it became necessary for us to cross-sell products on the home screen.

<div className="my-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:-mx-24">
    <CustomImage
        src="v1716306595/johnthachil.com/Projects/Home/home1.jpg"
        width="1560"
        height="2880"
    />
    <div className="flex flex-col justify-between gap-y-4">
        <div className="bg-[#404040] rounded-2xl overflow-hidden">
            <video
                src="https://res.cloudinary.com/drch6exvq/video/upload/v1716306595/johnthachil.com/Projects/Home/home2.mp4"
                width="1024"
                height="600"
                autoPlay
                muted
                loop
                style={{ margin: 0 }}
            />
        </div>
        <div className="bg-[#404040] rounded-2xl overflow-hidden">
            <video
                src="https://res.cloudinary.com/drch6exvq/video/upload/v1716306595/johnthachil.com/Projects/Home/home9.mp4"
                width="1024"
                height="600"
                autoPlay
                muted
                loop
                style={{ margin: 0 }}
            />
        </div>
        <div className="bg-[#404040] rounded-2xl overflow-hidden">
            <video
                src="https://res.cloudinary.com/drch6exvq/video/upload/v1716306595/johnthachil.com/Projects/Home/home4.mp4"
                width="1024"
                height="600"
                autoPlay
                muted
                loop
                style={{ margin: 0 }}
            />
        </div>
    </div>
</div>

Each product line is treated as a sub-brand, with its own distinct identity defined by unique colors
and logos.

# Demystifying PayLater

In our research, we found that many people are still unfamiliar with the concept of PayLater. Since PayLater is one of our core products, it was essential to address some of the most common questions users have, such as "What is my limit?" and "Where can I use it?"

<div className="bg-[#404040] rounded-2xl overflow-hidden sm:-mx-24 ">
    <video
     
        src="https://res.cloudinary.com/drch6exvq/video/upload/v1716366164/johnthachil.com/Projects/Home/paylater.mp4"
        autoPlay
        muted
        loop
        style={{ margin: 0 }}
    />

</div>

# Solving Repayment Challenges

In any lending business, the repayment rate is a vital metric, and managing risk is essential. The home screen serves as a major touchpoint where users are informed of their repayment obligations. To address this, we have designed various states for different user segments, tailored to urgency and customer risk profiles.

<div className="my-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:-mx-24">
    <CustomImage
        src="v1716306595/johnthachil.com/Projects/Home/p0v1.jpg"
        width="1560"
        height="2880"
    />
    <div className="flex flex-col justify-between gap-y-4">
        <div className="bg-[#404040] rounded-2xl overflow-hidden">
            <video
                src="https://res.cloudinary.com/drch6exvq/video/upload/v1716306595/johnthachil.com/Projects/Home/payv1.mp4"
                autoPlay
                muted
                loop
                style={{ margin: 0 }}
            />
        </div>
        <div className="bg-[#404040] rounded-2xl overflow-hidden">
            <video
                src="https://res.cloudinary.com/drch6exvq/video/upload/v1716306595/johnthachil.com/Projects/Home/pay-bottomsheet.mp4"
                autoPlay
                muted
                loop
                style={{ margin: 0 }}
            />
        </div>
    </div>
</div>

# Marketing & User Education product lines

Some of our product lines require their own narratives to help users understand how they benefit them. These narratives also serve as experimental grounds, allowing us to test various positioning strategies for each product line and its features. By running multiple product positioning themes, we can determine the most effective ways to present and promote our offerings to users.

<div className="bg-[#404040] rounded-2xl overflow-hidden sm:-mx-24 ">
    <video
        src="https://res.cloudinary.com/drch6exvq/video/upload/v1716306595/johnthachil.com/Projects/Home/marketing2.mp4"
        autoPlay
        muted
        loop
        style={{ margin: 0 }}
    />
</div>

# Handling Dropoffs

A significant part of our customer journey involves the lengthy process of KYC (Know Your Customer). The reliability of many systems involved in KYC is sometimes beyond what LazyPay can currently control. However, it is crucial for us to handle these situations gracefully when they arise, guiding users back to the process and encouraging them to complete it.

<div className="bg-[#404040] rounded-2xl overflow-hidden sm:-mx-24 ">
    <video
    
        src="https://res.cloudinary.com/drch6exvq/video/upload/v1723038971/johnthachil.com/Projects/Home/dropoffv2.mp4"
        autoPlay
        muted
        loop
        style={{ margin: 0 }}
    />

</div>

# Communicating Essential Comms

Operating in a highly regulated space means that regulations frequently change. Previously, we managed these updates using CleverTap modals, which was not the most efficient approach. Effectively communicating these regulatory changes to users became crucial. Since the home screen is the first touchpoint for users upon opening the app, it became essential for us to address this communication challenge directly on the home screen.

<div className="my-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:-mx-24">
    <CustomImage
        src="v1716341512/johnthachil.com/Projects/Home/alert1.jpg"
        width="1040"
        height="1886"
    />
    <CustomImage
        src="v1716341512/johnthachil.com/Projects/Home/alert2.jpg"
        width="1040"
        height="1886"
    />
</div>

# Billpay

The new home screen was crafted with a clear focus: enhancing how users are informed about upcoming due bills and facilitating efficient tracking of all paid bills.

<SingleImage
    src="v1716645952/johnthachil.com/Projects/Home/billpay.jpg"
    width="3366"
    height="2880"
/>

# Building a Thriving Marketplace

As a business, we're experiencing significant traction in cross-selling various financial products that fulfill users' needs. With the introduction of our new home screen, we aimed to allocate a dedicated space for these products to accommodate their growing number.

<div className="bg-[#404040] rounded-2xl overflow-hidden sm:-mx-24">
    <video
        src="https://res.cloudinary.com/drch6exvq/video/upload/v1716306595/johnthachil.com/Projects/Home/marketplace.mp4"
        width="1576"
        height="1836"
        autoPlay
        muted
        loop
        style={{ margin: 0 }}
    />
</div>

# Reimagined User Profile

We relocated our credit limits, previously displayed on the home screen, to the profile section to better support our growing credit lines. Additionally, we applied a fresh coat of paint using our newly designed system, enhancing the overall look and feel.

<div className="my-3 flex gap-4 sm:-mx-24">
    <CustomImage
        src="v1723039485/johnthachil.com/Projects/Home/profile.jpg"
        width="1560"
        height="2880"
    />
    <CustomImage
        src="v1723039485/johnthachil.com/Projects/Home/profile-modules.jpg"
        width="2568"
        height="2880"
    />
</div>


LazyPay Homescreen


Repayment is undeniably one of the pivotal features within any lending application. Throughout the past year, we have consistently prioritized enhancements to our repayment system. Our ongoing investments in this area have been aimed at ensuring a seamless experience for users. We strive to streamline the process, making it easier and more convenient for users to repay their loans.

# Dues

This view consisted of all the information regarding vehicles both in realtime and historical data. The major challenge here was to develop an information architecture that would scale to occupy the future data points.

<div className="my-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:-mx-24">
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/dues1.jpg"
        width="1040"
        height="1886"
    />
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/dues1.jpg"
        width="1040"
        height="1886"
    />
</div>

Managing each phase of the repayment process journey encompasses various aspects, including handling partial payments, enabling auto-pay for users, addressing overdue payments, and more.

<div className="">
    <SingleImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/dues-card.jpg"
        width="2814"
        height="1980"
    />
</div>

# Embeded Insurance

Embedded insurance provides users with a safety net, safeguarding their EMIs in case they encounter difficulties due to unforeseen circumstances such as a medical emergency.

<div className="my-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:-mx-24">
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/ei1.jpg"
        width="1040"
        height="2248"
    />
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/ei2.jpg"
        width="1040"
        height="2248"
    />
</div>

# Payment Selector

We prioritize UPI (Unified Payments Interface) for transactions over other payment methods due to its consistently higher success rates.

<div className="my-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:-mx-24">
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/ps-03.jpg"
        width="1040"
        height="1920"
    />
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/ps-04.jpg"
        width="1040"
        height="1920"
    />
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/ps-02.jpg"
        width="1040"
        height="1920"
    />
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/ps-01.jpg"
        width="1040"
        height="1920"
    />
</div>

# Manage Autopay

We prioritize UPI (Unified Payments Interface) for transactions over other payment methods due to its consistently higher success rates.

<div className="my-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:-mx-24">
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/ap-03.jpg"
        width="1040"
        height="1920"
    />
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/ap-04.jpg"
        width="1040"
        height="1920"
    />
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/ap-02.jpg"
        width="1040"
        height="2080"
    />
    <CustomImage
        src="v1716125199/johnthachil.com/Projects/LP%20Repayments/ap-01.jpg"
        width="1040"
        height="2080"
    />
</div>


Redefining Repayemnts


Zoomcar is India's largest personal mobility platform. The introduction of car-sharing services in 2013 and today is the market leader in the self-drive space with over 10,000 cars in its fleet. Zoomcar allows users to rent cars by the hour, day, week, or month.

# Context

Zoomcar used to rely on our vendors to monitor and analyze our car fleet. There came the point we couldn't make further optimization in our customer experience without owning end to end operation of the car.

Creating an in-house fleet management service lets our customer experience people monitor car health and send cars to service before any incident happens in customer trips. Having in house system allowed us to double click on multiple key business metrics much better to understand where we are doing poorly in terms of operation.

It also opened up the possibility of selling the fleet management platform, which powers Zoomcar to other businesses in the same context.

# Search

Search lets users command their own flow in the system. Also, in our research, it was the most used feature in the dashboard. For this alone, from a tech & design perspective, we took our time in building it. Few principle searches were designed.

-   **Federated:** It allows users to search across all of its content concurrently through one search query. We had a unified search for different sets of information like vehicle number, the alert ID, etc.
-   **Fast:** Our users relied a lot on their keyboard strokes for navigating in the dashboard. While design, we made sure both invoking search and navigating with search results is mouse-free.
-   **Predictive:** Fuzzy search became the default way people search for information. For us, this ensures we can surface information before they finish typing. This also reduced character typing mistakes.

<SingleImage
    src="v1635934117/johnthachil.com/Projects/zms/zms-search.jpg"
    width="1392"
    height="1860"
/>

# Vehicle 360

This view consisted of all the information regarding vehicles both in realtime and historical data. The major challenge here was to develop an information architecture that would scale to occupy the future data points.

<SingleImage
    src="v1635934117/johnthachil.com/Projects/zms/zms-car-360.png"
    width="1392"
    height="1416"
/>
<SingleImage
    src="v1635934117/johnthachil.com/Projects/zms/zms-dash-cards.png"
    width="1392"
    height="1025"
/>

Grid view provides users a little more interruptive scanning format.

# Geofence

Geofence is a vital part of monitoring our car fleet. Since it's most critical to making sure, our cars are only used in their allocated areas.

<SingleImage
    src="v1635934117/johnthachil.com/Projects/zms/zms-car-geo.png"
    width="1392"
    height="1406"
    dummyColor="false"
/>

City managers can create geofence on cities and states' bases and even make custom geofences covering circular radius or polygonal shapes. This covered a comprehensive variety of area mapping for these managers.

# Developing a Cohesive Web Design System

We created a web design system to establish consistency and accelerate the design and development process for other teams working on the Web. It derives from our core design system, which defines basic styles, like typography, spacing, color, etc.

<SingleImage
    src="v1635934117/johnthachil.com/Projects/zms/zms-style-guide.jpg"
    width="1392"
    height="1688"
/>

The idea here is to build low-level core components that can evolve with the growing demand for change that will hit us in the future. I will continue to formalize a design system with the engineering team, building reusable components and further defining the visual style.

---

What I've shown above is a very small fraction of the project. If you'd like to hear more about it, reach out to me at [jothachil@gmail.com][1]

[1]: http://jothachil@gmail.com
