Left Background
Right Background
UI / UX Design

Grapevine

A modern, dark-themed SaaS landing page designed for a data-driven financial platform, focusing on clarity, trust, and conversion through strong visual hierarchy and immersive dashboard visuals.

Hero
2024
Year
Duration
UI / UX Design
Category

Project Overview

The Challenge.

Balancing complex financial data with a clean and minimal design while ensuring the interface remains intuitive and user-friendly.

The Solution.

I designed a clean, structured layout with bold typography, clear sections, and dashboard-focused visuals to simplify information and guide users effectively.

User-CentricScalable ArchitectureData-Driven

Information Architecture

Mapping the Journey.

User Flow Diagram

User flow visualization showing the primary path from onboarding to core task completion, ensuring minimal friction and logical hierarchy.

Foundation

System Language.

Typography

Primary / Inter

Abc

Heading 1

Bold 32pt

Body Copy

Regular 16pt / Line-height 1.6

Color Tokens

#21202e

#ff514a

#ffffff

UI Elements

Enter email...

The Reveal

High-Fidelity
Solutions.

01

Data-Focused Visual Design

Created a dashboard-inspired layout to visually communicate complex financial data in an intuitive way.

  • Use of charts and UI blocks for clarity.
  • High contrast design for readability.
  • Visual grouping of related data points.
Data-Focused Visual Design
02

Conversion-Driven Layout

Structured the page to guide users from awareness to action with clear CTAs and logical content flow.

  • Hero section with strong value proposition.
  • Section-based storytelling approach.
  • Strategic CTA placements.
Conversion-Driven Layout
03

Modern SaaS Aesthetic

Used dark UI with subtle gradients and glow effects to create a premium and tech-forward look.

  • Dark mode UI for modern appeal.
  • Subtle gradients for depth.
  • Consistent spacing and layout system.
Modern SaaS Aesthetic

Live Preview

Interaction Design.

Experience the flow firsthand through this interactive prototype focusing on micro-interactions and seamless transitions.

Interactive Mode

Reflections

Project Key
Takeaways.

Simplifying Complex Data

Breaking down complex financial information into digestible UI components improves usability significantly.

Hierarchy Drives UX

Strong visual hierarchy ensures users can quickly scan and understand key information.

SaaS Design Patterns

Following proven SaaS UI patterns helps improve familiarity and user trust.