My Framer Site

Common Landing Page

Mobile

Desktop

During my collaboration with the marketing & product teams at Hosachiguru, I mentored and redesigned the common landing page to improve usability and visual appeal. The page includes “What we do,” project summary cards, milestones, Google reviews, and relevant YouTube videos. I restructured content placement and added decorative elements to deliver a more user-centred design that enhances clarity, trust, and engagement. In this role, I covered both UI and UX responsibilities.

Hours

Changed the layout of the budget and plot size part in the project card.

I replaced the one-by-one stacked layout of project cards with a horizontal carousel. This lets viewers stay in one viewport and easily swipe through multiple cards without having to scroll down.

The carousel improves engagement and lets users see more project options quickly, making the experience more fluid and reducing scroll fatigue

I centred the reviews section, added generous negative space, and introduced navigation arrows so the content stands out visually and users can more easily browse through feedback without feeling overwhelmed.

White space (also known as negative space) helps improve readability, reduce cognitive load, and guide user attention, making content easier to scan and interact with.

I replaced the carousel layout for project cards with a 2×2 grid format so viewers can see multiple projects at once on a single screen, reducing the need to swipe or scroll sideways and making comparison and discovery easier.

Users should be able to easily see what’s available without extra action. If content is hidden behind navigation (like in a carousel), many users may never see it

I repositioned the milestones section to the centre of the screen and added a garden-style illustration (suggesting growth, fruits & vegetables) to enhance its visual metaphor. I also enriched the hero section’s look to make it more striking, introducing leaf accents and decorative touches to bolster aesthetics without distracting from content.

Alignment & Centering

Center-aligning key elements helps direct attention, creating balance and focus.

By centering the milestones section, the design draws the user’s eye to important info immediately and creates a sense of balance and hierarchy.

Visual Hierarchy

Use size, placement, contrast, and imagery to guide the user’s eye through content in order of importance.

Enhancing the hero page and using illustration gives visual weight to that section, making it the focal point of the page.

Metaphor in UX

Metaphors (imagery or metaphorical visuals) help users map unfamiliar concepts onto familiar ones, reducing cognitive load.

The garden illustration works as a metaphor for growth and nurturing, helping communicate the project’s theme (farmland, sustainability) in a way users immediately understand.

Spacing & Negative Space

Whitespace around content helps it breathe, improves scanability, and reduces clutter.

By giving more space around the milestones and decorative elements, the section stands out without overwhelming the viewer.