KiWi - UX Assignment Breakdown

Hi everyone, this is Dupanjan.

Currently I'm, a lead product designer at a company called Layer.

Now I joined this company full time a couple of months back.

But I thought about making this video is back in the time when I cracked a company called qi.

So QI is one of the companies, as you can see it on the website, they offer credit card on upi.

So they are one of the pioneers in India.

Like when you know, like you can make payments via UPI while using your credit card.

Right.

So this is the company which basically pioneered the whole system and I used to be one of their super early customers when they launched in India back in 2024.

So to give you guys a bit more context, I received an offer from QE this year, January.

But there are some due, some personal reasons I didn't actually join it, but they have given an assignment which I essentially cracked and to give you guys an understanding.

So, so you can see like I have received an offer from them of course, like I can't share all the details, but you see like you were excited to like extend you an offer.

So I received an offer and they have given me a, you know, like some sort of an assignment, take home kind of a task that I have done.

And after that I was like some sort of a, you know, like received this offer to join them full time.

Now you guys have got the context and now is the time for me to, you know, like, take you guys through an actual, assignment.

So like what it was and you know, like how I approached it so that you guys can have an idea about like my design thinking and how I actually approach a problem.

So to give you guys a bit more context, you see like the whole product, or you can say the task was essentially doing a like home screen redesign for scale.

Now in qe, essentially if you guys have opened the app or you can say like use the app.

So within the app you get an option to of course make a payment via upi.

You can of course pay your contacts and stuff like that.

But essentially what they wanted is that like currently their product was officially designed to perform one, or you can say multiple features, but they were handful.

Maybe you can pay someone, maybe you can repay a payment and stuff like that, but it was never meant to scale beyond that.

So let's say what if you want to book a ticket, what if you want to pay your utility bills, what if you want to lend someone money?

Maybe something like that.

Right?

So it was not Designed like that because like when you actually start creating a product, you never know like how it's going to evolve in the coming years or coming months.

Right?

So you make a lot of assumption.

And due to that, like they wanted to cater to this problem so that what if they want to incorporate a bunch more, you know, like product features so that people can use.

So the overall thing was that I have to redesign the you know, like home screen.

And the overview was that redesign the QE home screen to support like broader set of features and improve discoverability of the offers and rewards while maintaining the simplicity of the QE which is their main, signature of their product.

Now the design goals, I have broken it down into these three things is that improve scalability.

It should be able to promote offers, viewers discover people should be able to discover new items and stuff like that.

And while maintaining UE's brand ethos.

And then on this task they have also shared me a couple of screenshots so that I can get sort of understanding.

And because I used to use Qi, I mean of course I still use it but not that frequently.

So I actually like knew, you know, like how they approach it and low key, like I really like their design aesthetics to be honest.

And one of the key features that I like about Q is that they have super amazing interaction and it was butter smooth.

You guys should definitely check it out.

Now this is the wireframes that I shipped at the end, but before I, you know, like give you a clarity on that, I just wanted to showcase that you know, what my deliverable was.

And now I'm going to take you guys through the approach breakdown.

Now you see this is the first scheme that I created and of course I have a prototype as well that I'm going to share.

Now if I give you an understanding why I did that is to create an affordance.

Now if I show you the wireframe, this is the current QE home screen.

This is how it looks, right?

And on this right hand side, as you can see, this is how I designed it, how I ideated.

While you cannot see a very noticeable difference, but you see like I'm actually catering to their actual problem.

Statement number one is like, you know, like showcasing a lot more variety of you know, like product features.

So let's say I have added the section called Explore qe, but on the right hand side they have a lot of dead space going on.

Right.

The typographic and alignment is of course, you know, like it's a subjective but I don't really like it, but you can see a lot of wasted real estate over there.

So I thought about how we can actually use it.

And now in their existing app they had this, you know, like some sort of a, what can I say?

Like a container where in the backend side you can essentially see the credit card.

But that's not interactive.

My key question was that why it's not interactive.

It should be you know like interactive and we can reuse a bunch more real estate while showcasing you know like second fold that can be accessible through the bottom.

Or you can say like after dragging the first segment of it.

So this is what I created is that like at the top you can see the main card which is basically qe.

Yes, bank credit card and you can see what is the actual due amount, how many offers are there so that we can create an affordance on that specific card.

And then on the second fold which is primarily visible focus of someone you can see you know like a set of products.

So let's say explore qe, you can see the QE sky.

I thought about what if they can like book flight tickets from their platform, checking their credit score, get an instant loan and hotels and stuff like that.

