What I Did Today
Step 3: Persona & Messaging Strategy
I created user personas and defined key messaging pillars based on:
- Existing customer reviews
- Brand mission
- Product strengths
Step 3.5: Catchphrase Strategy
I brainstormed several copy directions to explore emotional vs. functional appeal.
Some examples:
- From soil to soul – taste the difference.
- Harvested with care. Delivered with pride.
Step 4: LP Wireframe (HTML Mockup)
I built a wireframe using HTML markup to visualize the core LP structure. Sections included:
- Hero with CTA
- Social proof (reviews)
- Product features
- Producer story
- Purchase links
It felt great to see the structure come alive.
What Was Hard
Responsive design hit me hard today.
I realized how different the design logic is between mobile-first and desktop views.
For example:
- Text hierarchy must be tighter for mobile
- Image composition needs to be leaner
- Horizontal layouts (e.g. review carousel) don’t translate easily
- Some CTA placements felt cramped on small screens
And I haven’t even gotten to touch gestures or scroll fatigue yet.
Also, since this is a portfolio project, I can make design calls based on my own taste.
But I caught myself thinking like if this were a real client project, would I be allowed to do this?
It reminded me that personal taste might sometimes have to take a backseat to business priorities. That thought kind of stung but it’s part of the process.
Next Steps
- Step 4.5: Information architecture & content prioritization
If you’ve worked on responsive LPs, what are your best practices for resolving mobile–desktop design conflicts?
Feel free to drop a link. Would love to learn from others too!
Thank you in advance!
Date: June 11, 2025
Tags: #portfolio, #webdesign, #ux, #html, #responsive