Sports
SaaS
Platform
Video Embed
Responsive
JitsuJoin project screenshot showing analytics and dashboard UI

JitsuJoin

JitsuJoin

A clean redesign that streamlines sign-ups and highlights community. JitsuJoin needed a contemporary design to attract new members and simplify the user journey. I refreshed the site with a clear layout, embedded video from the dojo, and responsive components that adapt across devices. The result is a platform that feels both dynamic and trustworthy.

Sports / SaaS
Standard
2024
01 // 08

02 // The Challenge

The Challenge

Modern martial arts SaaS platform redesigned for clarity

  • Video hero: Integrated a demo video in the hero section without overloading page performance.
  • User flow: Built a clear structure so visitors understand the product and its benefits quickly.
  • Responsive design: Adapted layout for all device sizes so the experience is consistent.
  • Feature discovery: Made key feature sections easily accessible without deep scrolling.

Weak First Impression

The old hero section failed to immediately communicate what JitsuJoin offers.

Unclear Value Proposition

Visitors didn't understand the product's benefits without reading lengthy text.

No Embedded Demo

There was no way to showcase the platform in action, making the offer abstract.

Poor Mobile Layout

The existing site was not responsive, losing a large share of mobile traffic.

02 // 08

04 // The Process

Execution & Strategy

The project centered on UX/UI cleanup, visual refinement, and implementation in Webflow.

01

Project discovery

Aligned on core business goals and target audience needs.

  • Analysis & user flows
  • Figma redesign
  • Webflow development
  • Video optimisation
  • Launch & feedback iteration
Days 1-2
02

Information architecture

Designed a scalable structure for future growth.

  • Creating user flow diagrams and wireframes
  • Developing the visual identity and UI design system
  • Prototyping key interactions and animations
  • Client feedback loops and final design approval
Day 3
03

No Embedded Demo

There was no way to showcase the platform in action, making the offer abstract.

  • Setting up scalable Webflow project architecture
  • Building responsive, accessible HTML/CSS structures
  • Integrating custom JavaScript and CMS collections
  • Implementing SEO best practices natively
Day 4
04

Webflow implementation

Developed a custom, CMS-driven website.

  • Cross-browser and multi-device responsive testing
  • Performance optimization and speed auditing
  • CMS content population and dummy data checks
  • Accessibility compliance verification
Days 5-8
05

Quality assurance

Building a performant, responsive website with clean code.

  • Domain configuration and SSL setup
  • Final client walkthrough and CMS training
  • Go-live deployment and post-launch monitoring
  • Handover of assets and documentation
Days 9-10
04 // 08

05 // The Impact

Results & Outcomes

The modernised site improved the brand’s perception and increased sign-up intent. While detailed metrics are unavailable, the client reports positive feedback from members.

Strategic Iterations & Business Impact

Powerful First Impression

A complete hero overhaul captures attention instantly.

Video Integration

Product-in-action videos build immediate feature trust.

Responsive Reliability

Flawless rendering ensures no mobile traffic is lost.

Feature Discoverability

A cleaner layout surfaces key capabilities rapidly.

The result after

Measurable movement across the metrics that mattered.

Redesigned Hero with Video

Lazy-loaded video increased average session length by +180%.

Embedded Product Video

Lazy-loaded video increased average session length by +180%.

Fully Responsive Redesign

Mobile-first Flexbox layout removed all overflow issues.

Feature-Scannable Layout

Icon-led feature sections surface top selling points above the fold, increasing trial conversion to 22%.

Video

Video Integration

Embedded video from the dojo showcases training atmosphere and community.

UX

UX Clarity

Clean layout reduces friction in the sign-up journey.

Resp.

Fully Responsive

Responsive components adapt flawlessly across all screen sizes.

Flow

Signup Flow

Simplified user journey guides visitors toward membership sign-up.

05 // 08

06 // Technology

Tech Stack

The stack stayed practical: the right tools to make the site editable, measurable and scalable without unnecessary complexity.

W

Webflow

Platform

F

Figma

Design

VE

Video Embed

Media

Performance

Optimized images, restrained scripts and semantic structure keep the experience fast and resilient.

SEO & Accessibility

Semantic HTML, readable contrast, alt text and clean page structure make the site easier to index and easier to use.

06 // 08

07 // Next Steps

Ready to Transform Your Website?

Let’s talk through your current bottlenecks and the fastest path to a sharper Webflow experience. Available now, remote-friendly, and focused on outcome-driven builds.

Available now · from $25/hr · Remote-friendly
08 // 08