Intro
Cause-Cart is an e-commerce platform with a purpose.
Cause-Cart is an e-commerce platform that supports sustainability, social responsibility, and showcases independent makers and their products.
However, the current website is built on a marketplace builder that isn't flexible enough to execute Cause-Cart's mission.
To address this issue, our team conducted a redesign of the website with a focus on improving the user experience and making it easier for users to understand the cause their purchases support.
In this case study, I'll discuss our process, from research to prototyping, and share our solutions to the challenges we encountered.
Problem
We need to help put the Cause before the Cart.
However, the current site was built on a marketplace builder that isn’t flexible enough to execute Cause Cart’s mission.
Research
Starting with a strong foundation.
To address this, we embarked on a deep dive of e-commerce best practices to give ourselves a strong foundation to help us design an intuitive experience that meets users’ mental models of how online shopping works.
We also conducted a deep dive research on how other value based websites were communicating their causes.
We found that the competition had a separate page just for the causes and included a link to that page in the top navigation.
Additionally, the cause information was often included “above the fold” meaning users didn’t have to scroll or click to find it. If it’s that important, why make users go looking for it?
Findings
Both found and lost.
Through empathy and user testing, we identified several opportunities to improve the current site.
Users found the site to be generally friendly and relaxing, but they had difficulty finding the product information, the cause being supported, and maker information.
In addition, they didn’t entirely understand the categories and subcategories or filters.
Testing 1.2.3.
To address these issues, we conducted a competitive analysis and usability testing.
Solutions
Introduce the Makers and the Causes they support with each purchase.
We also created an all makers page that would provide a brief bio, links to their storefront and products, and the cause they support.
To make it easier for shoppers to find what cause is being supported, we included icons on the product cards.
Finally, to help shoppers find more information about the products and the causes they support, we reorganized the information on the product description page to make it more scannable, emulating traditional e-commerce sites.
Iterations
Test again, try again.
Despite these improvements, users still had to do too much digging to find the info they needed.
Deliverables
Addressing the Client and User Goals.
While the current website was friendly and relaxing, it was still missing that special something.
Since the site is currently built by a marketplace builder that the client knows she won’t be using in the future, we were given the green light to dream and design what we thought would be the best new version of the site.
We wanted to keep the color pallet the client had started off with but wanted to also add a little more hierarchy and design.
An interesting request from the client was that the site could be both relaxing and rebellious. To achieve this we kept the colors pastel but tried to bring in images that felt a bit more rebellious and embraced the positive activism that our client engages in.
We wanted to give cause cart another selling point which was that they could be one of the “cleanest” sites on the internet. One way we could do that was to re-use components as is displayed on the right.
The Mission page tells everyone what Cause Cart is all about. This information used to be just black text on a dark green back ground.
Challenges
The all Causes page was desired by users during testing and addresses a client goal.
You didn’t think it would be that easy did you?
We faced some challenges along the way, such as our client wanting to give people the option to shop by cause, but during our research sessions, users told us they didn’t know what “shopping by cause” would look like, so they all chose to shop by product.
We tried to find a balance of letting users shop by product and cause, which is reflected in our design.
For Next Time
What would we do with more time and resources?
Next, we plan to make our designs mobile-responsive.
The users we spoke with emphasized the importance of transparency, so we will continue to find ways to make the cause information more available to the user.
Additionally, we noticed some bias during testing and would like to continue testing with a wider user base.
Conclusion
Let’s wrap it up. What a journey it’s been.
In conclusion, our redesign of Cause-Cart was informed by empathy and user testing.
We identified opportunities for improvement and created a roadmap for our design process.
Through an iterative process of designing and prototyping, we arrived at a high fidelity design that addresses the concerns of our user group.
“I’m embarrassed to say it but I shop on Amazon most often. It’s just so easy to use.”
-Users
To help Cause Cart celebrate the makers who make a difference, we made an all makers page where shoppers can learn about the makers and the causes they support.
The celebration of impact at the end of the check out process addresses both Client and User goals.
