Didn't realize there were people going into this much detail for UI design on TH-cam! Love how you broke down the flow visually instead of just redesigning it without any context. Great work!
Great video Chetan, I had a thought, at the final stage, instead of showing the percentage for each category, won't it be more helpful to show the trend under each category. like when users see an increase in trend inside the category, they can easily understand that they have spent higher than their last month (It was kind of mentioned in user stories too). What do you think bro
I would not add trends on this screen because of the context of the screen. This screen is a breakdown of all the categories of expenses for a total month. Showing percentage is more important than showing trend here.
Wonderfull Break down chethan the solutions you have designed are much more clear to me now and makes really good sense, I just want to take one key note from this video in the first introductory video you have mentioned that you can add some extra feature in the app, I thought by feature you are talking about an entire complete new feature such as ( budgeting ) as for this example. But when I dig deep into your more videos I found out it really a product manager job to solve for not the product design problem. and in this video you have added those tiny feature which actually makes sense in the design app. Am I right or wrong ?
Hey Chethan. I hv a few questions regarding your design decisions here. Just like you mentioned that, by scrolling the insider elements of the top card, users can see the data for different months, which is definitely more convenient than checking it by clicking the calendar icon. But my question is : 1. How do they know that they can see the different month's data by scrolling it?? yes, there are those dots but they just tell that the inside elements are scrollable. But I have no idea what we'll find there. Don't you think it would be better if we put the "Nov 2023" inside the card just above the pie chart and added 2 chevrons on both sides or just to the left (for the present month) of it? ( like "< Nov 2023" ) I think this is conveying better that we can find the other month's data here. And the other question is that You also mentioned that by scrolling the data, the "categories section" would also change to that month. but don't you think it's a little off, that You are scrolling the insider elements of the card and it also changing the categories section which is the outer part of the card?? Just want to know your opinions on it???
1. Sure, your method could work too. But I think my proposal also should work. It's very unlikely that someone will not know what they will see when they scroll. Even if they don't know I guess it's okay since it will be a one time learning experience and no risk at all for the company. 2. It's a very common pattern used in many apps already. I understand why it looks off. It's mainly because of the visual language of having all these different cards for every piece of content.
@@DesignPilot Hmmm... I got it. One more thing Chethan, I hv read a few comments talking about the visuals of the app and I too want to ask about the same. When you redesigned some of the screens, definitely each and every design decision made complete sense to me but when I looked at the Visuals of the screen, especially the Home screen, honestly speaking I'm not able to understand why it looks very basic to me. Btw I am not saying to add anything just to make it look good but I just want to know, if we have solved the problem, and made all the design decisions perfectly after that 'Is there any problem with adding some more aesthetics and coolness into the interface of the app. Same elements, same spacings just adding some cool gradients, or some dribble elements to fill up the screen and make it aesthetically pleasing. I know from a product design standpoint it's not totally right but still just want to know. Is there any problem with adding extra aesthetics after solving the problems perfectly??
@SatyamBarnwal090 I agree it looks basic. But as I’ve mentioned many times before in the video, there are 3 main reasons. 1. Basic typeface. This is more than enough to reduce the look and feel of the app. I’ve used what fold money has exactly used. 2. Inconsistent icon style 3. Visual language of having too many surfaces. If we redesign it with a better font and remove the concept of layers and have things as flat as possible, the UI would look much more aesthetically pleasing
Love the thought process so far. I'm not sure if the UI shown in this video is a part of your final design but it feels very amateurish. I know you are considering Fold's design language here but the current app looks much better than the redesigned screens visually. I am well aware that you are an excellent visual designer, wonder what's up with this redesign? Maybe it's not final.
Amateurish is quite vague imo. I would highly disagree with the fact that Fold Money’s design is better than mine. The screens are extremely noisy and cluttered. There are tons of inconsistencies across the app. The other modes are quite a mess and I don’t believe enough care been given overall. I think if you watch the initial videos where I talk about setting a visual direction, it would help you understand better
@@DesignPilot Yes, I am all in for the UX improvements and removing visual inconsistencies. I am only pointing to the visuals i.e. the look/aesthetics. I guess that is not a focus right now, and much of it is also subjective. Nevertheless, thanks for your effort!
Hello, Chethan! I really appreciate your hard work! I just have a one question, at 21:35 we have a full view of the screen. If you look at the top section of the screen "Pie Chart" it shows different colors to represent different categories. But at the bottom section "Categories" we have no color assigned to any of the card. Does it mean that the user have to figure out which category this color represents?I hope it makes sense, and thank you for your hard work! Please keep uploading good stuff!
Great question. And yes, this is something I haven’t made a decision on. 1. Adding more color on the screen can make it too colorful and directing. If I added colors to the various icons on this screen, I need to add it across the entire app, for example the transaction screen. It might make the app too colorful. Maybe that’s alright. But I prefer to keep less colors. It’s a personal preference. 2. Since the categories are already categorised in the highest expense to lowest expense, users won’t be confused if there is no color associated.
Hey, I have one question to ask, If I am designing app screen for android, should I use 360x640 (which is smallest) or i can increase my height? My concern is if I am designing an app which have no content to scroll down and if i make that design in smallest size then will it look different on android screen which have larger heights (Samsung phones)? or I have to make design adaptable for bigger sizes?
may be its not worth asking but your cards buttons have some good amount of corner radius and the calendar icon that you are using have sharp edges its kind of giving squarish feeling doesn't its being inconsistent in some way
@@DesignPilot So why didn't you just made the icon by yourself using pen tools. I think it barely takes 30-60 secs to create it. I'm asking this coz you yourself said that if the icons ain't much complex try designing them by yourself.
Just because icons are not complex doesn’t mean it takes 60 seconds to make it buddy. And making all those icons doesn’t really add any extra value to the video. The video is not about icons
One thing that bothers me about this UI is that the chart colors are not associated with specific categories. For example, I can see the color purple, but I don't know which category it represents.
Like charts - Trend over a period of time Pie charts - Total value in a particular period of time. Both of these are very different use cases. The objective here is not to see a graph of how much are the expenses over a period of time. The user only wants to know the total accumulated value in a particular period of time.
Why do these days apps have a close icon towards the left, is this a new definition of closing something like you used the close icon on the left at 10:30
The Ultimate Guide to Become a Product Designer courses should have some discount, Just few days back I saw that price was like near 5K rupes, Now the price almost 7K rupees, and the paying though doller that's more than those, isnstand of giving discount you're increasing 🙄🙄
Didn't realize there were people going into this much detail for UI design on TH-cam! Love how you broke down the flow visually instead of just redesigning it without any context. Great work!
Great video Chetan, I had a thought, at the final stage, instead of showing the percentage for each category, won't it be more helpful to show the trend under each category. like when users see an increase in trend inside the category, they can easily understand that they have spent higher than their last month (It was kind of mentioned in user stories too). What do you think bro
I would not add trends on this screen because of the context of the screen.
This screen is a breakdown of all the categories of expenses for a total month. Showing percentage is more important than showing trend here.
Really appreciate your approach to finding the best solution. Very Engaging.
Wonderfull Break down chethan the solutions you have designed are much more clear to me now and makes really good sense, I just want to take one key note from this video in the first introductory video you have mentioned that you can add some extra feature in the app, I thought by feature you are talking about an entire complete new feature such as ( budgeting ) as for this example. But when I dig deep into your more videos I found out it really a product manager job to solve for not the product design problem. and in this video you have added those tiny feature which actually makes sense in the design app. Am I right or wrong ?
Sorta yes
@@DesignPilot Is there Anything you would like to add on top ?
Hey Chethan. I hv a few questions regarding your design decisions here. Just like you mentioned that, by scrolling the insider elements of the top card, users can see the data for different months, which is definitely more convenient than checking it by clicking the calendar icon. But my question is :
1. How do they know that they can see the different month's data by scrolling it?? yes, there are those dots but they just tell that the inside elements are scrollable. But I have no idea what we'll find there.
Don't you think it would be better if we put the "Nov 2023" inside the card just above the pie chart and added 2 chevrons on both sides or just to the left (for the present month) of it?
( like "< Nov 2023" ) I think this is conveying better that we can find the other month's data here.
And the other question is that You also mentioned that by scrolling the data, the "categories section" would also change to that month. but don't you think it's a little off, that You are scrolling the insider elements of the card and it also changing the categories section which is the outer part of the card??
Just want to know your opinions on it???
1. Sure, your method could work too. But I think my proposal also should work. It's very unlikely that someone will not know what they will see when they scroll. Even if they don't know I guess it's okay since it will be a one time learning experience and no risk at all for the company.
2. It's a very common pattern used in many apps already. I understand why it looks off. It's mainly because of the visual language of having all these different cards for every piece of content.
@@DesignPilot Hmmm... I got it.
One more thing Chethan, I hv read a few comments talking about the visuals of the app and I too want to ask about the same. When you redesigned some of the screens, definitely each and every design decision made complete sense to me but when I looked at the Visuals of the screen, especially the Home screen, honestly speaking I'm not able to understand why it looks very basic to me.
Btw I am not saying to add anything just to make it look good but I just want to know, if we have solved the problem, and made all the design decisions perfectly after that 'Is there any problem with adding some more aesthetics and coolness into the interface of the app. Same elements, same spacings just adding some cool gradients, or some dribble elements to fill up the screen and make it aesthetically pleasing.
I know from a product design standpoint it's not totally right but still just want to know. Is there any problem with adding extra aesthetics after solving the problems perfectly??
@SatyamBarnwal090 I agree it looks basic. But as I’ve mentioned many times before in the video, there are 3 main reasons.
1. Basic typeface. This is more than enough to reduce the look and feel of the app. I’ve used what fold money has exactly used.
2. Inconsistent icon style
3. Visual language of having too many surfaces.
If we redesign it with a better font and remove the concept of layers and have things as flat as possible, the UI would look much more aesthetically pleasing
Love the thought process so far. I'm not sure if the UI shown in this video is a part of your final design but it feels very amateurish. I know you are considering Fold's design language here but the current app looks much better than the redesigned screens visually. I am well aware that you are an excellent visual designer, wonder what's up with this redesign? Maybe it's not final.
Amateurish is quite vague imo. I would highly disagree with the fact that Fold Money’s design is better than mine. The screens are extremely noisy and cluttered. There are tons of inconsistencies across the app. The other modes are quite a mess and I don’t believe enough care been given overall. I think if you watch the initial videos where I talk about setting a visual direction, it would help you understand better
@@DesignPilot Yes, I am all in for the UX improvements and removing visual inconsistencies. I am only pointing to the visuals i.e. the look/aesthetics. I guess that is not a focus right now, and much of it is also subjective. Nevertheless, thanks for your effort!
Hello, Chethan! I really appreciate your hard work!
I just have a one question, at 21:35 we have a full view of the screen. If you look at the top section of the screen "Pie Chart" it shows different colors to represent different categories. But at the bottom section "Categories" we have no color assigned to any of the card.
Does it mean that the user have to figure out which category this color represents?I hope it makes sense, and thank you for your hard work! Please keep uploading good stuff!
Great question. And yes, this is something I haven’t made a decision on.
1. Adding more color on the screen can make it too colorful and directing. If I added colors to the various icons on this screen, I need to add it across the entire app, for example the transaction screen. It might make the app too colorful. Maybe that’s alright. But I prefer to keep less colors. It’s a personal preference.
2. Since the categories are already categorised in the highest expense to lowest expense, users won’t be confused if there is no color associated.
@@DesignPilot I get it! Thank you for your reply.
Hey, I have one question to ask, If I am designing app screen for android, should I use 360x640 (which is smallest) or i can increase my height? My concern is if I am designing an app which have no content to scroll down and if i make that design in smallest size then will it look different on android screen which have larger heights (Samsung phones)? or I have to make design adaptable for bigger sizes?
You can design at the smallest size.
may be its not worth asking but your cards buttons have some good amount of corner radius and the calendar icon that you are using have sharp edges its kind of giving squarish feeling doesn't its being inconsistent in some way
Good observation. I don’t like these icons too. But I could not find any free icons with nice corer radius.
@@DesignPilot So why didn't you just made the icon by yourself using pen tools. I think it barely takes 30-60 secs to create it. I'm asking this coz you yourself said that if the icons ain't much complex try designing them by yourself.
Just because icons are not complex doesn’t mean it takes 60 seconds to make it buddy. And making all those icons doesn’t really add any extra value to the video. The video is not about icons
Hey Chetan I have purchased your design course but I am still waiting for the activation link can you please check so I can start learning Thanks.
What’s your email?
@@DesignPilot How do I write my mail here????
peace be upen you🙂
please can you talk about figma project structure deep, as team company, freelancer for team or one designer
One thing that bothers me about this UI is that the chart colors are not associated with specific categories. For example, I can see the color purple, but I don't know which category it represents.
That’s very true. It was a conscious recision to not have color. But yes, adding colors also could be done
I was thinking instead of pie chart why can't we use charts like stock market? with D, M, Y filters
Like charts - Trend over a period of time
Pie charts - Total value in a particular period of time.
Both of these are very different use cases. The objective here is not to see a graph of how much are the expenses over a period of time. The user only wants to know the total accumulated value in a particular period of time.
Oh. okayy thanks!@@DesignPilot
Why do these days apps have a close icon towards the left, is this a new definition of closing something
like you used the close icon on the left at 10:30
That’s where the back button is in a linear flow. However adding it on the right is also not a bad option.
The Ultimate Guide to Become a Product Designer courses should have some discount, Just few days back I saw that price was like near 5K rupes, Now the price almost 7K rupees, and the paying though doller that's more than those,
isnstand of giving discount you're increasing 🙄🙄
Nope. I haven’t increased the price. It’s been the same for a few weeks now