Introduction
The current practice tab of the application has a column layout with two sections, Themes and Roleplay. I redesigned this into two different layouts — A card layout and a bento layout. For reference, below is the current layout of the tab.
Design changes
- The tab has a stars section that displays the amount of stars earned while completing each of the topics. But there is no way for the user to know the progress of each of the topic without clicking on it.
- Each tab lacks description of the topic, this description might help a user know more about the topic.
- A prettier UI would also be better for the user experience.
Card Layout
- This layout solves the individual topic progress issue by adding stars to each of the topics
- Each card also has descriptions that describe the topic which will help the user.
- The button color pallete is changed to a more monochromatic look for a cleaner appearence
Bento Layout
- This layout creates a prettier layout by using the japanese bento layout and more colors.
- There is also another tab added for the user to continue where they left off from the last session at the top of the tab for convenience
Use of Figma Components and Variants
- All the changeable elements in the design are converted to components and variants
Use of Auto Layouts
- All the components in the design are encompassed in auto layouts for easier development process.
