Bjak.my - Design Assignment Breakdown

Hi everyone, my name is Dupanjan and in this video I'm going to give a UX breakdown, or you can say a design breakdown process of an assignment that I received from a company called Bjack My.

And to give you guys an idea, this is the assignment that I received.

And it was, the deadline was within three days and as you can see I, received it two days back at 2:00.

And right now as in time of the recording is 11, 20.

So it means like I'm sort of like above the actual threshold that it was, you know, like given in this timeline.

But essentially this is one of the best assignments that I received, so far.

And I really enjoyed doing it.

So this is the first thing that I wanted you guys to know about.

And then this is the prototype, as you can see.

But before jumping right into the prototype, I just wanted to give you guys an idea of how I approach the assignment and you know, like to give you guys a clarity on the design process that I used to come to the conclusion and come to the prototype and solving the problem statement.

Now let's start from the documentation.

So this is the brief that I received.

And after receiving the brief what I essentially do is just break down a simple things.

So let's say the brief was that design and AI powered finance user interface that helps people make smarter decisions and manage their money.

Now of course the, you know, like the spectrum is really broad over there.

So one key point that I figured out, and this is one of the problem that I was currently facing, is that usually when you're trying to save some money and you're trying to invest, there are multiple apps and ways that you invest your money.

You may be, you know, like, save some money in your savings account to get some interest on it.

You may, you know, like put some money into stocks, put some money into ETFs and stuff like that.

But there is no other application that lets you combine all these asset classes and give you a deterministic view about, you know, like how an asset class is performing, should you hold it or not, those kind of insights.

And to get that I thought about, look, this is the perfect scenario where we could actually build it.

And this is the one key problem that I faced is that like, there is no way for us right now to actually track everything, all the asset classes.

And this was the brief and this is how I dial it down.

And also like it was, you know, like create a fundamentally better user experience experience, but without making it, you know, like simply just a chatbot should be a integrated way of you know, like using AI in a very embedded native way.

Now in terms of the requirement of course I have to give the product thinking, the user experience and interaction and the interface design of course and the deliverables where you know like the concept, user flow and the mobile design.

So I highlighted a bunch of like things that essentially helps me understand the problem statement and the requirements in a very you know, like layman manner so that I can you know like build things on top of it.

Now while doing the thing, of course I, you know like created a few product decisions, rationale and the trade offs that how I did it.

But essentially what I want you to do guys to do is actually showcase the prototype so that you understand how I, you know, like coming from it.

So this is the actual home screen.

Of course I didn't design the onboarding and everything but this is exactly what you like get when you jump into the screen.

You get to see this home and portfolio and also the chat bubble that's constantly there.

It's to give you an idea.

Okay, I'm here, but not exaggerates you, hey, ask me something like that.

Ask me something like those kind of spinners or anything.

Nothing is there.

It's very subtle and gives you a granular idea of how your portfolio is performing.

So as soon as you jump into the screen you get to see, okay, hey Deepanjan, your portfolio is like 1.8% up today and the top gainer is Tesla stock.

Now it also I have an idea that the hero text itself should be like spinning, spinning in the sense, you know like shimmer effect or maybe a rotation effect to give you some more insight.

So let's say one idea I get from this page is that my Tesla stock has performed better.

Maybe the next spinner test that I can receive is that like how I can diversify my portfolio.

What is the state of a specific section or a specific sector that I should focus on or how I should invest that money over there?

Those things can be accommodated over there.

And based on the hierarchy and based on the insights, my idea was that if I click on something over there as a hyperlink or something, the chat box should be triggered automatically to give me much more insight.

Now at the second fold, I directly get a portfolio value.

How my portfolio performed today.

You can see 12,000 is up, 1.8% is up today.

I can see a chart as well.

This I button essentially gives you to.

You click on it and it just hides this value in asterisk format.

And then I added some banners for placeholders.

So let's say I'm naming this app like vjack plus.

So you say like, you know, like see all the benefits and stuff like that.

You can also like, you know, like close it and keep this section at the top.

But I used it showcase the you know, like sections that, where you can actually use these sections to promote certain features or promote like different advertisement or something.

The moment you scroll down, it gives you like embedded AI the native experience that explains like how your portfolio has performed, what are the things that was, you know, like contributed to get this gain today.

And you can see the asset classes breakdown.

And of course the moment you click on a specific asset class, it takes you directly to that specific section and gives you much more detail on that.

And you can also get this thing when you click on the portfolio.

The moment you click on the portfolio, it gives you a granular idea of number one, the overview.

Of course you can see the, the breakdown, the donut chart and everything.

And you see how everything is, you know, like performed.

And you see the insight as well.

Right?

And then let's say after seeing this, you have a question, right?

So why not just like click this chat?

Because right now I'm not giving you a AI insight that you should follow.

It's like you just landed on the screen and you have a thought like, let me ask something.

So the moment you click on it, the chatbot appears and you can just like enter what you want to do.

Let's say how I can make my investments better.

You just hit on it.

It just started working and gives you an idea, okay, you should maybe, you know, like increase your gold exposure and stuff like that.

You see how it's done.

Like I'm not asking the user to actively chat it just like from, I like from their mind.

Is that.

