On this Code Challenge, my task was to redesign an Account Dashboard to test my abilities in HTML, CSS, UX Design and UI Design. I started using the platform on how it was, and I noticed a lot of things that should have to be redesigned. In my process I started thinking more about how I can improve the way that every action was told by the user. So I thought the best way was to think more about components and try to reach a more atomic design way of doing this project.
So I started doing wireframes and listing the following components:
- The Header: In here we will have the main title as well as some options buttons that have: Currency, Location and Date. This header will be displayed fixed in mobile for better user experience.
- The Totals Report: This component will show the total reports of all accounts, as a main information for the user this will be shown at the beginning of the application.
- The Account List: this would be the list of accounts the are available, there will be a pagination since this list can be very large. This list will have settings that will give to the user the possibility to sort the information, or just show relevant info.
- The Account Info: This section will be showing details of the inner account, such as sub accounts, movements and description.
- The Actions: Every app have it's own actions, in here I notice the user should find a way to sort and filter their information, so in this sections I used a tooltip options so users can read and understand better their actions such as Sort elemens and Change settings.
I started by writing the list of elements and components as I show. Later on I create wireframes to have a general idea on how my design will be displayed. After this, I create a Figma file using Material Design Icons to help me get a better UX. You can check the Figma file here
You can try a demo here