VMock - UX Assignment Breakdown

Hi everyone, my name is dipanjan and in this video I'm going to break down the assignment that I received from vmock and it was like take home design assignment and the duration was 48 to 72 hours.

However, I am very glad to like tell you guys that I completed that in less than 24 hours.

of course, like currently the time is 1 o'.

Clock.

I received the assignment yesterday at 11 o'.

Clock.

But of course like if you reduce the hours that I slept and did my lunch and everything, of course I did it in less than 24 hours.

However, let's take a deep dive into what it actually was.

Essentially the brief was to create a gully cricket scorer app so that you can log in different scores while you are playing crickets.

The main assessment was that I have to create build and deploy the whole product, not just using a prototype, using figma, but I have to build it using Next JS or all the AI tools that's possible.

And then essentially the thing was that first and foremost the main event is the prototype so it should work.

And the fundamental thing was that it was you know like as it's a scorer for cricket.

The main ideal thing was that it should be working perfectly fine on like mobile devices across all the resolution.

Should not have any login info or anything or backend or anything.

Should be working perfectly fine.

All the edge cases should be taken care of and, and I've been like bunch of design decisions and everything and before I show you the design file, I'm going to show you a quick demo of how it's currently working.

So I have deployed it successfully in Vercel.

Last push I committed on 55 minutes ago.

And this is how it's looking on browser.

It looks a lot better on my smartphone and you guys can like check it by accessing the specific URL as well.

So So first and foremost if we come to this URL, you guys can access it on your phone as well.

You click on new match, button will be like sheet will be popping up with Quick match and full match.

For the full match I have created the figma but I haven't deployed it in vercel.

So if you click on quick match essentially this screen will pop up where you can like generate different team colors and you know like team names.

So as you can see by default blue and red is there.

You can I think like the gradient is not probably visible but there is only gradient shade added to it.

So you know like select whatever color you prefer.

Let's say I change it to like green, right?

And there are overs adding like players per side.

So I'm assuming let's for this demo I'm keeping it like only one over.

The moment I click on match all I have to do is like select what direction it is and then like I'm selecting you know like team green.

I selected two bowling.

Then I'll be able to see the color of the actual other team.

As you can see the team red has taken over the full screen.

You can see the scoring and everything the oversized and then you can start doing it.

So let's say first and foremost first ball, one run, then next ball in a wicket.

Then let's try some edge cases, let's say a wide ball.

So with a wide ball not only you get one run but also in the during the over an extra, you'll get an extra slot for like perform another ball and same with the no ball.

So we do that and another layer has been added.

So let's play some sixes and fours.

I've kept the 4 highlight because you know like it's one of the common thing that you can get and once it's done it shows the innings break and the full screen takes the gradient color of the actual team.

You see the team rare has scored in one overs and that's 19 with one wicket and the target is for 20.

You click on that and then essentially it takes the color of the second team which is green.

And then let's you know like let's make sure this team wins so that we can see the success state.

So it's done, you can see it's there.

It takes the screen and you know like you see the rematch and start new game.

So this is how it essentially looks like.

And of course there are some refinements I needed to do but Due to some, you know, like, lack of time.

I was like trying to complete it within 24 hours.

So I was like, you know what, let's not like finish that because I have the designs.

So this is how essentially it looks like in mobile.

You can try it.

It looks way better.

It's deployed on GitHub as well.

You guys can see like access the repo as well.

And then this was the overall, you know, like introduction of how it's performing.

And this is how it's performing on browser.

And for the mobile view, it essentially takes the full screen and also you can like the, you can scroll as well.

Like if you have like very what I can say like the older devices, let's say iPhone, SE or something, but in my phone it works perfectly fine.

And then let me take you guys through the figma.

So as you can see I have created a bunch of flows.

So number one, the Start screen, of course, as you already seen by the way, one quick introduction that I want to make is that like the only reason I chose this specific design and the design styles and everything.

And this is how it's essentially looking.

The reason being that I wanted to make the designs exactly like the prototype.

So if I choose certain design points, like you know, like these quandary, round days and all, which is pretty tricky to achieve like because it has different states and everything.

My idea was that I'm going to create a, you know, like fully functional, super, sexy sort of a UI in a very short time.

But also I wanted to make sure that it looks exactly the same in the actual deployed environment.

If not, then you know, like there is no point of designing something if you cannot actually achieve it.

This is my personal philosophy and this is how I perform.

So first and foremost I created the Start screen.

Of course you guys have already seen.

You click on New Match, this sheet appears now you can see the Quick Match and Full match.

This is exactly how it looks.

So if we click on this, you know, like new game, let's say I, go to this URL one more time and you click on New Match, you see the exact sheet appearing.

It looks exactly the same, but it's better, you know, like in the actual deployment because it has you know like blurs and everything going on.

And then essentially for the Quick match, I wanted to make it super simple.

You enter the team names, you add the gradients.

I wanted to add this darker gradient.

But of course, like, if I had some more time, I Would have you know like added this gradient, customizations as well.

And then all you have to do, select the team and what you are like preferring like bowling or batting.

And the moment you click continue, you end up, you know like on this screen and then you just like enter all this thing.

