Journey
Planning the new version, I used the previous sitemap to illustrate how the new journey is gonna be. We can see that the options were reduced in order to make a better linear navigation, this is the first decision to the solution.
Wireframes
To build the wireframes, I made a list of elements that I'll start to use on the screen here, and some are going to be planned on the Atomic design part.
In the wireframes, I highlighted areas where the design decisions were made in order to solve the problems.
- Green and blue areas: Creating a consistency through the navigation levels. Green: The header component has important options all the time, is where the user will look when they don't find the main content. Blue: The page title and breadcrumbs will help the user locate in the navigation, and give them control.
- These decisions are aligned looking forward to solving the problems of having many steps before land in the buy page and solving several inconsistencies found.
- Red area: Because I decided to have two different product's lists, a consistent card component makes it easier for the user's recognition in the flow.
- Again, here I want to solve inconsistencies in the products exhibition.
- Yellow area: Creating a contextual filter on Product's list pages, giving user's more control over what they see.
◀︎ Previous
[**Next**](<https://henriqueolson.notion.site/Breakpoints-Structure-ec716436579c496799747a71d545c094>) ▶︎