Original Data Swiss hero motion / modular intelligence
Digital platform / Data & ML

The Data Swiss

I made a highly technical engineering offer easier for business buyers to enter without stripping away its specialist depth.

Role UX, visual direction & Webflow Industry Data engineering Scope Website strategy, UX & build
The Data Swiss website screens across homepage, services, projects and about pages
Website system overviewHomepage · Services · Projects · About · Case studies
The design problem

Make specialist depth feel structured, not intimidating.

The Data Swiss offers data engineering, machine learning and analytics expertise. The original communication was technically credible, but the path from capability to business value was difficult to scan.

I reorganized the experience around buyer questions, then built a modular visual language that could explain systems, people and project evidence without falling back on generic technology imagery.

Client
The Data Swiss
Deliverables
Strategy, UX, visual system, motion and Webflow build
Platform
Webflow
Before and after

From a flat consultancy page to a guided decision system.

The “before” views below are restrained reconstructions of the earlier communication problem. They show the UX gap without pretending to be archived production screenshots.

Reconstructed before
DATA CONSULTING Services   About   Contact

Data solutions for your business

We help organizations with data engineering, analytics, cloud platforms and machine learning.

DataGeneral capability copy with no clear next step.
CloudServices listed at the same visual priority.
AITechnical terms before buyer context.
Learn more
BeforeGeneric category language · equal hierarchy · weak brand recall
Designed system
Final Data Swiss homepage authority section and modular interface
AfterClear promise · modular navigation · distinctive product language
Data Swiss source comparison showing the original and redesigned presentation
Source case-study board: message hierarchy and decision flow compared side by side.
Signature visual language

Every block has a job.

The shapes are not decoration placed around the interface. They behave like data moving through a system: grouping, splitting, connecting and resolving into readable outcomes.

  • Squaresstructure, platforms and repeatable modules
  • Circlespeople, signals and active decision points
  • Quarter arcsmovement, transformation and continuity
  • Typography blocksthe brand name becomes part of the system itself

Scroll into the system. The identity assembles from independent data units, then settles into one readable mark.

Page system

One visual grammar, different jobs on every page.

The internal pages keep the same rules but change their composition to match what the visitor needs to understand next.

Data Swiss internal pages including services, about and project case studies
Services explain capability. About builds human trust. Projects provide technical evidence.
01

Services

Capabilities progress from a scannable overview into specific engineering practices, tools and business context.

02

Projects

Project lists stay quiet and selectable. Individual case studies open into evidence, technology and outcome sections.

03

About

The brand system shifts from abstract infrastructure to the distributed team, founder story and global presence.

Motion system

A different movement rule for each kind of information.

The Figma source includes dedicated loading and Lottie explorations. I translated that thinking into a page-level choreography, so motion explains the content instead of repeating one entrance everywhere.

Homepage · Original Lottie

Assemble

Independent blocks arrive, align and resolve into the hero identity.

Services · Original Lottie

Connect

A continuous block sequence makes the engineering offer feel like one connected practice.

Projects · Original Lottie

Scan and reveal

A directional sequence introduces project proof, then settles so the evidence stays readable.

About · Original Lottie

Locate and pulse

Distributed team points activate across a wide field, turning global reach into a human story.

Data Swiss page frames used to define distinct motion behavior
Motion-ready frames: hero blocks, service shapes, project lettering and team geography.
Evidence, not decoration

The system carries through the full buying journey.

Each major claim is paired with a real screen or a clearly labelled reconstruction. No invented performance figures are used.

Data Swiss conversion sections and contact prompt
Service proof and a focused contact transition
Custom Data Swiss icons for engineering services
Custom icons for data engineering, ML engineering and analytics
Data Swiss case-study narrative showing the final website system
Source case-study narrative and final website evidence
What changed

Clarity became the interface.

The final site gives business buyers a clear entry point, gives technical evaluators enough depth to continue, and gives The Data Swiss a visual system people can recognize before they read the logo.

View published project ↗
Next project

Kingdom Sports

View case study ↗