Redesign of the branding and goals of the DuLocal application.
We had a big challenge here, DuLocal is a startup selling organic food that works in São Paulo, which in the beginning of the second half of 2019, started to sell dishes plans to its customers as a way to build loyalty.
The original idea is quite simple: you can buy a plan containing a fixed amount of plates for a lower price than single plates, which can be eaten over a 30-day period. However, the company's application does not directly refer to the existence of these plans on its homepage, making accessing them much more complicated. The goal of our team was to combine the new visual identity developed for the app with practical visualization solutions for the products being sold (plans and single plates).
First, we set up a team of designer, product owner, and content developer to think about how we can apply these points to maintain the base structure of the app as it is today so that old customers don't have problems with make purchases, but something more straightforward and practical for all users, where all products were on display on the home screen in a fluid and consistent way.
In the old design of the app, the homepage consisted of a header where you could login, a bar that asked for your address to check if the service is served, and a list of dishes with name, photo and delivery date.
To access the plan area, you had to login, enter the application menu and access the Plan area, which is a very long flow just to search for a product!
For the new design, we thought we could still use the header as the main navigation feature for login / registration and to verify delivery information, just by changing its look to the new identity.
The main problem was the availability of information regarding the dishes. The approach chosen to solve the problem was to turn the plate list into a horizontal carousel, where plates could slide on the user's screen and space would be left to add to the available plans.
With this idea, we made the first prototype adaptation to verify how the information could be arranged on the screen with this layout.
Without changing the elements of visual identity, we saw that the use of carousels could be a great solution to the problem at hand, as we would be giving proper view to the plates and also the plans, all on the app's home screen.
Next, we would like to know what this layout would look like by joining the new branding developed for the app, which resulted in the following mockup:
Shortly after the construction of this mockup, some more interesting questions arose about the arrangement of the elements and the product in general:
- What is the main product sold, the dishes or the plans?
- How can we create prominence among these elements, knowing that the sale of plans ensures us greater adherence to the items that will be sold in the month?
- How can design make it easier to use the app so that both old and new users can make full use of features?
- How can we create prominence among these elements, knowing that the sale of plans ensures us greater adherence to the items that will be sold in the month?
- How can design make it easier to use the app so that both old and new users can make full use of features?
Thinking about these questions, we decided to develop a 5-second test focused on these questions, ie a double test:
- We are looking for a considerable number of people who could take the test, whether they know the app or not
- We divided these people into two groups at random
- One group performed the test with the new screen with the following information layout: single plates first and plans below. While the other group performed the test with the opposite arrangement (plans first and dishes next)
- After viewing the screen for 5 seconds, we subjected users to a group of questions that made us identify which elements caught the users' attention, and how much they understood what the page they were viewing was about.
- We are looking for a considerable number of people who could take the test, whether they know the app or not
- We divided these people into two groups at random
- One group performed the test with the new screen with the following information layout: single plates first and plans below. While the other group performed the test with the opposite arrangement (plans first and dishes next)
- After viewing the screen for 5 seconds, we subjected users to a group of questions that made us identify which elements caught the users' attention, and how much they understood what the page they were viewing was about.
After applying the test and ascertaining the results, it was clear that users exposed to the "dishes / plans" screen had a better understanding of the information displayed and what actions would be taken to follow purchase flows.
With this validation in hand, we decided to follow the design of the other screens of the application, always seeking to improve the way we inform the user of what is happening and making it clearer when something unexpected happens.
