E-Commerce Redesign

5 minute read

The problem to solve.

Imagine an E-commerce platform driven by a powerful mission:

To promote sustainability and social responsibility, all while spotlighting the work of independent makers.

Yet, there was a catch - the existing website, built on a marketplace builder, held back the full realization of Cause-Cart's noble mission.

As a team, we completed 3 design sprints over 3 three weeks to deliver:

The methods used.

  • Competitive Analysis

  • Heuristic Analysis

  • User Flow Diagram

  • Information Architecture

  • Brand and style guide

  • Interactive prototype

  • Annotated Wireframes

My roles and responsibilities

UX Researcher

  • Conducted competitive analysis

  • Directed storytelling interviews

  • Synthesized data

UX Designer

  • Redesigned

    • home page

    • makers page

    • product page

User Insights

Users found the current site friendly and relaxing, which is a positive foundation to build upon.

However, users struggled to identify the specific cause their purchase supported, indicating a need for clarity.

Additionally, we found that:

Online Shoppers prefer:

  • Being able to shop by values

  • Visually appealing and easy-to-navigate websites

  • Shopping for vintage and used items

  • Shopping for a cause and supporting smaller businesses

  • Email notifications for restocked items

  • Ability to "favorite" items without adding to cart

  • More variety of items and causes

  • Good product information and photos

  • Ability to browse by category

  • Supporting a cause through purchases

Online Shoppers dislike:

  • Busy and confusing website designs

  • Websites that reset to the beginning after scrolling

  • Annoying "you might like" features

  • Inconsistent product description pages (PDPs)

  • Lack of information on causes supported by vendors

  • Difficulty finding information on vendors and causes

  • Lack of personalization on PDPs

  • Confusing offer/bid features

  • Poor customer service experiences

  • Mobile websites with glitches or slow delivery.

We began with empathy, putting ourselves in the users' shoes.

Next, we conducted a competitive analysis to understand how other value-based websites effectively communicated their causes.

Checking out the competition:

During our research, we found that avid online shoppers confessed to frequenting Amazon, albeit reluctantly.

The convenience of Amazon is undeniable, but the guilt associated with it prevails.

We looked at other e-commerce sites that gave back, donated, or supported various causes.

We also studied the mammoth of Amazon to find out how to make Cause Cart stand out.

Our suggestions from research were:

  • Enhanced User Experience

  • Expansive Cause Library

  • Personalized Cause Recommendations

  • Engaging Content

  • Social Sharing

  • Transparency and Accountability

  • Interactive Features

  • Loyalty and Rewards Program

  • Cause-Specific Merchandise

  • Partnerships and Collaborations

  • Local and Global Reach

  • Mobile App Development

How is the site doing currently?

To pinpoint the most critical areas for improvement, we conducted usability testing of the current site.

Users consistently encountered challenges in the following areas:

Product Info:

  • Users had to dig deep to find it.

Cause Information:

  • It was buried within product details.

Maker Information:

  • The inconsistent display made it difficult to learn more about makers and their causes.

Category Confusion:

  • Users found it challenging to understand the categories and subcategories, which we would call filters.

User’s Expectations:

To create a stellar online shopping experience, we also asked users about their expectations:

Reliance on Reviews:

Users valued reviews with cellphone photos, especially when they saw others had purchased and were satisfied.

Transparent Shipping Information:

Knowing delivery dates was crucial for their purchase decisions.

Cause Clarity:

Users wanted more information on how each purchase supported the cause, seeking proof beyond claims.

Redesign Highlights:

Our redesign focused on addressing these challenges:

Homepage:

We brought cause information to the middle, making it visually striking while keeping products at the top.

Maker Pages:

Dedicated pages offer detailed information about makers and the causes they support.

Product Cards:

We included icons for quick cause identification.

Product Descriptions:

We reorganized information for easy scanning.

User Testing

We did usability tests of

  • The current site

  • Our mid-fidelity prototype

  • Our high-fidelity prototype

Task 1: Using this site, how might you find out more information about the elephant?

While users were able to easily find more information, they commented that it could be laid out better.

Task 2: Now that you have selected an item, how might you find more information about the cause it supports?

Our first prototype didn’t improve the findability and in one case, lowered the findability. Back to the wireframes.

Task 3: How might you find information about makers and the causes they support?

This was our best success in improving usability scores in each iteration. By Version 3, we got perfect scores from 3 of 3 participants.

High-Fidelity Designs

