Redesigning the CATEGORY LISTING Screen of the Fold Money App

Фильм және анимация

🚀 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 :)

Пікірлер: 38

  • @DemystifyingDesign
    @DemystifyingDesign4 ай бұрын

    Didn't realize there were people going into this much detail for UI design on KZread! Love how you broke down the flow visually instead of just redesigning it without any context. Great work!

  • @liyakatali1746
    @liyakatali17466 ай бұрын

    Really appreciate your approach to finding the best solution. Very Engaging.

  • @adityasshukla
    @adityasshukla5 ай бұрын

    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.

  • @DesignPilot

    @DesignPilot

    5 ай бұрын

    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

  • @adityasshukla

    @adityasshukla

    4 ай бұрын

    ​@@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!

  • @dharanitharanr5597
    @dharanitharanr55979 күн бұрын

    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

  • @DesignPilot

    @DesignPilot

    9 күн бұрын

    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.

  • @altamashkhan5870
    @altamashkhan5870Ай бұрын

    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 ?

  • @DesignPilot

    @DesignPilot

    Ай бұрын

    Sorta yes

  • @altamashkhan5870

    @altamashkhan5870

    Ай бұрын

    @@DesignPilot Is there Anything you would like to add on top ?

  • @SatyamBarnwal090
    @SatyamBarnwal09013 күн бұрын

    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 " 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???

  • @DesignPilot

    @DesignPilot

    13 күн бұрын

    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.

  • @SatyamBarnwal090

    @SatyamBarnwal090

    13 күн бұрын

    ​@@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??

  • @DesignPilot

    @DesignPilot

    13 күн бұрын

    @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

  • @sachinkumart
    @sachinkumart2 ай бұрын

    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.

  • @DesignPilot

    @DesignPilot

    2 ай бұрын

    That’s very true. It was a conscious recision to not have color. But yes, adding colors also could be done

  • @azoozsaleh8331
    @azoozsaleh83315 ай бұрын

    peace be upen you🙂 please can you talk about figma project structure deep, as team company, freelancer for team or one designer

  • @krypto305
    @krypto3055 ай бұрын

    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!

  • @DesignPilot

    @DesignPilot

    5 ай бұрын

    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.

  • @krypto305

    @krypto305

    5 ай бұрын

    @@DesignPilot I get it! Thank you for your reply.

  • @omkarkadam1131
    @omkarkadam11315 ай бұрын

    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?

  • @DesignPilot

    @DesignPilot

    5 ай бұрын

    You can design at the smallest size.

  • @DragonWolfGamer
    @DragonWolfGamer6 ай бұрын

    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

    @DesignPilot

    6 ай бұрын

    Good observation. I don’t like these icons too. But I could not find any free icons with nice corer radius.

  • @SatyamBarnwal090

    @SatyamBarnwal090

    13 күн бұрын

    @@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.

  • @DesignPilot

    @DesignPilot

    13 күн бұрын

    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

  • @jaljithsreenivasan2271
    @jaljithsreenivasan22715 ай бұрын

    I was thinking instead of pie chart why can't we use charts like stock market? with D, M, Y filters

  • @DesignPilot

    @DesignPilot

    5 ай бұрын

    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.

  • @jaljithsreenivasan2271

    @jaljithsreenivasan2271

    5 ай бұрын

    Oh. okayy thanks!@@DesignPilot

  • @paparatsan6140
    @paparatsan61405 ай бұрын

    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.

  • @DesignPilot

    @DesignPilot

    5 ай бұрын

    What’s your email?

  • @paparatsan6140

    @paparatsan6140

    5 ай бұрын

    @@DesignPilot How do I write my mail here????

  • @kavineesh12
    @kavineesh126 ай бұрын

    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

  • @DesignPilot

    @DesignPilot

    6 ай бұрын

    That’s where the back button is in a linear flow. However adding it on the right is also not a bad option.

  • @kawserahmed1712
    @kawserahmed17125 ай бұрын

    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 🙄🙄

  • @DesignPilot

    @DesignPilot

    5 ай бұрын

    Nope. I haven’t increased the price. It’s been the same for a few weeks now

Келесі