UX/UI Design
Figma
Framer
Hero + Social proof
The hero section was designed to answer users’ primary questions within seconds: what the product is, why it’s trustworthy, and how much it costs. Clear messaging, trust indicators, and visible pricing reduce uncertainty and help users make an informed decision without unnecessary scrolling.
To increase perceived value, I presented the digital guide as a realistic book mockup, making the product feel more tangible and memorable.
Instead of static testimonials, I used a continuously scrolling review carousel. This keeps the page visually engaging while exposing users to multiple success stories, increasing the likelihood that they identify with a customer experience similar to their own.
Features section: "Why this guide is unique?"
This section is designed around users’ most common questions before purchasing. Three content cards communicate what the guide includes, how it applies to different situations, and the practical value users will gain.
The information follows a logical decision-making flow: understanding the content first, recognizing personal relevance second, and seeing the real-world benefits last. Topic tags such as Digital Nomads, Students, Passive Income, and Citizenship Through Childbirth help visitors quickly identify whether the guide fits their specific needs without requiring a separate audience section.
Content overview: "What you will learn"
This section uses previews of the actual guide pages to make the digital product feel tangible and build confidence in the quality of the content.
The card grid gives users a clear overview of the guide’s scope, from citizenship and finances to housing, work, and everyday life - helping them quickly confirm that their questions are covered. Color-coded thumbnails create visual hierarchy, making the content easy to scan while reflecting the guide’s organized, chapter-based structure.
Audience section: "Who this guide is for"
This section helps users quickly determine whether the guide is relevant to their situation. A collage of real customer photos creates authenticity and makes the featured user groups feel relatable rather than hypothetical.
The two-column layout improves scanability, allowing visitors to identify the scenario that matches their needs without reading every item. This reduces cognitive load and helps users find relevant information faster.
Author block, Mid-page CTA, Pricing & FAQ
The author section builds credibility by introducing the person behind the guide through a photo, personal story, and relevant expertise. Establishing trust at this stage helps reduce uncertainty before users reach the purchase decision.
A mid-page CTA reinforces the core value proposition and provides another conversion opportunity for visitors who are ready to act. The pricing section presents two clear options—the guide alone or the guide with a consultation—making comparison simple while encouraging the higher-value choice through visual hierarchy rather than pressure.
The experience concludes with an FAQ section that addresses remaining questions and removes last-minute friction, helping users feel confident completing their purchase.
Final CTA & Footer
The final CTA gives users a clear opportunity to act after exploring the entire page. By repeating the core value proposition and primary action, it minimizes decision friction and eliminates the need to search for the purchase button.
The product mockup reappears with interior page previews, reinforcing the value and making the digital guide feel tangible at the point of conversion.
The footer provides essential navigation, contact information, and policy links in a clean, unobtrusive layout, maintaining a consistent visual hierarchy and reinforcing the product’s credibility through the end of the experience.
Mobile version
The mobile experience preserves the same visual hierarchy and conversion flow as the desktop version. Key elements: headline, trust indicators, pricing, and CTAs - stack naturally, allowing users to understand the offer without unnecessary scrolling or confusion.
Each section is optimized into a focused, easy-to-scan screen, reducing cognitive load on smaller devices. Full-width CTA buttons remain consistently visible and easy to tap, improving accessibility and supporting a seamless conversion experience.
