Making e-commerce more green.

Image alt tag


In a 24-hour industry project, our interdisciplinary team of software engineers, data scientists, and UX designers collaborated to tackle challenges in clean energy and eco-friendly systems during my BrainStation UX Design Bootcamp.


The Challenge

Develop a digital solution to amplify eco-friendly systems and bolster societal impact in clean energy.

From the broad task given, we narrowed the scope:

People who want to buy green products but find it tricky to know which ones to trust and pick.


Guide users to eco-products on the vendor's site.

Our Solution

Recognizing a barrier for eco-shoppers, we constructed a full-stack web portal.

This comprehensive tool not only ranks products on their eco-friendliness but also builds trust, making green choices more accessible.

Image alt tag


  • Whiteboard

  • Figma

  • Google Suite

  • Photoshop

  • Slack / Discord

Image alt tag


  • 2 UX designers

  • 1 Data Scientist

  • 3 Software Developers

Image alt tag

My Role

  • Product Manager

  • UX design

  • UX research

  • Pitch Deck

Image alt tag


  • 24 hours


The Result

We won first place in competition with 5 other teams earning a free BrainStation course.

The Pitch
24 Hours Before

Meeting the Team

In the hours leading up to the 24-hour challenge, I took the helm on the UX side, steering our newly formed team, a mix of data science and software engineering talents, through preliminary meetings.

This step was vital, allowing me to gauge our collective strengths and establish a roadmap for the impending intensive project day, all while aligning our efforts with the double diamond process model.


I create the double diamond model for all of the teams to focus on alignment and deliverables.

Setting Up for Success

We aimed to create a clear Minimal Viable Product (MVP) and ensure our presentation was just as streamlined.

The goal:

Build an MVP and pitch our solution and process clearly and cohesively, in 24-hours.


A presentation structure with key deliverable artifacts from each team to showcase our process.

4:30 PM

Kicking of with Eco-Problems

We faced a big challenge: finding a digital solution to reduce non-renewable energy issues like pollution and global warming to:

  • Improve carbon footprint

  • Lower emissions

  • Control waste

5:30 PM

Narrowing the Scope

Led by the UX Team, we worked alongside our peers to quickly shrink this large problem into something we could tackle in 24 hours, aiming for a practical and meaningful MVP.

Drawing from experience from past projects, we honed in on a specific challenge that would be technically feasible in the limited time.

With judging metrics like Innovation and Technical Execution in mind, our attention was drawn to the e-commerce space.

Uncovering the Problem

As we delved deeper into the e-commerce realm, our top priority was discerning the core issue. With a commitment to a user-centric approach, the team collaborated intensively.

This phase also brought our data scientist to the forefront, emphasizing the creation of a system to evaluate eco-friendliness.

Armed with this understanding, we proceeded to gather key stats and insights from user interviews and research.

Greenhouse gas footprint is customer-dependent.
of global consumers had become even more eco-friendly.
Willing to pay more for eco-friendly products.
More likely to purchase a product that is eco-friendly.
Don’t know how to identify them.

User Interviews

We interviewed 3 participants, asking each 3 key questions:

  1. Do eco-factors affect your online shopping choices?

  2. How was your last online shopping experience for green products?

  3. What drives you to choose eco-friendly products?


Using user interviews and scholarly articles, we gathered the essential user insights.

Image alt tag


People prefer eco-friendly products especially day-to-day items.

Image alt tag


Lack clarity on which products are eco-friendly and why.

Image alt tag


People aspire to contribute to a greener world.

8 PM

Problem Defined & Our Guiding Star for Solutions


From the data, we shaped a proto-persona, directing our design efforts towards real user needs and pain points.


Choosing a Direction

Diving into eco-friendly systems, we collaborated with developers and our data scientist to carve out a feasible direction quickly.

Quickly ideating and sketching impactful and meaningful solutions

The Direction

How Might We...

