Enhancing the UX/UI for Charitable eCommerce

Bren from SaaS Designer
July 3, 2024

Welcome to SaaS Before & After!

This is a mini-series in which I redesign the UX/UI of single screens. These redesigns are not meant to be comprehensive, as I spend limited time on each one (usually under an hour each).

Instead, they focus on ‘quick wins’ – small changes that can make a significant impact.

For many of these redesigns, I’m focusing on improving minor aesthetics and UI elements.

Please note that a full redesign project often requires in-depth research and a deeper understanding of the underlying problems.

These quick redesigns are meant to showcase potential improvements rather than provide complete solutions.

Client names have been redacted in order to protect the privacy of the clients.

Prior to my quick redesign, GiveBackStore lacked any substantial UX or UI elements. The platform was in its most basic form, essentially starting from scratch with a bare-bones interface that offered minimal user engagement or visual appeal.

I focused on transforming the “products” and “checkout” pages to enhance user experience and drive engagement.

To create a more inviting atmosphere, I utilized a calming color palette of cream and off-white tones.

I updated the hero typography and established a clear hierarchy on the product catalog, making it easier for users to navigate and find what they need.

For the checkout page, I implemented a complete rework, adopting a 2-column layout that streamlined the process. This included adding clear affordances to the fields and reducing friction for users when filling out billing and shipping details, resulting in a more intuitive and efficient checkout experience.

Product Overview

GiveBackStore is an eCommerce platform designed to facilitate fundraising by selling basic household items. The proceeds from these sales are directed towards providing essential resources like water and food to underserved communities.

Before
After
Before
After

Summary

The enhanced product and checkout pages not only improved the overall user experience but also increased the likelihood of successful transactions, thereby boosting the store’s ability to provide for disadvantaged communities.