Homepage

  1. Navigation: The homepage offers straightforward navigation options, such as returning to the homepage, accessing the cart, or exploring the user's account.

  2. Account Dropdown: The account dropdown menu provides different options for logged-in and logged-out users, ensuring a personalized experience.

  3. Shop Dropdown: Users can choose to shop by product or by cause, reflecting Cause Cart's unique mission of supporting environmental and social causes through purchases.

  4. Impact Menu: The impact menu provides quick access to information about causes, vendors, the company's mission, and sustainable practices.

  5. Banner: The "Shop with a purpose" banner conveys the core mission of Cause Cart, emphasizing its differentiation from other e-commerce platforms.

  6. "Read More" Button: Users can learn more about the causes supported by makers, highlighting the social and environmental impact of their purchases.

  7. Shop by Product: Users can filter products by category, including Home Goods, Beauty, Jewelry, Toys, or view all products.

  8. "What Matters" Banner: This banner encourages users to shop according to their values, emphasizing the importance of social and environmental causes.

  9. Shop by Cause: Users can explore products related to specific causes, such as "Life on Land," "Responsible Production," "Gender Equality," and "Peace and Justice."

  10. Free Shipping: Users can access information about Cause Cart's free shipping and sustainable shipping practices.

Individual Product Page

  1. Cause Banner: Clearly identifies the cause supported by the product and maker, enhancing transparency.

  2. Product Photos: Multiple views of the product with hover and click functionality for enlarged and detailed images.

  3. Product Details: Provides essential product information, and a "more" option for in-depth details in a pop-up.

  4. Add to Wishlist: Lets users add the product to their wishlist for future reference.

  5. Product Name: Displays the name of the product.

  6. The Specific Charity: Shows the chosen charity, with an option to read more details in a pop-up.

  7. Reviews: Displays the aggregate rating and allows users to read customer reviews and view photos.

  8. Maker Name: Links to the maker's details further down the page.

  9. Product Description: Offers a comprehensive product description, charity information, and a mini maker bio.

  10. More From Seller: Allows users to explore the maker's storefront for more products and related causes.

  11. Product Price Card: Essential product information including price, return policy, stock, quantity, and an "Add to Cart" option.

  12. Add to Cart: Adds the product to the user's cart for purchase.

  13. Buy Now: Directs users to the payment checkout experience without using the cart.

  14. Accepted Payments: Shows accepted payment methods through icons.

  15. Related Products: Offers similar products by the same maker.

  16. Products Related by Cause: Allows users to explore products supporting the same cause through a carousel.

  17. Customer Reviews: Provides valuable insights and trust through customer feedback. Users can also upload their own photos in their reviews.

  18. Individual Customer Review: Displays a standard design for customer reviews.

  19. Maker Name: Offers more details about the maker, and users can click to visit the maker's storefront.

  20. Mini Cause Banner: Reinforces the cause supported by the maker.

  21. Maker Mini Bio: Provides a mini biography written by the maker for users to read.

  22. Products by Maker: Allows users to browse more products by the same maker, with identical product cards as on the Filters pages.

  23. More From Seller: A button leading to the maker's storefront, offering access to all available products.

All Makers Page

  1. Hero Banner: Features an image related to causes with prominent headings (H1 and H2) using Montserrat Bold and Raleway Bold fonts.

  2. Introduction: A succinct H2 sentence provides an overview of the page's content.

  3. Vendor/Maker Photo: Displays a vendor or maker photograph in a square or rounded rectangle frame with a radius of 64.

  4. Grid Design: The entire website adheres to a consistent twelve-column grid layout with a 120px margin.

  5. Cause Icon: A non-clickable icon visually communicates the supported cause. It consists of a 120px x 120px white circle with a colored circle and a 100px x 100px icon.

  6. Vendor/Maker Bio: Presents detailed information about the vendor/maker, the cause's name, cause partner, and vendor/maker details. It follows a structured typography format using Montserrat and Raleway fonts. The background is a 626x626 square with a 64px radius, filled with Hex Code FCE1D6 at 100% opacity and features an inner shadow.

  7. "Shop Their Products" Button: This button directs users to the Vendor Storefront for the specific vendor. It has centered text using Raleway Bold, specific dimensions (195px wide and 36px high), and a distinct color scheme with a drop shadow.

  8. "Shop Their Cause" Button: This button takes users to the shop by cause page associated with the cause. It follows the same design conventions as the "Shop Their Products" button, ensuring visual consistency.

These challenges guide our path forward:

  1. Balancing Product and Cause Shopping: Users' uncertainty about shopping by cause required us to find a balance.

  2. Prominence of Cause Information: Despite multiple attempts, cause information on product pages remains a challenge.

  3. Bias in Testing: We acknowledged potential bias in our testing and are committed to testing with a more diverse user base.

    Many users were friends with our client which we believe led them to answer more positively than if they had not.

Our journey doesn't end here. Our next steps include:

  1. Mobile-Responsive Design: Ensuring a seamless shopping experience on mobile devices.

  2. Improved Navigation: Adding breadcrumbs to enhance user orientation.

  3. Emphasizing Sustainability: Recommending renewable energy-powered web hosting and eco-friendly design practices to align with Cause Cart's mission.