# Restructure App to Use Body Part Icons for Navigation

[SylvieDoumet]

Value proposition

As a user, I want to navigate the home remedies app by selecting body part icons, so that I can easily find remedies for specific body parts and related health issues.

Description

Acceptance criteria

Landing Page Structure:

• [ ] The landing page should display body part icons (e.g., skin, eyes, etc.) underneath a classic search bar.
• [ ] Each body part icon should be clickable, leading to categories of health issues related to that body part.

Category Navigation:

• [ ] Upon selecting a body part icon, the user should see remedy recipes of health issues related to that body part.
• [ ] If a category does not contain any remedies, a message should be displayed indicating that there are no available remedies for that health issue instead of an empty page.

Remedy List:

• [ ] After selecting a specific body part (icon) or tapping a specific search term (in the searchbar), the user should see a list of remedies recipes for that body part or issue. The list view of remedies should include an option to save remedies as favorites and to add new remedies.
• [ ] Within the list of remedies (for skin) the user should be able to filter a specific symptom (acne, dryness, cuts, ...) or to start a new research with the searchbar displayed at the top of the page

Navigation Back to Overview:

• [ ] Users should be able to navigate back to the landing page by a back button or clearing the searchbar.

Tasks

Refactor remedies.json

• [ ] Update the array of objects with categories (corresponding to the body parts of the icons to chose) to handle navigation.

Create navigation-icons folder

• [ ] Create in public a new folder to store 12 body part icon - svgs

Refactor _app.js

• [ ] Update the state management to handle body part selection and search option.

Refactor index.js

• [ ] Modify the rendering logic to display body part icons on the landing page.
• [ ] Update the Navigation Management : Ensure that users can easily navigate using appropriate UI elements (e.g., dropdown menu, searchbar, back buttons).

Create Categories.js

• [ ] Create a navigation component for the body part icons and health issue categories to manage state transitions between the three levels of navigation: body part, specific issue, and remedies list.

[ahohnsen]

Hey there!

Please keep in mind that there might be categories without any remedies. In this case, a message should be displayed instead of an empty page. Please add this to the acceptance criteria. Additionally, the acceptance criteria don’t mention how the user can navigate back to the overview. Please include that as well.

[F-Kirchhoff]

Hey Sylvie, thats an interesting idea and the US looks good so far. But I would like to suggest to implement these body parts buttons as filters for the already existing remedies list. With this solution, a user needs to click 2x until they see any remedy displayed and they cannot browse the entire list as easily. Finding a remedy where the user does not know the body part for can be very tedious if they need to enter and exit every category to see the remedies displayed. With a filter logic, all remedies are displayed by default and the body part icons filter this list accordingly. By this, the user has immediate access to all remedies but can filter the list for relevant elements with 1x click. This is of course only a suggestion, feel free to ignore it. But I believe that the UX might be improved with this alternative approach and you still have these nice UI Icon elements.

[SylvieDoumet]

Thank you for your recommendations.

Your suggestions are worth considering, but most apps about homemade remedies are structured like that. So, if we want to align with what is commonly available on the market, this structure would be appropriate.

For remedies I want to find but don't know the exact body part icon for, we have a full-text search option as a second approach.