Today's Progress: Designing with Story and Sensory Experience
In today’s development session, I focused on enhancing both visual storytelling and user experience in the Farm Stay section of my LP project. The goal was to make the website not just functional, but emotionally resonant.
Hero Section Redesigned with a Personal Touch
The previous hero image for the Farm Stay section featured a generic asparagus photo from Unsplash. However, I recently discovered on the farmer's social media that they had purchased a vintage car. Inspired by this, I replaced the hero image with a scene of the car driving through a rural landscape, a more personal and evocative visual.
New Catchphrase:
“Take a peaceful break at our countryside farm stay.
Experience the luxury of time spent with nature.”
This message is designed to evoke warmth, nostalgia, and serenity, all core to the rural experience.
Scroll to Top via Logo Tap
For better usability, I implemented a feature where tapping the logo scrolls the page to the top. This is especially helpful on mobile where navigation can feel more limited.
Room Description Rewrite
I updated the room descriptions in the Farm Stay section to enhance sensory storytelling especially around scent and atmosphere.
For example, phrases like “the gentle aroma of tatami” help visitors imagine the stay more vividly.
Mobile-Only Button Fix
I noticed a button for mobile-only was not yet included in the centralized button.ts file.
I added it and refactored the code wherever this button was used to maintain consistency and future maintainability.
What’s Next
Tomorrow, I’ll run another Lighthouse to evaluate the latest performance state.
Based on the results, I’ll create a roadmap to gradually increase the score and optimize both speed and accessibility.
Creating a meaningful and performant experience requires more than just code. It’s about crafting a story, connecting with real-world details, and caring about how people feel when they interact with your product.
tags: nextjs, webdev, design, portfolio, lighthouse
Top comments (0)