Dona

An e-commerce solution for an ever-growing business.
Dona website screens showing both the desktop and mobile version.
Client
Dona
Company
CRP Mango
Timeframe
2021 - 2022

About the project

Dona started as an e-commerce store in 2020, targeting disposable products for small businesses. As the company grew both in size and revenue, it has broadened its horizon to a much wider variety of products, becoming an attractive alternative for business owners and day-to-day consumers, turning into a complete retailing store. Nowadays, it offers goods ranging from cleaning supplies to baby products.

Dona and CRP Mango have worked together ever since the beginning, designing and maintaining the e-commerce and taking care of most of the digital marketing strategies for the business. We’ve developed a strong brand that competes with some of the biggest retail stores in the Brazilian market and has passed the 500k monthly revenue mark in just two years.

Challenge

Along with the company’s growth, the store’s target and direction have changed since the release of the first version of the website. The number of categories had grown exponentially, as well as the number of products available on the platform.

The clients started to feel confused with the ever-increasing product catalogue and couldn’t find what they were looking for with ease — soaring the website’s bounce rate.

On top of that, Dona wanted to add new functionalities to the website, like implementing recurring orders and wishlist.

Process overview
Double diamond process: explore & define followed by ideation & deliver.

My roles in the project

I was the sole designer involved with the entire website redesign, tackling the UX/UI of the website and dealing with the handoff to the dev team. After we shipped the major redesign, I remained one of the design leads for posterior improvements and maintenance of the e-commerce.

An in-depth list of roles/tasks:

Explore

To better understand the main issues with the store, we went through some of the website’s primary data, such as both bounce and retention rates.

We compiled feedback from Dona’s customer support team, which pointed us that users couldn’t find critical information on the product page, such as the price and attributes.

On top of that, customers couldn’t find the products they were looking for by browsing through the category tab.

user complaint

“The price is not clear on the product page.”

user complaint

“The shipping calculation is not working correctly.”

Dona’s request

“Implement subscription-based system/recurrent orders.”

user complaint

“User can’t find desired product through the menu navigation.”

Given the strict timeframe for the redesign, we had to synthesise the research stage, conducting everything in-house through theoretical analysis and personal experience. We focused on running UX benchmarking based on the most popular retailing e-commerce stores in Brazil, specifically the ones that would match their business user personas. We then re-evaluate the entire website architecture, investigating the areas in the customer journey. Some of the pain points observed were:

Menu takes too much space on smaller screens.Overlapping/hidden items. Mobile menu doesn't support large quantities of categories.The product image is small in comparison to the textual information. Overwhelming number of CTA; navigation isn't clear.Poor hierarchy of information, leading to cognitive overload.

Ideation

The ideation process started on paper with low-fidelity prototypes to quickly test and visualise new ideas and solutions addressing the previously stated main issues. The solutions that proved to be the most effective were then elaborated to high-fidelity prototypes. The prototypes had a responsive design approach in mind, tackling the two main variations: mobile and desktop.

We presented the prototypes to the stakeholders and came into several iterations until both parts were confident with the new design.

Low-fidelity wireframes.First screens designed for the website, before all the iterations.

Deliver

It was then time to hand off the design to the development team, documenting and taking notes of each feature to allow more assertive communication with the development team.

The first stage of the website redesign officially shipped in late 2021. Since launch, we’ve been iterating on the go and gradually enhancing the experience with user feedback.

The website redesign took a significant step toward increasing its monthly revenue growth, nearly doubling within a year.

Homepage

01. Mega menu

We replaced the horizontal menu with a vertical mega menu to better organise the categories and subcategories of the store. It improves the visual hierarchy and overall experience, especially in the collections with several subcollections.

02. Additional banner section

Given the wide variety of products Dona has to offer, we proposed a new banner sections on the homepage, other than the main banner at the very top.

03. Departments

Lastly, we added a new section showing all the different categories with an image representation of the products. This way, the user can know and predict the type of goods they’ll find in each category, not just relying on its name.

Product Page + Checkout

01. Primary information visible at all times

Some PDP could get lenghty with long descriptions and reviews, which ofuscated the main action of the page: buying the actual product. To minimaze this issue, we kept the CTA visible at all times inside the page to improve the CTR.

02. Hierarchy

We changed the ordering of the information based on what the users consider most relevant to them.

03. Price visible and clear

Dona offers a wide variety of paying options, such as instalments and instand QR code transactions. Some of these methods have a fixed discount that should be displayed on the page. Therefore, it was paramount to show display those informations in a transparent manner.

Mockup displaying the blog layout on desktop. Mockup showing the blog and newsletter section on mobile.
Mockup displaying the gift list page on mobile. Mockup displaying the influencer page on mobile. Mockup displaying the wishlist page on mobile.

What I’ve learned

One of my most significant takeaways from this project was managing the stakeholder’s expectations and meeting the end-user goals and concerns.

The entire process would’ve been more assertive if we had time (and budget) for user testing before implementing all the features.

Collecting more usability data would also have helped guiding some of the design decisions made throughout the process since we’d have a solid argument to base on and not rely so heavily on theoretical analysis.