Olist Store Navigation
Olist store is the main product of olist company. It is where the seller can manage his ads in different marketplaces, control stock and adhere to campaigns. With the growth of the olist store, it became increasingly difficult to maintain the navigation model used through the top menu consistent and scalable. This need for scale gave rise to the discovery initiative on navigation for this product.
context
To start the project, I based myself on the double diamond framework, starting with the understanding of the problem.
To get an overview of what already existed, I mapped the current navigation pattern using a sitemap. It was possible to see the need to deepen pages and flows that were shown in priority for users.
Also, because it was a feature that would impact all contexts, I brought the designers together to gather an understanding of what was already known about the menu. For this, I used the CSD Matrix framework, which consists of writing down the certainties, assumptions and doubts that one has in relation to that subject.
Through this method, we were able to draw the following conclusions:
The current menu was inconsistent and outdated across screens;
The menu was not responsive, making it difficult for users to navigate the site on different devices.
Due to a lack of space, the menu was not scalable, which prevented the addition of new links.
There was a lack of clarity regarding the user profile button and its functionality.
There was no provision to highlight new features, which made it challenging to keep users engaged.
By analyzing the navigation data collected from page events and correlating it with other relevant data points, we were able to identify the pages that required more attention and those that were already optimized. This helped us to focus our efforts on improving the user experience of those pages that needed it the most, thereby ensuring that our navigation system remained effective as the site continued to grow.
generation of alternatives
Bringing together the impacted designers, I conducted an adaptation of the "Crazy 8" framework dynamics to generate alternatives for the new navigation, in a very free way. The generated quick alternatives were useful to expand our possibilities and vote on the layout that best fit within the project requirements.
Afterwards, the alternative and the most appropriate features for the project began to undergo a refinement process, to be put to the test with users.
I conducted 5 moderated usability tests with sellers who were already olist customers, causing some perceived improvements to the final version of the menu.
handoff
Once the final version of the navigation was decided upon, the next step was to refine and prepare it for development. This involved breaking down the interface into its various properties and identifying all possible tracking events and accessibility specifications in detail. By taking these steps, we ensured that the delivery was well-prepared and ready for the development process.
summary
The new navigation is now available to some users and we are closely monitoring its functionality transition through metrics and event tools. While developing the new navigation, we faced the challenge of migrating it due to the code structure at the time. However, we were able to successfully overcome this obstacle by utilizing a micro front-end approach. This allowed us to change the entire product at once, while only needing to address a few minor incidents along the way. Overall, we are thrilled with the progress we've made and are excited to see the positive impact the new navigation will have on our users.