Redesigning the CATEGORY LISTING Screen of the Fold Money App
VloĹžit
- Äas pĹidĂĄn 31. 07. 2024
- đ Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
In this video, we will redesign the Category Listing Screen. We will first understand what are the flaws with the current design and then understand the best ways to design a simpler and scalable design.
đ Checkout the Complete playlist:
⢠Mini Series on Redesig...
đ The Ultimate Guide to Become a Product Designer: learnproduct.design
đ Create an account on Mobbin for free:
mobbin.com/?via=chethan
đś Chapters
00:00 Introduction
00:24 Recap
01:58 Reviewing the Current Design
04:49 Defining User Stories
06:36 Design Iterations
16:13 Final Design
20:14 Validating the Final Design
--------------------------------------Â---
Mega Product Design Course for Beginners:
⢠The Mega Product Desig...
Webflow Course for Beginners:
⢠Webflow Course for Beg...
Photoshop Tutorials:
⢠Photoshop CC Tutorials
Illustrator Tutorials:
⢠Illustrator CC Tutorials
After Effects Tutorials:
⢠After Effects CC Tutor...
UI Design Tutorials:
⢠UI Animation/Interacti...
Design Resources, Tools and Softwares:
⢠Design Resources, Tool...
Adobe XD CC Tutorials:
⢠Adobe XD CC Tutorials
eSports Design Tutorials:
⢠eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: designpilot21@gmail.com
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :) - KrĂĄtkĂŠ a kreslenĂŠ filmy
Didn't realize there were people going into this much detail for UI design on CZcams! Love how you broke down the flow visually instead of just redesigning it without any context. Great work!
Really appreciate your approach to finding the best solution. Very Engaging.
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.
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!
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
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 ?
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
peace be upen youđ
please can you talk about figma project structure deep, as team company, freelancer for team or one designer
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.
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
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.
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????
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
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