Always-on analysis
The ring is built from zeroes and ones, the smallest units of computational data. Its continuous cycle represents an active research loop: observe, model, test and adjust.
Interactive website / AI finance
Kindai Research
I translated two complex quantitative products into an interactive system that feels advanced before a sales conversation begins.
The design problem
Make complex financial technology feel active, credible and understandable.
Kindai combines automated risk profiling, quantitative trading and asset-management technology. I organised the experience as one research environment with two clearly differentiated product states, then used motion to show that the system is continuously processing information.
- Audience
- Investors and organisations evaluating AI-driven risk products
- Design intent
- Translate technical depth into a clear and memorable product journey
- Build
- Figma system, custom 3D direction, interaction design and Webflow
Concept rationale
A visual grammar built from financial logic.
The hero objects are not decorative particles. Each one turns an abstract financial operation into a recognisable spatial cue, while the binary orbit connects them as one computational system.
Math becomes identity
The integral suggests accumulated signals, sigma suggests aggregation and risk, division suggests allocation, the root suggests model derivation, and multiplication points to compounding. Together they make quantitative thinking visible.
Depth without distraction
The objects respond at different speeds to pointer movement. This creates the feeling of layered models while the message and demo action remain stable and readable.
Design foundation
One system, two product signatures.
Poppins keeps the language direct and contemporary. White carries the technical message against black, while the blue-to-cyan spectrum separates the two offers without fragmenting the parent brand.
- Tactive: electric blue signals automated action and client risk profiling.
- Quantive: cyan shifts the atmosphere toward data, markets and proprietary modelling.
- Kindai: black, white and graphite hold both worlds inside one research institution.
Homepage architecture
The homepage moves from belief to product clarity.
The first screen establishes ambition. The following states name each product in plain language, then the final state collects only the information needed to continue the conversation.
Source Figma framesImplemented in Webflow
02 / Tactive
Automated client risk profiling
The blue state gives Tactive a decisive identity and keeps the action close to the product promise.
03 / Quantive
Proprietary trading and risk engine
The cyan state changes the product mood without changing navigation, hierarchy or the route to a demo.
Demo request flow
A complex offer, reduced to three confident steps.
The form is separated into focused states so visitors never face every decision at once. Directional motion carries the selected context forward instead of resetting the experience between steps.
Step 01
Identify the prospect
Name, email and company establish enough context to qualify the conversation. The dark wave keeps the visual language continuous with the research field.
Step 02
Select the relevant product
Large Tactive and Quantive cards turn an abstract service choice into a visual decision. The selected gradient provides immediate confirmation.
Step 03
Add the specific question
The final state asks for one message, preserves the chosen direction and changes the action to Send request. The interface now reflects commitment rather than exploration.
Motion direction
Every movement explains a state change.
The motion system is based on continuous computation, layered models and progressive commitment. It avoids motion that exists only to decorate the viewport.
Continuous, not hurried
The binary ring rotates slowly to suggest persistent analysis. It never blocks reading or asks for attention.
Independent variables
Operators drift on separate timings, like inputs moving through one quantitative model rather than a group spinning as one object.
Colour carries context
Blue and cyan identify the active product while the structural layout stays stable, reducing reorientation between offers.
Direction shows commitment
Forward transitions confirm progress. Previous controls remain visible so the visitor always understands where they are in the request sequence.
Responsive resolution
The concept survives without desktop scale.
On mobile, the binary field becomes a framing device, the symbols are reduced to a few recognisable anchors and the form becomes a clear vertical sequence. The idea remains intact while interaction effort drops.
- Readable headline measure over the data field
- Reduced symbol density and smaller motion range
- Single-column form fields with a persistent next action
- Reduced-motion fallback for users who request it
Delivered system
A financial website with a reason behind every dot.
The final experience connects product architecture, mathematical art direction, responsive interaction and a focused demo journey. The result shows not only what Kindai offers, but how I think through identity, UX and motion as one design problem.
Your next project
Give each offer a clear place in the bigger picture.
Tell me what your customers need to understand or do. I’ll recommend the work, set the scope and stay accountable for delivery.
Talk now ↗