MAS9 Official Website Design
MAS9 Official Website Design
MAS9 Official Website Design
MAS9, an early-stage martial arts tech startup, needed to establish credibility and clearly communicate their value to potential customers. I designed and launched their official website using Framer, with its motion capabilities to build trust through polished interactions and responsive design.
As a sole designer, I developed the complete brand visual direction and site architecture, resulting in a modern platform that effectively converts visitors into potential customers while working well on all devices.
MAS9, an early-stage martial arts tech startup, needed to establish credibility and clearly communicate their value to potential customers. I designed and launched their official website using Framer, with its motion capabilities to build trust through polished interactions and responsive design.
As a sole designer, I developed the complete brand visual direction and site architecture, resulting in a modern platform that effectively converts visitors into potential customers while working well on all devices.
Timeline
Timeline
June 09 - 13, 2025
June 09 - 13, 2025
Role
Role
Product Designer
Product Designer
Responsibilities
Responsibilities
UX/UI Design
UX/UI Design
Visual Design
Visual Design
Development (Framer)
Development (Framer)
Content Strategy
Content Strategy
Tools
Tools
Framer
Framer
Figma
Figma
Google Analytics
Google Analytics
Design Direction
To help busy school owners quickly evaluate MAS9's value, I designed a responsive, clean, minimal layout that reduces cognitive load and prioritizes essential information.
To help busy school owners quickly evaluate MAS9's value, I designed a responsive, clean, minimal layout that reduces cognitive load and prioritizes essential information.
Reducing Cognitive Load
Reducing Cognitive Load
Visual-first Approach:
Emphasized images over text-heavy explanations to accommodate busy users who scan rather than read
Visual-first Approach:
Emphasized images over text-heavy explanations to accommodate busy users who scan rather than read
Real UI Components:
Used actual software interface so visitors could immediately visualize how they'd use the product
Real UI Components:
Used actual software interface so visitors could immediately visualize how they'd use the product
Strategic CTA Hierarchy:
Made [Schedule Demo] the primary button since it converted more visitors to trials and satisfied users' need for detailed explanations, while positioning [Get Started Free] as secondary
Strategic CTA Hierarchy:
Made [Schedule Demo] the primary button since it converted more visitors to trials and satisfied users' need for detailed explanations, while positioning [Get Started Free] as secondary
Prioritizing Essential Information
Prioritizing Essential Information
Feature Visibility:
Highlighted key software functionality that school owners specifically need, making evaluation quick and straightforward
Feature Visibility:
Highlighted key software functionality that school owners specifically need, making evaluation quick and straightforward
Clear Service Overview:
Communicated MAS9's three offerings (Management Software, Website Service, Marketing Service) to eliminate confusion
Clear Service Overview:
Communicated MAS9's three offerings (Management Software, Website Service, Marketing Service) to eliminate confusion
Optimizing for Multiple Devices
Optimizing for Multiple Devices
Responsive Design Approach:
Optimized layouts for desktop, tablet, and mobile to accommodate school owners who browse between classes on different devices
Responsive Design Approach:
Optimized layouts for desktop, tablet, and mobile to accommodate school owners who browse between classes on different devices
Consistent Visual Hierarchy:
Maintained design integrity and usability across all screen sizes
Consistent Visual Hierarchy:
Maintained design integrity and usability across all screen sizes
Structure
I structured the site architecture to guide school owners through a logical evaluation process, from initial interest to conversion decision.
This structure creates a natural user journey from Awareness (Home) -> Credibility (About Us) -> Evaluation (Features) -> Decision (Pricing), aligning with how busy school owners typically research software solutions.
Result and Learnings
Result and Learnings
The new website became a key asset during the sales team’s participation during national taekwondo tournament events. Compared to previous reach-out efforts without a proper website, potential clients showed significantly more interest, often visiting the website to learn about features, pricing, and overall value.
The new website became a key asset during the sales team’s participation during national taekwondo tournament events. Compared to previous reach-out efforts without a proper website, potential clients showed significantly more interest, often visiting the website to learn about features, pricing, and overall value.
Key Insights:
• 45% mobile traffic during events validated the responsive design prioritization and mobile-first strategy
• Positive sales team feedback confirmed that real UI screens helped communicate product value effectively
• 45% mobile traffic during events validated the responsive design prioritization and mobile-first strategy
• Positive sales team feedback confirmed that real UI screens helped communicate product value effectively
Design Learnings:
• Mobile-first approach proved essential - busy school owners primarily browsed on mobile devices
• Visual product demonstration (real UI elements) was more effective than text descriptions for this audience
• Mobile-first approach proved essential - busy school owners primarily browsed on mobile devices
• Visual product demonstration (real UI elements) was more effective than text descriptions for this audience