Bridge eco-shoppers with trustworthy, sustainable products?

Our Solution

A Full-Stack Web Portal for Eco-products.

A platform ranking eco-friendliness, building trust, and easing green purchases.


MVP Flow

Designed minimal screens for maximal impact.

We streamlined a user-focused flow for easy eco-rating assessments:

  1. Search for products

  2. Choose a product

  3. Evaluate its eco-friendliness & details


Simple wireframes approved by the developers.

Alignment Before Building

As day one waned, the UX and development teams aligned.

Our goal?

Ensure wireframes matched technical realities for a smooth transition to high-fidelity designs.

With precise specs in hand, developers were primed for action come morning, and the UX team could now concentrate on crafting a powerful presentation narrative.

Homework for the Night
Image alt tag


High-Fidelity Design

Translate low-fi wireframes into a high-fidelity prototype, infusing brand elements for developer clarity.

Image alt tag


Laying the Groundwork

Outline the backend architecture for a seamless start to the next day's development.

Image alt tag


Dataset & Eco-rating System

Identify a product dataset and establish a system to evaluate and rank products by eco-friendliness.


Getting inspired for the eco-rating system working along side our data scientist for feasibility.

11 PM

High Fidelity Prototype

Developer Collaboration

In collaboration with developers, we:

  • Created precise design specifications.

  • Prioritized ease of implementation. If complex, the design was adjusted.

  • Delivered detailed guidelines on color, typography, and spacing.

This ensured a seamless transition from design to a tangible product come morning.

The Next Morning
9 AM

The technologies used to create the fina

Developers Dive In

Developers kicked off with the High-Fidelity Design, and the design specifications, rapidly converting it into a functional website.

Interaction with the UX team was key, ensuring the design was accurately translated within our tight timeline pivoting and reducing scope were necessary.


Visualizing our strategy to create the eco-rating.

Data Roadblocks

Liam, our data scientist, faced dataset challenges.
Existing ones were incomplete or unsuitable for our eco-rating.

Our pivot:

  • Highlight the urgent need for quality eco-data.

  • Emphasize the method behind our eco-rating.

This story enriched our pitch, emphasizing our solution's importance.

10:00 AM

Crafting the Deck

I crafted a unified presentation with clear branding for our judges and audience.

Core Considerations:

  • How can I streamline this into the core MVP?

  • Aim for a Minimal Viable Presentation: Simplified visuals, cohesive design, and clarity.

Each slide was distilled to highlight only the most essential information.

Image alt tag

Focus on Value

Our spotlight: The Eco-rating.

This unique feature enables users to:

  • Evaluate products' eco-friendliness effortlessly.

  • Compare products using a clear numeric system, instead of vague labels.

  • Shop with confidence, as we guide them to eco-conscious purchasing decisions.

1 PM

Practicing the Pitch

As a team, we fine-tuned our pitch for simplicity and impact.

Focus Areas:

  • A narrative highlighting process and collaboration.

  • Emphasis on challenges, decisions, and our unified approach.

  • A journey from UX to data, to development, showcasing how the product evolved with the collective efforts of our team.

4:30 PM
Figma Prototype

The Outcome

With pride, we showcased our functional full-stack prototype MVP in just 24 hours. Despite being the finale of the eco-saga, our pitch resonated, earning us a thunderous applause.

The judges' feedback was positive, highlighting our clarity, team cohesion, and innovative concept.

Ultimately, we won 1st place in the competition.


Preparation & Agility

Establishing clear expectations and the capacity to pivot quickly are pivotal.

Simplicity & Focus

Achieving maximum impact through a streamlined product and pitch approach.

Collaboration & Clarity

Strong teamwork and clear communication ensure seamless handoffs and project clarity.

Next Steps


Implement direct eco-ratings in product browsing and conduct in-depth user interviews.


Explore developing a Chrome extension for eco-ratings & build a robust product database.


Gather raw materials data and develop an algorithm for generic products.