Case
Web Design
Scroll-Telling
P5.Js

The Techno
Chronicles

OVERVIEW
The project involves creating a series of two web pages based on interconnected Wikipedia entries. These pages will use scroll-telling as a storytelling technique to present the content, focusing on creating engaging, aesthetic, and emotional experiences. The design will break away from Wikipedia’s functional and generic layout, embracing hierarchy, rhythm, focus, and visual interest
The challenge
Balancing Vibe and History
The challenge is to capture the essence of techno music while narrating its history, combining both into a cohesive design. The goal is to evoke the techno vibe subtly, without making it feel overdone, balancing the rhythmic, raw energy of techno with historical storytelling in a way that feels natural and immersive.
Capture the Vibe
Pinpoint specific stages where physiotherapists face difficulties or frustrations with our platform
Tell the Story
Present historical content in an engaging way that maintains readability and narrative flow
Tools
Webflow
Primary platform for building the scroll-based website with custom interactions
Figma
Design and prototyping tool for planning layouts and visual hierarchy
p5.js
Creative coding library for developing custom animations and interactions

The process
Enhancing Experience with Custom Animations
All animations were custom-coded to enhance user engagement. Each interaction was carefully programmed to align with the rhythm of the story, ensuring smooth transitions and a cohesive narrative without overwhelming the user.

Visual Approach
Hierarchy & Rhythm
Breaking away from Wikipedia's generic layout to create visual interest through clear hierarchy and rhythmic pacing
Hierarchy & Rhythm
Breaking away from Wikipedia's generic layout to create visual interest through clear hierarchy and rhythmic pacing
Focus & Emotion
Directing user attention to key moments while evoking the emotional essence of techno culture
Focus & Emotion
Directing user attention to key moments while evoking the emotional essence of techno culture
Key Learnings

Scroll-Telling Engagement:
Use scroll-telling to gradually reveal content, ensuring smooth transitions that keep users engaged
Aesthetic and Usability Balance
Design creatively but maintain readability and easy navigation, enhancing the user experience
Responsive Design
Ensure the site works seamlessly across all devices, from desktop to mobile
Minimalist Approach
Use a clean, minimalist design with bold accents to highlight important moments in techno history
Test and Iterate
Regularly test across devices and gather user feedback to improve the experience

Read more of my case studies

1:1 — Visual Conversation Journal

iTero Store Redesign

 Scan Process Toolbar Improvement

HomeABOUTMY CV
(back to top)