This project was divided into several stages, from conducting a questionnaire with Benjamim to usability tests with potential users. Some of these steps occurred simultaneously, others separate because they depended on previous steps.
See below how each of these steps went.
In order to better understand who Benjamim Primores Naturais is, what the client expects from the site and other aspects, we planned an interview, which did not happen due to conflict in schedules. Thinking about solving this small mismatch, we sent a questionnaire to collect the main information we needed for the project and to get to know our client better.
With this research and subsequent contacts we had with Benjamim to clear up the remaining doubts, we found that essential oils are their main product at the moment; that they would like to improve their online sales techniques, as they need a better, accessible, easy-to-view space that gathers price catalogs with usage information and therapeutic benefits. Currently the information is scattered.
Getting to know the customer
We sought inspiration on different websites, from direct competitors, here considered other artisanal producers, such as Flor de Menta, Aflora and VegaLótus; and from indirect competitors, some larger stores that also produce cosmetics, not necessarily natural, such as Avon, B.O.B, Lush and Sallve; and also stores that have nothing to do with the product, but have a nice look and feel, like InboxShoes.
Below there is a board of inspirations that we have put together with some of the pages and photos that we've found in our research.
A proposal that we brought to Benjamim was the redesign of the brand. Before, the logo was formed by four colored benjamins (green, yellow, purple and pink) around a lilac flower.
We seek to bring a more actual and minimalist look to the logo that is more aligned with the proposal of the site.
Our logo proposal can be seen below. In this new logo, we chose to use the most predominant shade of the previous one (purple) and leave only one Benjamin in evidence.
For its creation, we represent some elements that the client would like to be highlighted, such as nature, scent and softness, from a new representation of the bird, lighter and more continuous, we seek to create a clean and elegant look.
In addition to creating the logo, we also created some examples of applying it to the products, which were later used in the products section of the website. See the packages created below.
Based on the style and colors of the new logo, it was possible to start creating a style guide for the website.
Below are the color patterns, typography, buttons and inputs defined for this project.
Defining how the products would be organized on the website was not an easy task. For this, we made a card sorting with some volunteers. They were asked to organize 30 products sold by Benjamim into groups and name them.
In addition, we saw what is most used in the market and also took into account the system currently used by Benjamim.
From all these sources of information, we created the site map, which served as the basis for the following steps.
After defining the site map, we started to think about what the pages would be like, what would be presented in each one of them, setting up a wireframe.
We decided to work on the purchase flow of an essential oil, so we created the wireframe with the main page, essential oils page, product page, shopping cart and all the necessary payment screens. In addition, we saw that it would be necessary to also include a “how to use” page to bring the information that users are missing.
Putting everything in the right place
We did usability tests with four potential users. Despite the small number of tests, we were able to discover a lot of improvements that could be made before creating the high-fidelity prototype.
The tests brought us insights like:
- Include “how to use” in the main menu, previously it was part of aromatherapy
- Add zip code in the shopping cart, so the user knows how much it will be before going to the checkout area
- Changing the button from "buy" to "add to bag" and add the button "see details", we noticed that the user is more comfortable with this approach
- Swap the term “benefits” for “properties”, which is more appropriate in the context
- Add a aware section on the product page, specifying the cares that must be taken with each product
Making the necessary changes and applying the style guide to the wireframe, we arrived at the final result of our project:
a high-fidelity prototype
In the final phase of the project, our biggest challenge was to improve the “How to use” page, because it had a lot of text and we needed to find a way to make this content available without getting tiring. We chose to make the division of the sections clearer and include some photos related to the uses described. Thus, it stopped being a page with only text from beginning to end and started to have a more fluid look.
