RESPONSIVE WEBSITEDESIGN CHALLENGE

FluxNode

A dark, responsive Web3 infrastructure website concept — turning a dense technical brief into a clear experience for developers and enterprise teams.

View prototype
FluxNode desktop
FluxNode mobile
ROLE
UX/UI Designer
PLATFORM
Responsive Web
INDUSTRY
Web3 / Developer Infra
STATUS
Concept
01OVERVIEW

A responsive marketing website for RPC infrastructure.

FluxNode is a website concept for a Web3 RPC infrastructure service, aimed at developers and enterprise teams.

The project originated as a real-case technical design challenge during a hiring process. The supplied brief defined the core service story, technical claims, required content, primary actions and major website sections.

I independently designed the complete desktop and mobile experience, established the dark visual direction, organized the supplied content into a clear page structure, created reusable interface elements and built an interactive Figma prototype — all in under seven days.

FluxNode responsive website hero
02THE CHALLENGE

Making a dense technical brief easy to read.

The brief carried a large amount of technical and commercial content: service positioning, network statistics, infrastructure explanations, provider comparison, integration content, enterprise messaging, testimonials and multiple calls to action.

The main challenge was to turn all of that into a website that could be understood quickly, without oversimplifying the technical subject.

The experience also needed to support two distinct audiences — developers looking for integration and API access, and enterprise teams focused on reliability and service commitments — while remaining part of one coherent website.

  • Dense technical & commercial content
  • Two audiences in one website
  • Complete desktop & mobile in under 7 days
  • Predefined content & required sections
03GOALS

Make a technical brief feel clear and product-focused

Create a clear website journey
Make technical content easier to scan
Support developers and enterprise teams
Build a consistent responsive experience
04MY ROLE & SCOPE

Independent end-to-end design

I worked independently on the complete challenge — from page structure and visual direction to responsive layouts, reusable UI and the interactive Figma prototype.

The brief supplied the core content and required sections; I owned the information hierarchy, the visual system, both breakpoints and the prototype behaviour.

MY RESPONSIBILITIES
  • Website structure & content hierarchy
  • UI design — desktop & mobile
  • Responsive design
  • Component design
  • Interaction design & prototype
  • Motion & micro-interactions
TOOLS
  • Figma
  • Figma Motion
05PROCESS

A page that answers the next natural question

01
Introduce the service
02
Explore potential value
03
Understand the difference
04
Main capabilities
05
Audience content
06
Continue to next action
06KEY FEATURES

Key features across the page

01 · HERO
Value-focused hero
The main value proposition, live network status and two primary actions — Connect Wallet and Get an API Key — sit together in the opening section.
12,400+ Nodes online · 99.98% uptime
Never let a slow node take down your dApp.
02 · CALCULATOR
Savings calculator
A focused module for provider selection, monthly-request estimates, latency reduction and estimated savings — presented as a visual representation, not a live pricing engine.
Latency reduction42%
Est. gas saved / month$2,345
Alchemy ▾
03 · COMPARISON
Problem & solution
Two technical paths show the contrast between relying on one overloaded node and routing across a broader network — using node cards, connection lines and status differences.
The old way
FAILED
With FluxNode
38ms
04 · AUDIENCES
Developers & enterprise
Two audience sections live inside one journey — developers get integration and code content; enterprise teams get reliability, security and SLA content.
Developers
2.1B+ requests served
Enterprise
99.98% Uptime SLA
07KEY DESIGN DECISIONS

Choices that shape the page

01
Turn the long brief into a progressive story
The page was structured so each section answers the next natural question — from “What is FluxNode?” through “How does it compare?” to “What should I do next?” — keeping the experience readable despite the amount of supplied content.
02
Visual comparison for technical infrastructure
The difference between one overloaded node and a routed network is hard to communicate in text. Two visual paths with node cards and status states give visitors a faster way to understand the contrast before reading the supporting copy.
03
Two audiences inside one experience
Developers and enterprise teams need different information from the same infrastructure product. Both audiences stay inside the same journey with dedicated sections, so the product story remains unified.
04
Dark visual system with focused accents
Dark surfaces form the foundation while purple, pink and green are used selectively for emphasis, status and hierarchy — keeping the long page visually connected across many similar modules.
05
Motion as interface feedback
Selected hover states, pulsing status elements, moving details and modal transitions give the prototype rhythm and feedback without changing the underlying content structure.
08DESIGN FOUNDATIONS & UI LIBRARY

Design foundations & UI library

Colors
A dark base with purple and pink accents plus green for positive status.
Typography
PP Neue Machina for display · DM Sans for body & UI.
Aa
Neue Machina · DM Sans
Ultrabold 44Display
SemiBold 32Heading
Medium 16Body
Regular 12Caption
Components
Button, NavTab, Tab, Tag, Input, Modal, CardFeature, CardTestimonial and PulseGreen/Pink/Purple as Figma variants.
Connect Wallet
Get an API Key
Why FluxnodeFeaturesSolutions
v1.0 · SOC 2 Type II
Icons
Lucide-style line set — globe, zap, shield-alert, headset, key-round, menu, chevrons and x.
09INTERACTIVE PROTOTYPE

Try the interactive prototype

Move through the full-page website, open the API modal, switch RPC providers and explore the desktop & mobile flows in one connected prototype.

Loading prototype…
10OUTCOME

A complete responsive concept in under seven days.

FluxNode ended as a full responsive marketing site — desktop and mobile designs, reusable interface elements and an interactive Figma prototype with navigation, provider selection, modal behaviour and motion details.

The final deliverable demonstrates how a dense Web3 infrastructure brief can be translated into a structured marketing experience with technical visual storytelling, audience-specific messaging and responsive behaviour.

FluxNode remained a design challenge / concept and was not launched. No business, conversion or usage metrics are available.

  • Complete desktop & mobile designs
  • Reusable UI library & dark visual system
  • Interactive Figma prototype with motion details
  • Delivered end-to-end in under 7 days
11WHAT I LEARNED

A long technical page still needs a clear story.

Structuring a dense technical website. Section order and visual hierarchy mattered most — deciding what needed explanation, what could be visualized, and when to return to action-oriented content.

One product story for two audiences. Presenting the same service differently to developers and enterprise teams — without splitting the site — asked for deliberate content shifts inside a single journey.

Using motion more intentionally. Hover states, pulsing status elements and modal transitions became an active part of the prototype rather than decoration.

✕
←→navigateEscclose