Settings Page for Mobile App
The goal of this design was to reduce cognitive overload and improve usability by organizing the settings page into a clean, intuitive structure. The design follows a black-themed interface, enhancing contrast and readability while maintaining a modern, sleek appearance.
Key Features & Improvements:
User Account Section (Top Priority)
- Displays profile picture, name, email, and ID for quick user identification.
- Includes an edit icon for easy profile updates.
- Positioned at the top to give users immediate access to their personal information.
Preferences Section (Customizable User Experience)
- This section includes frequently accessed personal settings such as:
- Language (Current language displayed for clarity)
- Notification (Manage app alerts)
- Chats (Conversation settings)
- Additional Settings (Advanced options)
- Sounds & Haptics (Audio and vibration preferences)
- Organized with icons and labels for quick recognition and easy scanning.
Connections Section (Network & Device Settings)
- Dedicated to managing connectivity-related options, including:
- SIM Cards (Displays active network providers)
- Wi-Fi (Shows connected network name)
- Bluetooth (Indicates on/off status)
- Portable Hotspot (Current status displayed)
- Connections & Sharing (More advanced connectivity options)
- This structured grouping allows users to locate relevant settings efficiently without overwhelming them with excessive information.
Outcome & Impact
By implementing these improvements, the designed settings page now provides a streamlined and structured experience, enabling users to navigate effortlessly without feeling overwhelmed. The minimalistic design, logical grouping, and collapsible sections contribute to a more intuitive and user-friendly interface.
Tools used
From brief
Topics
Share
Reviews
1 review
Hey Nasir,
Well done on completing your design brief in both dark and light modes—going the extra mile really shows! Also, making full-color icons work is no small feat, and you’ve handled it well. Including a walkthrough adds valuable context, though a brief explanation of its purpose would have made it even stronger.
Here are some refinements to elevate your already great work:
- The edit info icon in the top account section should be vertically centered using the left-side content as a guide—it currently feels too high. Also, the subtext here is a bit small; matching it to the indicators (e.g., "Language - English") would improve consistency.
- "Notification" should be "Notifications" for better grammar.
- Strengthening typographic hierarchy will enhance readability. Section titles are too close to the settings below them, making them blend together.
- Adding faint divider lines between list items and slightly increasing negative space in each section will improve differentiation.
- The SIM card icon is a bit hard to see against the dark background; the others work well. Also, consider reducing their size slightly.
- If settings like Bluetooth or Portable Hotspot are simple on/off switches, I can see you’re already showing their state. However, since they also have a chevron/disclosure indicator, it suggests they lead to a separate page. If that’s unnecessary, consider removing the chevron and label, replacing them with a direct switch instead. This would eliminate an extra navigation step and reduce text clutter on the page.
- The grey containers in light mode feel slightly too dark for my liking—they could be lightened a bit to maintain contrast without feeling heavy.
- In your prototype, adding a dark/light mode switch within the list would allow viewers to toggle modes seamlessly without exiting the prototype—a nice touch for engagement.
- Consider list order based on usage priority. If “Additional Settings” contains less frequently accessed options, placing it below core settings like Sound & Haptics would improve usability.
Great work overall—I’m excited to see more from you!
You might also like

Sneak

Heuristic Evaluation - Booking.com

User persona for TikTok

Empathy Map - Revolut
![UNIVERSALTAXPROFESSIONALS WEBSITE REVAMP [ Informational Website ]](https://users-content.uxcel.com/451aa544-1b86-419f-9120-5a6ac83f023f/briefs/universaltaxprofessionals-website-revamp-informational-website-thubmnail-8090-1756604786988.jpeg)
UNIVERSALTAXPROFESSIONALS WEBSITE REVAMP [ Informational Website ]
