Health & Fitness - Settings Page for Mobile App
Introduction
I’ve taken on the task of making the settings page for a health and fitness app way easier to use. The current page is a bit of a mess, and users are having a hard time finding what they need. My goal is to create a settings page that’s simple, intuitive, and user-friendly.
I’ve focused on organizing everything into clear categories, adding a search bar for quick access, and making sure the design is consistent and easy to understand. By tackling the main issues and keeping user needs in mind, I’ve come up with a settings page that should make managing preferences a breeze.
-----
Industry
Health and Fitness -- iOS, Android Mobile Platform
Conduct Research
User Needs:
- Quick access to frequently used settings (e.g., notifications, account information).
- Clear categorization of settings for easier navigation.
- Search functionality for specific settings.
- Descriptive labels and tooltips for better understanding.
- Easy access to help and support.
Friction Points:
- Overwhelming number of options leading to cognitive overload.
- Poor organization of settings making it hard to find specific options.
- Lack of clarity in labels and descriptions.
- Inconsistent design elements causing confusion.
- No search functionality to quickly locate settings.
Design Decisions
Categorization:
- Group settings into clear, distinct categories (e.g., Account, Notifications, Privacy, App Settings, Help).
- Use collapsible sections to reduce visual clutter.
Search Bar:
- Add a search bar at the top of the settings page to allow users to quickly find specific settings.
Visual Hierarchy:
- Use different font sizes and weights to create a clear visual hierarchy.
- Implement icons alongside text for better recognition and quicker navigation.
Conclusion
The redesigned settings page aims to reduce cognitive overload by organizing options into clear categories, providing a search functionality, and ensuring a consistent and accessible design. These changes should help users easily find what they need without feeling overwhelmed, enhancing the overall user experience.
Thank you.
Tools used
From brief
Topics
Share
Reviews
1 review
First off, great job completing your design brief. It’s commendable how you made the project interactive and your walkthrough effectively illustrated your thought process.
Here are some feedback points that could help enhance your design:
- Highlight over notifications: Since the project is interactive, consider activating this on click rather than leaving it on, as it affects the screen’s overall composition.
- Font sizes: Double-check the subtext font sizes as they might be a bit small.
- Menu alignment: The notifications icon seems misaligned with the rest. Ensure it is inline.
- Notifications screen: Adding separator lines could enhance clarity. The switches are a good size but appear disproportionate compared to other elements.
- Header icon: The top-right icon on the notifications screen looks like a button. If this is a design convention it could be cool just consider making its function clearer to avoid confusion.
Keep up the great work!
Update 1:
Dennis, I'm so happy you took the time to update your design using the feedback. I think you’re the first project I’ve reviewed that has taken the time to do this, and it has already made a massive difference in the quality of the design. You’ve made me proud! I've updated my review to 5 stars for taking the feedback and running with it; this is a sign of a great designer. I know sometimes we spend a lot of time building these products and it can be difficult to not marry yourself to your ideas.
- The subtext of the list items looks much better now with the larger font.
- Love the interaction where I can open & close the notifications tab.
- The alignment of the list items is much improved.
- The separators now better define each of the list items.
- The toggles are now more in proportion to the rest of the elements.
My only two remaining concerns are:
1. Vertical Spacing: Check the vertical spacing in the notifications screen. The space above "Workouts" is larger than the rest, and the spacing under "Health Tips" is larger too. The spacing in the "Challenges" item seems just right. The same goes for the Notifications submenu in the main screen; spacing seems different between the 2 sublist items.
2. Notifications Icon: I’m still not 100% sold on the notifications icon in the header of the notifications screen. It can come across as a button. If the intention is an anchor point, I would consider having it as a leading icon to the title. This could be a personal preference, though. I also thought maybe it’s a master control to switch off all notifications?
Again, great work, Dennis. You no doubt have a bright future ahead!
Update 2:
You really made my day man, these were all small fixes that together made a big difference. Cheers to 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 ]
