Little Steps
Project Overview
The website provides information about the campaign, instructions for participation, step tracking tools, and rewards for reaching activity milestones.Little Steps is a campaign is a mobile-first website designed to encourage students to walk and use sustainable transport when commuting to college. The platform motivates users through step tracking, milestone rewards, and interactive features that help students engage with the initiative
Role: UX Designer & Front-End Developer Project Type: Master's Degree Project Tools: HTML, CSS, JavaScript Goal: Design an interactive website that encourages students to increase daily step counts and adopt sustainable commuting habits.
Problem
Students often rely on cars or public transport for short journeys to campus. Many sustainability campaigns exist, but they lack engaging digital tools that encourage students to actively participate.
This project aimed to design a website that:
Encourages students to increase daily step counts
Provides simple instructions for participating in the campaign
Tracks progress toward step goals
Rewards users for reaching activity milestones
The Solution
Little Steps is a campaign website that combines step tracking, milestone rewards, and interactive features to motivate students to walk more. The platform guides users through the campaign, tracks their progress, and rewards them for reaching step goals.
Key Features
Responsive Navigation
A mobile-friendly navigation system allows users to easily access different sections of the website. A JavaScript menu toggle dynamically displays the navigation menu on smaller screens.
Step Tracking System
Users can track their progress toward a step goal using an interactive progress bar. Steps can be added incrementally and the interface visually displays progress through percentage and step counts.
Reward Milestones
A milestone system rewards students for reaching step targets such as 20,000 or 100,000 steps. Each milestone unlocks a reward such as a reusable coffee cup or hoodie.
Image Upload for Activity Verification
Users can upload screenshots from the **Strava fitness tracking app to verify their activity. Uploaded images are previewed on the page to confirm the submission.
Interaction Design
The website includes several interactive components such as dropdown selections, toggle controls, and an image carousel to enhance engagement and provide real-time feedback for user actions.
This project provided valuable experience designing and developing an interactive website using HTML, CSS, and JavaScript. It demonstrated how gamification and visual feedback can motivate user engagement in sustainability campaigns.
Future improvements would include improving the responsive layout and integrating automatic step tracking through the Strava API.