PowerStride: Turning Every Step Into Sustainable Energy
Role: UX/UI Designer, Quantitative Research & Frontend Developer
Duration: 4 Weeks
Tools Used: Figma, HTML, CSS, JavaScript
Skills Applied: UX Research, Journey Mapping, Interaction Design, GUI Development, DOM Manipulation, Energy Calculations
Author
READ
Category
Public transport in Dublin is under pressure to reduce carbon emissions, but lacks incentives for citizens to support sustainability actively.
Challenge: How might we make public transit greener while encouraging more people to use it?
The Solution: PowerStride
PowerStride is a feature extension for the Leap Top-Up App. It uses piezoelectric tiles installed on Dublin buses to convert footfall into electrical energy — and rewards passengers with travel credits when buses hit the 1000kWh milestone
My Goals
Promote sustainable commuting via gamified rewards
Reduce dependence on traditional fuels
Demonstrate feasibility of clean energy generation
Keep users engaged through minimal, functional UI
Feasibility & Energy Calculations
Avg. Energy Generated per Step: 7 watts
Avg. Steps/Bus/Day: 800
Tiles/Bus: 100 strategically placed
Estimated Energy Output: ~560 kWh/day per bus
EV Bus Energy Need: 180–235 kWh/100km
Return on Tile Investment: Within 12 months
Design Decisions
Integrated into the Leap Top-Up App to reduce learning curve
Dynamic splash screen to signify energy
Green branding for sustainability alignment
Minimal text, prominent icons
Added animations for interactivity
Key Screens
Screen | Description |
|---|---|
Home Screen | View PowerStride status after tapping Leap Card |
Check Screen | User verifies if their step hit 1000kWh |
Winner Screen | Claim reward (like a “Golden Ticket”) |
Top-Up Screen | Confirm updated Leap Card balance |
No Win Scenario | Encouraging screen with gamified feedback |
Frontend: HTML, CSS, JavaScript
Form Validation: Leap Card number, email, DOB, password
Slider Control: Custom-built interactive circular slider
Transaction Log: Displayed via arrays and dynamic table generation
Reusable JS Functions: Modular, clean codebase
Responsive Nav: Hamburger menu via JavaScript on mobile
Tech Stack Highlights
External libraries & helpers:
Iconify,Lottiefiles, Codepen snippetsDOM Events:
mousedown,mousemove,click,submit,DOMContentLoadedModular files: login.js, home.js, transactions.js, leapcard.js
