Today's Progress
After several iterations, the seasonal logic refactor and purchase section structuring have finally reached a level I’m genuinely satisfied with.
Here’s what I accomplished:
Clearer Purchase Options via Tabs
The purchase section now uses tabbed navigation to clearly separate:
- Immediate shipment
- Scheduled delivery
- Subscription (regular delivery)
This allows users to see only the information relevant to them, reducing cognitive load and keeping the UI cleaner.
I believe this offers a much more user-friendly experience, especially given the complexity of the purchasing process.
Multi-Site Handling: Avoiding Info Overload
There are 4 different ec platforms involved, each with unique:
- Product offerings
- Pricing
- Shipping fees
- Service levels
Rather than overwhelming users with all this at once, I chose to simplify the display logic.
Only key differences are shown depending on user interaction, keeping the content digestible.
Image Organization: Rule-Based Refactoring
I introduced a consistent image file organization rule
- All images are placed into folders named after their section (e.g.,
/action,/hero) - Filenames start at
001 - Shared assets like background textures or borders are exceptions
This small change helped keep the project organized and reduces errors when referencing assets.
Action Section Refactor: Split, Break, Fix
I attempted to split the overly long ActionSection
tags: nextjs, frontend, portfolio, typescript, ux
Top comments (0)