Settings screen for A Productivity app
I conducted thorough research and gathered insights from a variety of applications, including Telegram, WhatsApp, LinkedIn, and Airbnb. This analysis enabled me to integrate best practices and design elements from these platforms to create a user-friendly settings page for the Payments app.
In the Payments section, I decided to use radio buttons for selecting the payment method. This choice enhances usability and accessibility, ensuring that users can easily identify and select their preferred payment option without confusion. Radio buttons are particularly effective for this purpose as they allow users to choose only one option from a group.
Furthermore, I introduced an "Appearance" section in the settings page. This feature is designed to enhance the user experience for individuals with visual impairments or for older users who may have difficulty seeing the screen clearly without corrective lenses. The Appearance section includes options to adjust text size, contrast, and color schemes, making the app more accessible and easier to navigate for everyone.
Tools used
From brief
Topics
Share
Reviews
1 review
Nice job completing your design brief! I love that you included your reference materials, a short walkthrough, and presented the work in an easily digestible format—fantastic work.
Here are some feedback points that could potentially help improve your work:
- Icon Size and Placement: The icons in your settings list appear slightly too small and detached from the menu items. Adjusting their size for better visual balance and ensuring the icons are more integrated with the menu items could enhance the overall aesthetic. Additionally, the edit icon on the main card at the top of the page looks more like a “compose” icon. Consider using an icon that more accurately represents the "edit" action to avoid confusion.
- Separator Lines in Main List: Adding separator lines could help define each menu item more clearly. This would make the list easier to navigate and visually appealing, improving the overall scalability of the page.
- Search Option Functionality: The search option is great for users in a rush. However, it would be beneficial to demonstrate how the search option works in the interactive prototype, to showcase its usability and efficiency.
- Edit Icon Placement: The edit icon on the main card could be reconsidered. It currently resembles a “compose” icon more than an “edit” icon. Exploring alternatives that more clearly communicate the “edit” action would improve user understanding.
- Spacing and Layout: The title is quite close to the top of the phone, creating a cramped look. Providing more breathing room between the title and the top of the phone, using similar spacing as below the title, would create a more balanced layout.
- Prototyping and Animation: Great job on prototyping; it effectively communicates your vision. However, on the payments & payouts screen, there's some strange behavior in the animation when opening the payment method popup. Reviewing and ensuring smooth animations will enhance the user experience by making interactions feel more natural.
- Spacing Between List Items: The spacing between list items on the payments & payouts screen isn't equal. Adjusting the spacing to ensure uniformity and adding separator lines could help in distinguishing each item and improving readability.
- Privacy & Sharing List Alignment: The list in the Privacy & Sharing section is a tad too low from the header. Slightly raising the list would improve its alignment with the header, ensuring a cohesive and polished look (same this issue on the page that followed as well
Overall, your work is commendable, and these tweaks can further enhance the user experience. Keep up the great work, and I look forward to seeing your updates!
You might also like

Sojo NFT Marketplace

From Idea to Full-Stack Web App

Docto

Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)

Fundraising Website
