1. Project Overview
The American School of Bangkok (ASB) partnered with Asia Media Studio to redesign their website experience with a clear objective: improve usability, information clarity, and trust for both local and international parents evaluating the school.
The existing website functioned as an information repository, but did not fully support how parents actually search, compare, and make enrollment decisions. ASB was also expanding its outreach to a broader international audience — requiring a clearer, more intuitive, and culturally accessible experience.
Rather than approaching this as a visual refresh, we executed a research-led UX transformation, ensuring every design decision was grounded in user behavior, validation, and scalable systems thinking.
The engagement included:
Competitive benchmarking
User interviews & empathy mapping
Persona creation
Information architecture redesign
User flow optimization
UX writing & hierarchy refinement
Wireframing & UI design
Design system development
Usability testing & validation
This structured pipeline ensured the final experience supported discovery, decision-making, and long-term scalability.
UX Findings FINAL
2. The Challenge
ASB faced two core usability challenges: Expanding to an international parent audience
The school wanted to attract diverse families — Thai, expatriate, and multinational — each with different expectations around clarity, communication, and navigation.
Information discoverability & cognitive load
User interviews revealed that parents struggled to:
Understand curriculum pathways
Locate admissions steps and timelines
Evaluate facilities
Find testimonials and social proof
Navigate dense, text-heavy content
This friction introduced uncertainty in a high-stakes decision: selecting a school.
Our guiding objective:
Reduce friction, increase clarity, and build confidence through structure and usability.
3. Research & Discovery
Competitive Benchmarking
We analyzed leading international school websites to understand best practices in:
Homepage storytelling
Curriculum presentation
Admissions structure
Facilities visibility
Navigation behavior
Key insights:
Visual storytelling builds trust
Structured navigation reduces cognitive load
Multiple entry points improve discoverability
Image-driven layouts outperform dense text
These learnings informed architectural strategy rather than surface aesthetics.
Competitive Benchmarking
Empathy Mapping & Interviews
We conducted interviews with parents representing Thai families, expatriates, and international decision-makers.
Common needs included:
Clear curriculum explanations
Accessible admissions information
Testimonials & trust signals
Event visibility
Communication clarity
Pain points centered around overload, unclear hierarchy, and buried information.
Empathy mapping helped translate emotional drivers into design priorities.
Empathy Mapping
Persona Development
Personas were built to anchor decisions in real motivations:
Thai business families seeking global education
Expat families needing transition clarity
Multicultural households prioritizing communication
Students evaluating school culture
These personas informed navigation structure and messaging tone.
User Persona
4. UX Strategy & Structural Redesign
Sitemap Restructuring
We redesigned the architecture to surface high-priority information:
Curriculum clarity
Admissions flow visibility
Facilities highlights
Social proof
This reduced navigation friction and aligned structure with real decision journeys.
Sitemap
User Flow Optimization
Critical journeys — admissions, curriculum discovery, facilities exploration — were modeled into predictable, low-friction paths.
Each flow emphasized:
Logical progression
Clear decision points
Reduced uncertainty
This increased user confidence during evaluation.
Userflow
UX Writing & Content Hierarchy
We redesigned content structure to support scanning and comprehension:
Chunked sections
Clear headings
Action-oriented CTAs
Emotional storytelling
The result reduced cognitive load while preserving richness.
5. Wireframing, UI Design & Scalable Design System
Once structure was validated, we transitioned into execution — ensuring the experience was not only visually strong but scalable.
Wireframing All Pages
Every key page was wireframed to validate layout logic before visual design.
Goals:
Standardize hierarchy
Reinforce navigation patterns
Ensure reusable layouts
Reduce ambiguity
Wireframes ensured consistency across admissions, curriculum, community, and editorial sections.
(Reference wireframe framework)
Wireframes
UI Design — Experience Translation
High-fidelity UI design emphasized:
Institutional trust
Structured layouts and typographic hierarchy communicate credibility.
Emotional storytelling
Visual modules showcase campus life, testimonials, and student experience.
Clarity-first design
Content prioritization supports scanning and decision-making.
Typography, spacing rhythm, and color hierarchy reinforce cohesion.
Building a Scalable Design System
To future-proof the experience, we created a modular design system governing:
Visual foundations
Primary and accent color palettes
Typography hierarchy
Accessibility considerations
Components
Navigation systems
Breadcrumbs
Announcement bars
Dropdowns, tabs, accordions
Buttons & pagination
Iconography
Layout consistency
Section templates
Spacing standards
Responsive behavior
This system ensures:
Consistent UI language
Faster iteration
Maintainable scalability
Reduced design debt
Rather than designing screens, we built a reusable digital framework.
(Design system overview)
Design System
6. Usability Testing & Validation
Prototype testing validated real-world performance:
Results
Applying to school
→ 100% success rate
Finding curriculum information
→ 100% success rate
Locating extracurricular details
→ High completion confidence
Minor discoverability friction identified and iterated.
Participants consistently reported improved clarity and ease of navigation.
Maze-Report_ASB Usability Testi…
7. Outcomes & Impact
The redesign delivered:
✓ Improved discoverability
✓ Reduced navigation friction
✓ Clear admissions pathways
✓ Stronger trust signals
✓ Better emotional storytelling
✓ Scalable design foundation
The website now functions as a decision-support ecosystem, not just an information archive.
8. UX Principles Applied
Research-driven decision making
Cognitive load reduction
Structural clarity
Emotional storytelling
Validation through testing
Scalable system design
9. Conclusion
This project demonstrates how structured UX methodology transforms institutional websites into confident, scalable decision environments.
By aligning architecture, content, and visual systems with real parent behavior, ASB’s digital experience now supports exploration, trust-building, and enrollment decisions — while remaining future-ready.
เรามาติดต่อกันเถอะ
ติดตาม Asia Media Studio เพื่อรับข้อมูลเชิงลึกเกี่ยวกับการออกแบบและการอัปเดตบน Facebook, Instagram และ LinkedIn.