Of course the undo button is there, you click, you add something, you know, like, then you want to like go back.

Then of course this button is really handy and how it essentially works that first you have to type a specific score and then you have to click on the next ball.

The reason behind that is that like let's say you are assuming environment where you are playing and you have friends and everything a chaos.

So you can you know like always do a miss, typo.

If the phone screen is like enable and it's in your pocket.

So if we increase that in a cognitive load for you to select and then do the next ball number one, we are going to like take care of you know like this sort of a mistakes very heavily.

And then like you will be very prominent of what essentially the run you are adding on the screen and the you know, like the duration or you can say the probability of making mistakes will be very less.

And then it's pretty simple for the like quick match.

And then if I show you guys the full match, which is you know like very interesting is that like number one, you get the same screen, you add the players and the names.

But now you have to you know like select the players, right?

You can enter the players.

Now there are two approaches that I was thinking.

Of course number one is that you can directly add in like players by adding over there and based on the count that you have selected will you know like make the CTA disabled till you add all these players.

I was also thinking that what if we could enable the capability to like sync contacts and everything.

But then I realized that because the backend architecture was like made super simple, there is no backend or anything.

So there is like no needed.

And like who really cares about making everything like super straightforward.

We're not scoring you know like IPL match.

We're scoring a normal random place that you guys do with your friends, right?

So essentially the moment you add all the names, you can select like add team B players.

Because if the after you like enable, after you enter a list of like team members, of course you want to you know like complete the list for the other team.

So you select the other team, you complete all those things and the moment you are ready you will Be able to see the screen.

You can like drag to like slide people.

I haven't changed the names here, just wanted to showcase like how it essentially looks.

And then you select the you know like type what you want to do and then the moment you hit continue, it shows you the screen before the like match screen comes up that you have to select the bowler and you have to select two batsman.

As you can see in the innings, what essentially happens is that like if two people are like not there then you know like it's not a full complete cricket match that you are playing.

So that's why you have to select like two side players.

The first being the first one who is going to be exposed to the first ball and then second one is the runner who is there in the other side.

So and then essentially in this card we have added this section where you can see like who is batting.

The first one is like one who is currently batting and the second one is one who is in the other side.

So the moment they people shift.

So let's say like you select one, right, it goes to one and then it automatically going to switch to like Rohan Virat.

Because now Rohan is batting and the score of Rohan will be prominently shown over there.

Right now you see the Virat is active so that you can see 24 to 16.

That means like Virat has scored 24 runs and 16 balls.

And you can see Rahul is the one who is bowling.

And you see like Rahul has given you know like eight runs in 14 balls.

And the over is you know like 2.5 over this guy has done.

And this also shows that you know like who is balling, what's the current, you know like overs, the CRR and all those things.

The which is like current run rate and it also shows the innings.

So in case you have multiple innings in terms of future you can also add that.

And then essentially I created this, you know like scoring for edge cases as you already seen in the like actual prototype.

So this is how the basic scoring looks like now for the edge cases, for the no balls and everything.

This is how the container is going to like keep the same hierarchy and the same sizes of the you know like scoring balls.

It's just going to take a second row and going to show you the other edge cases that you have performed.

And then the innings break screen and the team on screen, everything looks exactly the same.

And this is what I wanted to like achieve in the prototype.

And one component that I created is for the scoring card.

So for basic numbers, let's say 1, 2, 3 and 5.

This, you know, like specific color, color card will be there.

So if I show you how it essentially looks, this specific component has this, you know, like variants and if I go there, you'll be able to see how this like things have been structured.

The dot ball, the white ball and everything has different color, you know, like identation to it.

So yeah, that was pretty much it.

And throughout this thing, how I approached it is that like of course I use in like chat GPT for curating this whole segment and I was using open code with deep seq v4 flash model to achieve all these things.

I don't use Claude or anything because I feel like the more articulation you perform and the more communication you become clearer to the actual AI agents you're working with.

You will eventually be a lot more efficient working different models because they have better reasoning.

And this is how I actually started.

So one of the edge cases was that I was doing how I do the bug fixes that I point out one screenshot in the deployment, then I point out how I want it to be, then I articulate using the dictation mode and then essentially because it has all the context that how I have structured everything, it gives me a defined prompt and with that I almost able to achieve it in one shot most of the time.

But if not we'll of course have to do like debug and everything.

So yeah, that was everything from the assignment and I hope like I was able to clarify everything that I have done and please make sure to like check it on your phone and try it and let me know if there is any edge cases.

There are of course like a few bugs here and there.

One bug that I can think of which is currently in the desktop is that the resolution currently you can see I have scored it to 80% because it looks prominently in this segment.

Right.

So if I increase it to let's say like 100%, you see the scrolling is not working.

Of course these are like next JS regression.

So I'm going to fix it, but I just kept it handy because you know like it's a very like edge case that very less people is going to actually play it in the browser.

Most of the people are going to like play it in their smartphone and smartphone it works 100% efficiently.

So yeah, this is what I wanted to point out that I am aware of the bugs and I know how to fix them and yeah, that's pretty much it.

Thank you so much for watching this video.

And I hope, I was only clear enough to let you guys know how I approached the problem and achieved it.

Thank you.