\n work
('Confiança')\n
\n\n \n // Head of Project
\n // UX/UI
\n // Frontend
\n // Magento v1
\n
\n // Head of Project, UX/UI and Frontend
\n // Magento v1\n
\n Less choices,
\n more confidence\n
\n \n Confiança is a supermarket chain operating in several cities within state of São\n Paulo, Brazil. A few years ago they started their first e-commerce, but with the growing need for\n flexibility, the platform needed to be redesigned.\n
\nFive screens of smartphones showing different pages and features of this web delivery application
\n \n \n \n \n \n// Problems
\n- \n
- Slow and poor navigation \n
- extensive purchase flow \n
- difficulty to customize orders \n
- messy mobile \n
// My role
\n\n I was responsible for the project concept and its implementation.
\n Designing views, the frontend between Magento and Vue.js, and setting up the integration API scope for our development team - since Magento v1 did not have an API that would meet the needs of the project.\n
Endless flow
\n\n All the loading was hidden from the user, making navigation completely free from the system's needs, allowing for a much faster and enjoyable experience. The user only sees some loading when there is a problem, otherwise, we never bother the user with processes like checking stock, updating shipping rates or anything \"taken for granted\" on an ideal scenario.
\n The rate of errors or moments when we need to show some important information occurs with less than 10% of the users, and all the others 90% enjoy a hassle free experience.\n
\n One button
\n to rule them all\n
\n\n \n To further increase speed, we needed to narrow the choices. Yes, choices are important, but we don't want to have choose all the time.
\n The easier and simpler the choice, the better our brain will react to it, as we feel less pressured.
\n Thus several \"unnecessary\" choices were incorporated directly into the buy button:\n
- \n
- \n Stock validation
\n You don't need to worry about the stock, it is impossible to buy above stock or any quantity that is not available for that item at that time.
\n The stock system is updated in real time and then it updates all the rules for every item.\n \n - \n Increase or decrease quantity
\n With 1 click you control the quantity, and if the product is sold in increments, this is already calculated automatically.
\n If you type the quantity the system rounds it to a valid number automatically.\n \n - \n You get what you asked for
\n If the price or any other value for that product is affected by the quantity, it is instantaneously updated throughout the whole interface.\n So even if you already have that item in the cart, all the prices and shipping rates you see are exactly the ones you will pay.\n \n - \n It does what it’s supposed to do
\n By clicking the button you add an item to the cart, if you repeat the action you keep adding items. Simple.\n \n
\n This decreases several steps of a normal process such as validating stock after adding an item, warning you after a page reload that this product is only available in increments of 3 and leaving you with the math.
\n And even have a cart page to edit your order is no longer necessary.\n
![\"The](\"@/assets/work/confianca/scroll-desktop.jpg\")
\n ![\"The](\"@/assets/work/confianca/scroll-mobile.jpg\")
\n \n Less walking,
\n more buying\n
\n \n Instead of having fragmented navigation that leads you to navigate the categories, we've chosen to keep the user in the same place, allowing them to do as much as possible.\n
\n\n The search was made to be extremely fast, with a great auto-complete, and at the same time work like any other catalog page.\n
\n\n When you buy an item, you see a few options to continue buying other items you normally purchase together, avoiding the need to search in most cases.\n
\n\n The login, the cart, the shipping, and the discount steps were merged into a single tab and can be viewed and edited at any time without the need to stop buying.\n
\n\n\n Customize on the fly\n
\n\n The users are able to add notes to each item in their order and ask for specific details if they want to. These notes can be edited at any time, at any step before the checkout.\n
\n\n\n Fell like home\n
\n\n I've tried to create an interface that does not contrast with any other interface that a regular smartphone user has not already seen, and thus create a sense of comfort, like knowing what to do and what will happen when clicking something.
\n This feeling is fundamental when you want to take your design out of the way and let the actions take the spotlight.\n
Four screens of smartphones showing different actions of this web delivery application
\n \n \n \n \n