Muhammad Affan
Muhammad Affan
Muhammad Affan
BodyMind
BodyMind
Project Duration
4 months
My Role
UX Researcher | UI Designer
Team Members
Afaq, Muhammad Affan, Mustafa, Sara, Simra
Project Duration
Project Duration
4 months
4 months
My Role
My Role
UX Researcher | UI Designer
UX Researcher | UI Designer
Team Members
Team Members
Afaq, Muhammad Affan, Mustafa, Sara, Simra
Afaq, Muhammad Affan, Mustafa, Sara, Simra
Context
Context
Our team, reconnecting after 1.5 years of COVID lockdown, talked about the challenges we faced during COVID. One common challenge was appearance-related anxieties due to limited physical activity. Inspired, we decided to build a wellness app to help others with similar struggles.
Our team, reconnecting after 1.5 years of COVID lockdown, talked about the challenges we faced during COVID. One common challenge was appearance-related anxieties due to limited physical activity. Inspired, we decided to build a wellness app to help others with similar struggles.
Design Cycle
Design Cycle
Process Walkthrough
Process Walkthrough
Task at Hand
Task at Hand
Problem Description
Problem Description
Many people have physical features they dislike, but for some, this dissatisfaction becomes an overwhelming obsession, leading to severe anxiety and loss of self-confidence. This can escalate into Body Dysmorphic Disorder (BDD), where individuals become fixated on perceived flaws in their appearance, significantly disrupting their personal, social, and professional lives.
Many people have physical features they dislike, but for some, this dissatisfaction becomes an overwhelming obsession, leading to severe anxiety and loss of self-confidence. This can escalate into Body Dysmorphic Disorder (BDD), where individuals become fixated on perceived flaws in their appearance, significantly disrupting their personal, social, and professional lives.
Our Mission
Our Mission
Empower individuals suffering from Body Dysmorphic Disorder (BDD) by providing accessible tools and resources to help them understand, manage, and overcome their appearance-related anxieties. We aim to connect users with professional guidance while fostering a supportive environment for personal growth and self-acceptance.
Empower individuals suffering from Body Dysmorphic Disorder (BDD) by providing accessible tools and resources to help them understand, manage, and overcome their appearance-related anxieties. We aim to connect users with professional guidance while fostering a supportive environment for personal growth and self-acceptance.
Task at Hand
Task at Hand
User Research
Research Methods
Research Methods
We started off with primary research by carrying out a thorough literature review of 20 papers on the topic. We then shifted our focus towards secondary research, conducting 10 semi-structured interviews, 7 contextual inquiries, 1 survey, and a couple of focus groups.
We started off with primary research by carrying out a thorough literature review of 20 papers on the topic. We then shifted our focus towards secondary research, conducting 10 semi-structured interviews, 7 contextual inquiries, 1 survey, and a couple of focus groups.
Primary Research Findings
Primary Research Findings
Studies consistently showed that social media's portrayals of idealized physiques significantly influence body dissatisfaction in both sexes.
While most previous work has done great work in diagnosing BDD, often using different methods, there was not significant focus on its treatment or intervention strategies.
Studies consistently showed that social media's portrayals of idealized physiques significantly influence body dissatisfaction in both sexes.
While most previous work has done great work in diagnosing BDD, often using different methods, there was not significant focus on its treatment or intervention strategies.
Secondary Research Findings
Secondary Research Findings
Impact on Daily Life: Many participants shared that their BDD symptoms deeply affected their routine.
Social Isolation: In focus groups, several participants highlighted that they avoid social gatherings because they constantly feel judged.
Influence of Social Media: During contextual inquiry, some people in the gym felt a tendency to keep comparing themselves with bigger people.
Barriers to Seeking Help: Interviews revealed a reluctance to seek professional support and preferred something more private.
Impact on Daily Life: Many participants shared that their BDD symptoms deeply affected their routine.
Social Isolation: In focus groups, several participants highlighted that they avoid social gatherings because they constantly feel judged.
Influence of Social Media: During contextual inquiry, some people in the gym felt a tendency to keep comparing themselves with bigger people.
Barriers to Seeking Help: Interviews revealed a reluctance to seek professional support and preferred something more private.
User Research
User Research
Design
Brainstorming
Brainstorming
We came up with the features that will be included in our product according to the needs of the users.
We came up with the features that will be included in our product according to the needs of the users.
Design Alternatives
Design Alternatives
After brainstorming, we came up with 3 design alternatives: a Web application, a smartwatch, and a mobile application.
After brainstorming, we came up with 3 design alternatives: a Web application, a smartwatch, and a mobile application.
Scenarios & Storybaords
Scenarios & Storybaords
To ensure a seamless link between users and the product, we created scenarios & storyboards to illustrate potential user interactions with our product.
To ensure a seamless link between users and the product, we created scenarios & storyboards to illustrate potential user interactions with our product.
Sam sees a social media post of a “perfect male body” and feels insecure. After researching workout apps, he finds ours and chooses a plan suited to his goals. He follows the plan daily and eventually notices positive changes in his body, which boosts his confidence.
Sam sees a social media post of a “perfect male body” and feels insecure. After researching workout apps, he finds ours and chooses a plan suited to his goals. He follows the plan daily and eventually notices positive changes in his body, which boosts his confidence.
Sasha, a 21-year-old student, feels insecure about her nose and searches for ways to cope. She finds and downloads the app, choosing the self-assessment option. After completing the questionnaire, she learns about BDD, how her symptoms align with it, and where she stands on the BDD scale. Informed about her condition, Sasha receives recommendations for overcoming BDD, making her feel more empowered.
Sasha, a 21-year-old student, feels insecure about her nose and searches for ways to cope. She finds and downloads the app, choosing the self-assessment option. After completing the questionnaire, she learns about BDD, how her symptoms align with it, and where she stands on the BDD scale. Informed about her condition, Sasha receives recommendations for overcoming BDD, making her feel more empowered.
Low-Fidelity Prototyping
Low-Fidelity Prototyping
After developing a proper understanding of user needs and what our product will entail, we developed a lo-fi paper prototype which efficiently checked and tested the functionality of our app.
After developing a proper understanding of user needs and what our product will entail, we developed a lo-fi paper prototype which efficiently checked and tested the functionality of our app.
Usability Testing
Usability Testing
We tested 5 workflows by asking the users to complete each task with the think-aloud protocol. We observed user frustrations and measured different metrics - one of them was average task completion time in seconds. Post-testing, users were asked to rate their overall experience for each task and suggest improvements. The insights from user testing enabled us to refine and improve our workflows and designs.
We tested 5 workflows by asking the users to complete each task with the think-aloud protocol. We observed user frustrations and measured different metrics - one of them was average task completion time in seconds. Post-testing, users were asked to rate their overall experience for each task and suggest improvements. The insights from user testing enabled us to refine and improve our workflows and designs.
High-Fidelity Prototyping
High-Fidelity Prototyping
For this project, Figma was used to design the high-fidelity prototype, ensuring a smooth and responsive user experience. Based on feedback from usability testing, adjustments were made to the interface, such as improving navigation flow and refining button placements. The prototype adhered to material design guidelines for consistency and accessibility. A clean inter typeface was chosen for readability, and a calming color pallete of green on white was selected to create a non-intrusive atmosphere.
For this project, Figma was used to design the high-fidelity prototype, ensuring a smooth and responsive user experience. Based on feedback from usability testing, adjustments were made to the interface, such as improving navigation flow and refining button placements. The prototype adhered to material design guidelines for consistency and accessibility. A clean inter typeface was chosen for readability, and a calming color pallete of green on white was selected to create a non-intrusive atmosphere.
Design
Design
Designs & Rationale
Designs & Rationale
Onboarding
Onboarding
Login: The login screen adopts a minimalist design, ensuring cognitive load remains low by displaying only essential elements. The high-contrast, affordant green "Log In" button enhances visual hierarchy and reinforces the primary call-to-action (CTA). Supporting actions like "Forgot Password" and "Sign Up" are positioned with lower visual weight, maintaining discoverability without detracting from the main flow. The use of SSO options like Google and Facebook supports alternative login paths, enhancing usability and reducing barriers to entry.
Sign Up: This screen uses progressive disclosure by only capturing essential information, reducing form fatigue. The "Confirm Password" field is a built-in error prevention measure to minimize accidental input mistakes.
A Bit About You: The form is broken down into chunks, enhancing scannability and reducing perceived effort. The unit toggle (lbs/kg) adapts to user preferences, increasing user control and flexibility.
Verification Code: Segmenting the input for each digit allows for easy verification and quick error correction, aligning with best practices in form usability. The "Resend Code" link is a thoughtful contingency plan, ensuring users have options if issues arise with the code.
Verification Success: Positive feedback is reinforced with a clear "Success!" message and a checkmark icon, providing users with emotional validation and a sense of accomplishment.
Login: The login screen adopts a minimalist design, ensuring cognitive load remains low by displaying only essential elements. The high-contrast, affordant green "Log In" button enhances visual hierarchy and reinforces the primary call-to-action (CTA). Supporting actions like "Forgot Password" and "Sign Up" are positioned with lower visual weight, maintaining discoverability without detracting from the main flow. The use of SSO options like Google and Facebook supports alternative login paths, enhancing usability and reducing barriers to entry.
Sign Up: This screen uses progressive disclosure by only capturing essential information, reducing form fatigue. The "Confirm Password" field is a built-in error prevention measure to minimize accidental input mistakes.
A Bit About You: The form is broken down into chunks, enhancing scannability and reducing perceived effort. The unit toggle (lbs/kg) adapts to user preferences, increasing user control and flexibility.
Verification Code: Segmenting the input for each digit allows for easy verification and quick error correction, aligning with best practices in form usability. The "Resend Code" link is a thoughtful contingency plan, ensuring users have options if issues arise with the code.
Verification Success: Positive feedback is reinforced with a clear "Success!" message and a checkmark icon, providing users with emotional validation and a sense of accomplishment.
Home
Home
SOS Button: Placing the SOS button in the top right corner ensures it’s visible yet not overly intrusive. This decision balances accessibility for emergencies without making it the focal point, to avoid adding stress for users unless they need it.
Features Grid: The choice to display the tools in a grid format keeps the home screen organized and minimizes cognitive load. Each tool has a clear, distinct icon, allowing users to quickly recognize each function. The simplicity of the grid structure also makes it easier for users to locate specific features without needing to scroll.
Upcoming Reminders: Presenting upcoming activities directly on the home screen supports users in staying organized with their wellness routines. By including a “Log Details” button, users can record their progress or make changes effortlessly, promoting regular engagement with their plans and support activities.
Bottom Navigation Bar: The icons chosen for the bottom navbar follow standard conventions for “Home”, “Calendar”, “Community”, and “Settings” sections, making navigation more intuitive. This design choice leverages familiar icons to reduce learning time for new users, aligning with usability principles.
SOS Button: Placing the SOS button in the top right corner ensures it’s visible yet not overly intrusive. This decision balances accessibility for emergencies without making it the focal point, to avoid adding stress for users unless they need it.
Features Grid: The choice to display the tools in a grid format keeps the home screen organized and minimizes cognitive load. Each tool has a clear, distinct icon, allowing users to quickly recognize each function. The simplicity of the grid structure also makes it easier for users to locate specific features without needing to scroll.
Upcoming Reminders: Presenting upcoming activities directly on the home screen supports users in staying organized with their wellness routines. By including a “Log Details” button, users can record their progress or make changes effortlessly, promoting regular engagement with their plans and support activities.
Bottom Navigation Bar: The icons chosen for the bottom navbar follow standard conventions for “Home”, “Calendar”, “Community”, and “Settings” sections, making navigation more intuitive. This design choice leverages familiar icons to reduce learning time for new users, aligning with usability principles.
Nutritionist
Nutritionist
Search & Filter: The search functionality allows users to quickly locate a specific nutritionist by name, while filters can help narrow down results by rating or other criteria. This decision simplifies the experience for users with specific preferences.
Profile Cards: Each nutritionist is presented with a small card that includes their photo, rating, and reviews. These cards allow users to get an overview and make comparisons without needing to open each profile. This compact, card-based approach saves time and streamlines the decision-making process.
Profile Information: Key metrics like experience, number of treatments, and star rating are displayed prominently to help users quickly assess the nutritionist’s expertise. This decision supports users in making confident choices without needing to scroll or search further.
Calendar Layout: A calendar view allows users to see a broad view of available days at a glance, making it easy to choose an appointment date. This design choice avoids the need to scroll through multiple options, enhancing efficiency.
Time Slot Selection: Time slots are displayed in individual buttons, with unavailable slots grayed out, making it clear which times are open. This intuitive design helps reduce decision fatigue.
Optional Note Section: Adding a “Note” section encourages users to prepare for their appointment by specifying topics or concerns they want to address. This feature not only personalizes the experience but also enhances communication between users and professionals.
Search & Filter: The search functionality allows users to quickly locate a specific nutritionist by name, while filters can help narrow down results by rating or other criteria. This decision simplifies the experience for users with specific preferences.
Profile Cards: Each nutritionist is presented with a small card that includes their photo, rating, and reviews. These cards allow users to get an overview and make comparisons without needing to open each profile. This compact, card-based approach saves time and streamlines the decision-making process.
Profile Information: Key metrics like experience, number of treatments, and star rating are displayed prominently to help users quickly assess the nutritionist’s expertise. This decision supports users in making confident choices without needing to scroll or search further.
Calendar Layout: A calendar view allows users to see a broad view of available days at a glance, making it easy to choose an appointment date. This design choice avoids the need to scroll through multiple options, enhancing efficiency.
Time Slot Selection: Time slots are displayed in individual buttons, with unavailable slots grayed out, making it clear which times are open. This intuitive design helps reduce decision fatigue.
Optional Note Section: Adding a “Note” section encourages users to prepare for their appointment by specifying topics or concerns they want to address. This feature not only personalizes the experience but also enhances communication between users and professionals.
Diet Plan
Diet Plan
Card Layout: The screen uses a card-based layout to present each diet plan clearly, with images as focal points that create a visually appealing and engaging experience. Each card contains a clear title and a short descriptor that provides quick, scannable information. This approach leverages progressive disclosure, allowing users to get an overview without overwhelming detail.
Search and Filter: The search bar at the top of the screen enables users to quickly find specific diet plans, adhering to usability heuristics for searchability. The filter icon beside the search bar provides additional customization options, supporting user control and flexibility by allowing users to tailor their browsing experience.
New Plan Button: The “New Plan” button is distinct, with a green floating action button (FAB) positioned at the bottom right of the last card, which encourages users to create a personalized diet plan. The button’s design follows Fitts's Law for easy tapping and ensures the CTA is visually prominent without disrupting the overall layout.
Card Layout: The screen uses a card-based layout to present each diet plan clearly, with images as focal points that create a visually appealing and engaging experience. Each card contains a clear title and a short descriptor that provides quick, scannable information. This approach leverages progressive disclosure, allowing users to get an overview without overwhelming detail.
Search and Filter: The search bar at the top of the screen enables users to quickly find specific diet plans, adhering to usability heuristics for searchability. The filter icon beside the search bar provides additional customization options, supporting user control and flexibility by allowing users to tailor their browsing experience.
New Plan Button: The “New Plan” button is distinct, with a green floating action button (FAB) positioned at the bottom right of the last card, which encourages users to create a personalized diet plan. The button’s design follows Fitts's Law for easy tapping and ensures the CTA is visually prominent without disrupting the overall layout.
Workout Plan
Workout Plan
Placeholder Text: “Write a brief description of what you want to achieve…” encourages users to add personal goals, promoting user engagement and customization, which is vital for fitness apps.
Workout Builder: The layout for exercise details per day is organized in collapsible sections, optimizing information hierarchy and preventing overwhelming the user with too many details at once. The option to “copy workout from another week” introduces efficiency and task repetition reduction, catering to users who may follow similar routines across weeks.
Card Layout: The card-based layout with visually engaging images helps differentiate each workout plan, using visual hierarchy to create an easy-to-scan list. Each card includes key details like weekly frequency, which provides quick context without requiring further clicks.
Placeholder Text: “Write a brief description of what you want to achieve…” encourages users to add personal goals, promoting user engagement and customization, which is vital for fitness apps.
Workout Builder: The layout for exercise details per day is organized in collapsible sections, optimizing information hierarchy and preventing overwhelming the user with too many details at once. The option to “copy workout from another week” introduces efficiency and task repetition reduction, catering to users who may follow similar routines across weeks.
Card Layout: The card-based layout with visually engaging images helps differentiate each workout plan, using visual hierarchy to create an easy-to-scan list. Each card includes key details like weekly frequency, which provides quick context without requiring further clicks.
Therapist
Therapist
Sectioned Layout: This screen divides appointments into "Upcoming" and "Past Appointments" sections, following information grouping principles that allow users to quickly locate relevant information. This visual segmentation improves scannability and reduces cognitive load.
Status Indicators: The "Join Now," "Attended," and "Did Not Join" status tags provide immediate feedback on the appointment status, enhancing clarity and actionability. The "Join Now" button is emphasized with a green outline, signaling interactivity and drawing attention as a call-to-action (CTA) for the upcoming appointment.
Highlighted Next Appointment: The top card featuring the next scheduled appointment creates a hierarchical visual cue that highlights the most immediate action item. This design reinforces priority-based navigation, drawing attention to the upcoming session.
Direct Access Buttons: The green arrow buttons at the end of each therapist card provide a clear path for further action, adhering to affordance principles. These buttons allow users to easily navigate to the therapist’s detailed profile, keeping interactions simple and intuitive.
Sectioned Layout: This screen divides appointments into "Upcoming" and "Past Appointments" sections, following information grouping principles that allow users to quickly locate relevant information. This visual segmentation improves scannability and reduces cognitive load.
Status Indicators: The "Join Now," "Attended," and "Did Not Join" status tags provide immediate feedback on the appointment status, enhancing clarity and actionability. The "Join Now" button is emphasized with a green outline, signaling interactivity and drawing attention as a call-to-action (CTA) for the upcoming appointment.
Highlighted Next Appointment: The top card featuring the next scheduled appointment creates a hierarchical visual cue that highlights the most immediate action item. This design reinforces priority-based navigation, drawing attention to the upcoming session.
Direct Access Buttons: The green arrow buttons at the end of each therapist card provide a clear path for further action, adhering to affordance principles. These buttons allow users to easily navigate to the therapist’s detailed profile, keeping interactions simple and intuitive.
Questionnaire
Questionnaire
Sectioned Layout: The screen divides questionnaires into “Favourites” and “Recommended” sections, which follows content categorization best practices. This structure helps users quickly locate tests they’ve previously marked or those suggested for them, reducing cognitive load and enhancing information findability.
CTA Buttons: Each questionnaire card includes a prominent "Take Test" button in green, following visual hierarchy principles to indicate interactivity. The green button is consistent with the overall design language, creating a clear affordance and guiding users effortlessly toward the action.
Favorite Icon: The heart icon on each card allows users to mark tests as favorites, supporting user personalization and engagement. This feature encourages users to save tests that resonate with them, enhancing usability by giving easy access to preferred items.
Sectioned Layout: The screen divides questionnaires into “Favourites” and “Recommended” sections, which follows content categorization best practices. This structure helps users quickly locate tests they’ve previously marked or those suggested for them, reducing cognitive load and enhancing information findability.
CTA Buttons: Each questionnaire card includes a prominent "Take Test" button in green, following visual hierarchy principles to indicate interactivity. The green button is consistent with the overall design language, creating a clear affordance and guiding users effortlessly toward the action.
Favorite Icon: The heart icon on each card allows users to mark tests as favorites, supporting user personalization and engagement. This feature encourages users to save tests that resonate with them, enhancing usability by giving easy access to preferred items.
Support Group
Support Group
Primary Action Button: The green “Join Support Group” button uses high affordance and stands out against the background, encouraging new users to join with a clear, actionable CTA. This design aligns with conversion-centered design principles by drawing attention to the primary action.
Post and Reactions Layout: Each post includes the user’s profile picture, timestamp, and reactions, following social proof practices. This design mimics familiar social media interfaces, which promote intuitive usability by leveraging users’ existing mental models for interaction.
Engagement Indicators: Reactions are displayed with icons and counts, adding interactivity and fostering a sense of community within the group. The placement of these icons below each post enhances visual flow and makes it easy for users to engage with content.
Post of the Day: Featuring a “Post of the Day” at the bottom of the screen is a great way to highlight positive content and maintain user engagement. The expandable “see more” text helps
manage content density, allowing users to read more if interested without cluttering the screen.
New Group CTA: The floating action button (FAB) for creating a new group is positioned at the bottom right, consistent with other screens in the app. This persistent CTA allows users to easily start a new group, enhancing user empowerment and control.
Primary Action Button: The green “Join Support Group” button uses high affordance and stands out against the background, encouraging new users to join with a clear, actionable CTA. This design aligns with conversion-centered design principles by drawing attention to the primary action.
Post and Reactions Layout: Each post includes the user’s profile picture, timestamp, and reactions, following social proof practices. This design mimics familiar social media interfaces, which promote intuitive usability by leveraging users’ existing mental models for interaction.
Engagement Indicators: Reactions are displayed with icons and counts, adding interactivity and fostering a sense of community within the group. The placement of these icons below each post enhances visual flow and makes it easy for users to engage with content.
Post of the Day: Featuring a “Post of the Day” at the bottom of the screen is a great way to highlight positive content and maintain user engagement. The expandable “see more” text helps
manage content density, allowing users to read more if interested without cluttering the screen.
New Group CTA: The floating action button (FAB) for creating a new group is positioned at the bottom right, consistent with other screens in the app. This persistent CTA allows users to easily start a new group, enhancing user empowerment and control.
Calendar
Calendar
Clean and Simple Layout: The calendar screen adopts a minimalist design, focusing solely on essential elements like the date grid, selected date, and events. This approach minimizes cognitive load and enhances usability by presenting a clear and uncluttered interface, allowing users to focus on their daily schedule.
Event List: Events are displayed as a simple list below the calendar grid for the selected date. This vertical, chronologically ordered list makes it easy to read and follow the day’s schedule. The use of whitespace between events improves scannability and reduces visual clutter, creating a comfortable reading experience.
Navigation Arrows: Arrows on either side of the month allow users to navigate between months intuitively, following affordance principles. This navigation method keeps the interaction familiar for users and enables quick access to future or past dates.
Clean and Simple Layout: The calendar screen adopts a minimalist design, focusing solely on essential elements like the date grid, selected date, and events. This approach minimizes cognitive load and enhances usability by presenting a clear and uncluttered interface, allowing users to focus on their daily schedule.
Event List: Events are displayed as a simple list below the calendar grid for the selected date. This vertical, chronologically ordered list makes it easy to read and follow the day’s schedule. The use of whitespace between events improves scannability and reduces visual clutter, creating a comfortable reading experience.
Navigation Arrows: Arrows on either side of the month allow users to navigate between months intuitively, following affordance principles. This navigation method keeps the interaction familiar for users and enables quick access to future or past dates.
Community
Community
Feed Layout: The Community screen adopts a social feed layout, similar to popular social media platforms, enhancing intuitive usability by leveraging familiar design patterns. This layout allows users to scroll through posts, making it easy to read and engage with community content.
Input Prompt: At the top, there’s a text input field with the prompt “What’s on your mind?” encouraging users to share their thoughts. This engagement prompt reduces friction for user interaction by inviting them to participate in the community directly. The small profile picture and camera icon within the input field provide contextual cues for personalizing posts with images.
Media Integration: Posts can include images, enhancing content richness and providing visual engagement. This feature allows users to share workout photos or other visuals, fostering a sense of connection and making the community more vibrant and interactive.
Feed Layout: The Community screen adopts a social feed layout, similar to popular social media platforms, enhancing intuitive usability by leveraging familiar design patterns. This layout allows users to scroll through posts, making it easy to read and engage with community content.
Input Prompt: At the top, there’s a text input field with the prompt “What’s on your mind?” encouraging users to share their thoughts. This engagement prompt reduces friction for user interaction by inviting them to participate in the community directly. The small profile picture and camera icon within the input field provide contextual cues for personalizing posts with images.
Media Integration: Posts can include images, enhancing content richness and providing visual engagement. This feature allows users to share workout photos or other visuals, fostering a sense of connection and making the community more vibrant and interactive.
Settings
Settings
Sectioned Layout: The settings options are organized into distinct sections: “Account,” “About,” and “Actions.” This grouped layout helps users quickly locate related items, reducing cognitive load and improving scannability. By organizing items into categories, the design follows mental model principles, matching users' expectations of where to find each setting.
Use of Icons: Each setting option is accompanied by an icon that visually represents its function (e.g., a lock for Security, a profile icon for Edit Profile). These icons aid in recognition over recall by providing visual cues, making it easier for users to identify settings at a glance.
Minimalist Design: The flat design style with muted colors and clean lines aligns with aesthetic minimalism, focusing users’ attention on content without distractions. This choice reinforces clarity and usability, keeping the interface simple and approachable.
Sectioned Layout: The settings options are organized into distinct sections: “Account,” “About,” and “Actions.” This grouped layout helps users quickly locate related items, reducing cognitive load and improving scannability. By organizing items into categories, the design follows mental model principles, matching users' expectations of where to find each setting.
Use of Icons: Each setting option is accompanied by an icon that visually represents its function (e.g., a lock for Security, a profile icon for Edit Profile). These icons aid in recognition over recall by providing visual cues, making it easier for users to identify settings at a glance.
Minimalist Design: The flat design style with muted colors and clean lines aligns with aesthetic minimalism, focusing users’ attention on content without distractions. This choice reinforces clarity and usability, keeping the interface simple and approachable.