Now to give you guys an understanding why I did that is essentially this is the you know like offerings breakdown for that, you know.

So let's say like you are using you know like QE and currently they are struggling to introduce new offer.

So this is how this section is going to help them.

How so if I give you guys a breakdown is that like let's say currently they have, you know like I'm taking an assumption is that they have eight products, right?

And there is a like philosophy in the product side is that like 30% of the product actually contributes 90% of the revenue.

Now if you see the viewport you can essentially see almost six products.

So let's say even if they have like eight products, they have the primary visibility of almost you know like six products.

But if I take a focus look on that, I can see three products clearly visible.

Now essentially what you can also use that is that like based on users behavior or you can say like the metadata that we are going to receive from the users.

You know like after analyze the user's behavior we can essentially shuffle these sections.

Now this is the broader design as you can see, you can see all the things that parent on QE and you know like book train tickets and stuff like that.

And let's say they want a hey, like we are seeing you know, like more surge in terms of rent payments.

So of course you can just you know, like shuffle this thing at the very front and like shuffle it down over there and there you go.

You can make a lot more impressions on this specific fold and you can get a lot more impressions regarding that.

And also another thing that I've added is that like 22 plus more offers on your three credit cards so that we can extend the use case of qe.

So okay, it's cool to, you know like you are paying your credit card bills via their, you know, like QE is my credit card.

You know, you are booking a bunch of things from the platform.

But what if you want to add your existing credit cards and you manage them as well?

So this is why that extra additional ticket that we have going on over there creates an additional affordance so that people essentially click on that and we can get some metadata of their use case.

And now to give you guys a breakdown on that first hold and the user experience about it, it was essentially to extend the facility beyond that.

Right now in their current product, they do not have anything like that.

I thought about like, if someone is, you know, like adding a bunch more credit cards, then there should be some sort of a use case for the users to actually manage the credit cards in a better way.

So the logic was is that number one, of course we are going to keep the QE credit card at the most amount of center and you can see the offers and all that.

Of course the scalability solution was that to incorporate some logos and tickers.

So let's say Starbuck logo book my Trip logo and stuff, make my Trip logo and stuff like that.

So that, that you know, you know like the familiar icons and you just essentially just you know, like start clicking on it.

And then of course there is an affordance on the, you know, like how much amount it's due for you as well, those kind of things.

And then the interaction was that the moment you try to like drag this sheet down, it's going to give you this fold where you can be able to manage your credit card.

So number one, first thing we'll have you know, like Z axis and Y axis translate thing.

So that card gives you a 3D sort of a look.

And then essentially you will be able to, you know, like pay the minimum account, pay the full amount and stuff like that.

And you know, like of course the I.

One other, one use case that I created is that like, because you know, like how Essentially companies make money, I mean specifically the lending company is that like if you start paying the full amount, there is not really much of a, you know, like what can I say, monetary gain for the actual lending company.

The only way they can make money out of you, out of you or you can say a user is that if you start paying the minimum amount.

That's why people more, you know, like they push the users more towards the upi, like the EMI thing so that essentially you know like pay via a month so that they can charge an additional interest out of you.

So that's why I kept an affordance on that pay minimum fee over there as well.

And I was making the user like focus on that specific action so that the company can make more money out of the actual, you know, like users, right?

And then essentially they'll have the offers card based on the credit card and then you can add this unique badges and all so that people start you know, like interacting with these chips as well.

And then the idea was that you know, like shuffle to the next card and you'll be able to see the same thing if there is any due, if there is any new offers and stuff like that.

So yeah, that was you know like pretty much it.

This was the, you know, like sort of a breakdown.

And at the end of the day this is what I have shipped.

And if I give you guys an idea about the prototype, so let me open it, you know what, let me do a full screen about it as well.

So there you go.

This is the prototype.

So essentially the item was that you try to drag it, it opens up and then you can really explore the things.

Of course there's the statement thing as well.

But yeah, that was pretty much it.

This was the interaction while keeping the simplicity of the QE app.

So as you can see from the screen there is like if I keep the saturation down, you won't be able to tell like if, you know, like these two things are totally like designed in a different direction.

But essentially that was my task and I sort of nailed it.

And at the end I received an offer from them.

But yeah, that was pretty much it.

I mean thank you so much for watching this video.

I hope you guys have gotten some understanding how I approach this assignment and I, at the end of the day, how I articulated the design and then was able to really crack this offer for this company.

And yeah, I'll see you guys in my next breakdown.