<?xml version="1.0" encoding="utf-8"?>
Open full project

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.

Settings Page for Mobile App 1

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.

Settings Page for Mobile App 2

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.

Share your insights — leave a project review and help others grow their skills

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! 


9 Claps
Average 4.5 by 2 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>