Okay, let me think like about this question based on the overview that I'm seeing on the screen now.

Of course we have different tabs as well.

It's like breakdown and of course you can add your new asset class class from there.

So let's say you click on mutual funds, you get to see all these essential elements of the breakdown and you get to see a breakdown of the specific fund value of this specific, you know, like asset class itself.

So let's say M1 point, 19 lakhs is what I'm holding as an asset class of mutual fund.

So it gives me a breakdown as well.

And some Follow up questions say you know, how do I diversify and stuff like that.

So let's say I go to the stock and it also gives me a breakdown.

Okay, these are the three stocks I'm holding and this is the overall value.

Now the thing that I wanted to showcase in terms of progressive disclosure is that what Apple also does and you get to see the whole app itself has some sort of a native iOS aesthetic to it so that you can reduce the cognitive load, increase the familiarity of the app and also increase the development time.

So let's say if I'm designing something it should be shipped in a very similar and very less considerate of less amount of time itself.

And one thing I was thinking, okay, if someone has a question about Apple, how do they do it?

So I created a subtle, very subtle interaction is that like the moment you slide it down it gives you that AI insight and directly you get to see okay, breakdown of my Apple stock investment and comes with some sort of a breakdowns and gives you a granularity.

What are the next question you should be asking?

Let's say is Apple stock worth keeping?

And stuff like that.

So instead of making the user ask specific things, they can directly just slide a specific asset class and gives more, much more detailed dial down AI insights for that specific thing.

Now if you go back over there in the screen itself, let's say I want to add a new asset class.

Now this is one of the trade offs that I've done is that like for the first time the user have to like add all the asset class and also also in a progressive disclosure manner.

It gives the user an understanding.

Okay, this is the first pain point that you have to do.

You have to add all these things manually because this is one of the ways to avoid the API cost and making the app function more in an AI native way rather than like doing all this a auth and you know like integrations and then later on figuring out that it's not simply you know like just working.

So this is one of the trade offs I've done on designing this feature.

So let's say I click on this icon itself and this you know like pop up sheet comes in and I can you know like select my asset class.

Let's say there is a stock so I kept it very cohesive and very easy to execute experience.

So you click on stock it directly like lets you enter the stock name.

Let's say you enter Tesla, just ignore this Apple, Apple just click on the Tesla, you'll see how many quantities you are already holding.

It shows you the ticker and everything.

It's using the same sheet and everything from a iOS native perspective.

Enter all the details you hit and it gives you a pop up as well.

Okay, you just added this thing.

You will see all this value gets changed.

So that's pretty much it.

So this is how I you know like this did it and I really enjoyed performing the whole thing.

And in this specific you know like document itself you can see what are the product decisions that I was making.

Number one, the portfolio first experience of course.

So the if I take you back to the screen, you see the overall portfolio idea and everything and then you get to see the progressive disclosure as you open and you know like use this app much more thoroughly.

You get to see a lot of subtle instances that wasn't like embedded and then like you know like adding AI as a layer and not just a random chatbot.

Of course the bubble is right there to give the user an understanding that hey, I'm there to help you but not I'm asking for you to like take my attention away.

Right.

And then contextual interaction as I showed you just like the slide in interaction to essentially the get much more breakdown on the asset class and dial down your strategies.

Then explain of course before recommending all these AI insights and features that explains all these banners where based on this idea and then unified asset view where you can see all your asset class, how they're performing and everything.

Native iOS patterns to increase familiarity and improving the usability and focus scope so that user essentially gets an understanding of how specific things are performing and then based on that they can make their decisions.

And some trade offs that I was making is that of course the manual asset addition.

It's sort of a hiccup from an user perspective.

This is one of the trade offs that I've done thinking from a mind that the adding APIs and auth tokens may increase the cognitive load and also in terms of getting the access to it can be tricky sometime maybe you have some asset class that you have linked with a dedicated bank that don't give you that integration.

Seamless integration within this app.

Then how do you do it?

You have to come to this manual addition.

Right.

So that's why that was the thought process behind it.

Then of course native over custom navigation to the you know like fasten up the development process and simplicity over depth.

It gives you a break by break down on how the asset classes are performing rather than gives you every single detail and just put it in your face and depth without clutter.

This is one of the most key factors is that it just makes the product use very usability wise, very friendly and it just don't you know like take a much of your time and chain of thought to actually perform certain actions.

Now I've also created a few things so let's say in terms of the information architecture, it's pretty simple because it's an information architecture and not an user flow.

You get to see the same hierarchy that you open the app, see a two column layout where the primary is the home.

You get to see what are the things that our home is containing and the portfolio gives you the the breakdown ask AI is basically on a, sits on a hierarchical level to you know like give you access on the global way.

So you get to see in this two column layout you get to see the home as a by default and you see the floating action button, you can access it anywhere, you know like in this app itself.

And then the, although the you know like deliverables were like four to five screens but I ended up creating a bunch more with all these interactions and this prototype.

So yeah, that's pretty much it.

I hope you enjoyed my breakdown of this specific assignment and would love to you guys to actually let me know the thoughts behind my process and what you guys think.

Thank you so much for watching this video and I really enjoyed doing this assignment.

Thank you.