Guide users to eco-products on the vendor's site.
Overview
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.
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.
Tools
Whiteboard
Figma
Google Suite
Photoshop
Slack / Discord
Team
2 UX designers
1 Data Scientist
3 Software Developers
My Role
Product Manager
UX design
UX research
Pitch Deck
Timeline
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
Discover
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.
70%
Greenhouse gas footprint is customer-dependent.
50%
of global consumers had become even more eco-friendly.
64%
Willing to pay more for eco-friendly products.
78%
More likely to purchase a product that is eco-friendly.
74%
Don’t know how to identify them.
User Interviews
We interviewed 3 participants, asking each 3 key questions:
Do eco-factors affect your online shopping choices?
How was your last online shopping experience for green products?
What drives you to choose eco-friendly products?
Insights
Using user interviews and scholarly articles, we gathered the essential user insights.
Behaviours
People prefer eco-friendly products especially day-to-day items.
Pain-Points
Lack clarity on which products are eco-friendly and why.
Goals
People aspire to contribute to a greener world.
Define
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:
Search for products
Choose a product
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
UX
High-Fidelity Design
Translate low-fi wireframes into a high-fidelity prototype, infusing brand elements for developer clarity.
Software
Laying the Groundwork
Outline the backend architecture for a seamless start to the next day's development.
Data
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.
Develop
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.
-
Simple color palette to communicate transparency & simpicity
-
Separated components that build the website.
-
Redlining to specify the design to develop quickly.
-
Redlining the spacing for elements on the main home page.
-
Redlining on the product listing page
-
Exported the collection of images and assets for developers to use as they build.
-
Specify the Typeface, sizing and CSS structure.
Sleep
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.
Deliver
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.
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.
Learnings
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
UX
Implement direct eco-ratings in product browsing and conduct in-depth user interviews.
Software
Explore developing a Chrome extension for eco-ratings & build a robust product database.
Data
Gather raw materials data and develop an algorithm for generic products.