Mountain Communities of the World

Initial Research, Inspirations & Readings

Research Data Points:

The project began with research into global mountain community statistics and challenges. Key data points that informed the content include:

• Over 1 billion people living in mountain regions worldwide
• Mountains housing approximately 25% of terrestrial biodiversity
• Mountains providing 60-80% of the world's freshwater resources
• Hundreds of indigenous languages and cultures found in mountain areas
• Mountain regions experiencing climate change at twice the global average rate

Research extended to understanding the specific communities featured, including Quechua people in the Andes, Sherpa and other Himalayan communities, Berber villages in the Atlas Mountains, and various other mountain-dwelling cultures across six continents.

Concept Formation & Early Mappings

The concept evolved from a simple informational site to an interactive exploration platform. Early ideation explored different ways to present the information:

• A two-column split-panel layout for the About section emerged as a way to maintain visual engagement (video) while presenting dense informational content
• The carousel concept for the Explore page developed as a means to showcase multiple communities without overwhelming the user, using center-mode to focus attention while allowing exploration
• The interactive map concept grew from the need to make geographic connections clear and discoverable, using clickable hotspots positioned over a world map image
• System diagrams mapped out the user flow: Home (hero introduction) → About (detailed information) → Explore (community profiles) → Map (geographic exploration) → Contact (engagement)
• The SPA routing pattern for Home/About sections was conceived to create a seamless transition experience while maintaining the video hero element

Goals & Constraints

Goals:

• Create an educational resource that effectively communicates the importance of mountain communities to a diverse audience, combining statistical data with visual storytelling to make complex topics accessible and engaging
• Design and develop a fully accessible website that meets WCAG 2.1 AA standards, ensuring the content is available to users with various abilities and assistive technologies
• Build a performant, responsive website that works seamlessly across all device sizes, from mobile phones to large desktop displays, with optimized media loading and smooth animations

Constraints:

• The website must function as a static site without server-side processing, requiring all interactivity to be handled client-side through JavaScript
• All accessibility requirements must be met without compromising the visual design or user experience, requiring careful attention to ARIA labels, keyboard navigation, and screen reader compatibility
• The design must be responsive across a wide range of screen sizes, with breakpoints at 980px, 768px, 640px, and 480px, requiring flexible layouts and fluid typography
• Video and image assets must be optimized for performance while maintaining visual quality, balancing file size with user experience

Wireframes, Sitemaps & Storyboards

• Home page features a full-width hero video with animated title overlay
• About section uses a two-column layout with sticky video on the left and scrollable content panel on the right, accessible via hash routing (#/about) from the home page
• Explore page presents a center-mode carousel showcasing four mountain communities
• Map page features an interactive world map with clickable continent hotspots that populate an information panel
• Contact page contains a proof-of-concept validated form for user engagement

Style Guide, Typography & Color Systems

The visual language is built around an earth-tone color palette that reflects the natural environments being represented:

• Primary color: Sage green (#7f9278)
• Secondary colors: Clay (#b98343) and rust (#b25434) accent elements
• Supporting colors: Foam (#9fb49f) highlights, warm neutral background, and dark ink (#1c2024) text
• Typography system: Two custom font families: Ayr Saturday Night Interlock serves as the display font for hero titles, with three color-coded lines that animate in sequence; Antique Olive Std (Roman and Light weights) serves as the body font family, providing a distinctive, readable character
• Type scale: Uses fluid clamp() functions for responsive sizing

Accessibility Decisions

• Semantic HTML structure: Uses proper heading hierarchy, landmark regions (header, main, aside, section), and form elements with associated labels
• ARIA implementation: Includes aria-label attributes for icon-only buttons and decorative elements, aria-live regions for dynamic content updates (screen reader announcements), aria-pressed states for interactive map hotspots, and role attributes where semantic HTML isn't sufficient
• Keyboard navigation: All interactive elements are keyboard accessible, focus indicators are clearly visible, tab order follows logical content flow, and Enter/Space key activation works for all buttons and interactive elements
• Focus management: Includes programmatic focus for screen reader users
• Motion preferences: All animations check for prefers-reduced-motion media query, animations can be disabled for users who prefer reduced motion, and essential functionality works without any animations
• Form accessibility: Real-time validation with clear error messages, aria-invalid attributes for invalid fields, aria-describedby linking errors to inputs, and honeypot field for spam prevention without impacting accessibility

Interaction Highlights

• Hero video transitions
• Page fade transitions
• Carousel navigation
• Interactive map hotspots
• Form validation

Components Built & Media Created

• Hero video component: A reusable element containing HTML5 video element with poster image, autoplay, loop, and muted attributes for performance, three-line animated title overlay with custom display font, and JavaScript logic to move between page contexts
• About split-panel layout: Features left column with sticky-positioned video (stays visible while scrolling), right column with scrollable content panel, matching heights using flexbox and calc() viewport calculations, and smooth transitions when navigating between home and about
• Explore carousel component: Integrates Slick Carousel library with center mode configuration, custom SVG arrow buttons with accessible labels, responsive breakpoints adjusting slides shown (3 → 1 on mobile), and image optimization with lazy loading
• Interactive world map: Includes world map image with aspect ratio preservation, six clickable hotspot buttons positioned using CSS custom properties (--x, --y), dynamic content rendering in left panel based on selection, and keyboard-accessible interaction patterns
• Contact form component: Features semantic form structure with proper labels, real-time validation with clear error messaging, honeypot field for spam prevention, and accessible error announcements
• Responsive navigation system: Provides sticky header that remains visible during scroll, active state indicators for current page, smooth fade transitions between pages, and mobile-optimized layout
• Custom font loading system: Implements @font-face declarations for display and body fonts, font-display: swap for performance, and fallback font stacks for reliability

User Testing & Feedback

Visual Polish

Based on user feedback, visual refinements focused on creating a cohesive, polished experience. Color palette was refined to ensure sufficient contrast ratios for accessibility: text on sage green background meets WCAG AA standards, and color combinations were tested for colorblind accessibility. Spacing system was standardized using CSS custom properties and clamp() functions, ensuring consistent rhythm across all pages while remaining responsive. Responsive breakpoints were tested and refined: 980px breakpoint switches about layout from two-column to single column, 768px optimizes carousel for tablet viewing, 640px adjusts map layout and touch targets, and 480px ensures mobile usability with appropriately sized interactive elements.

Adjustments for Clarity, Storytelling & Accessibility

Several refinements were made to improve communication and usability:

• ARIA labels enhanced
• Focus indicators improved
• Visual hierarchy clarified
• Accessible form error messaging
• Mobile layouts optimized

Product Delivered

The final product is an educational website that successfully communicates the importance of mountain communities through engaging visual storytelling, interactive exploration, and accessible design. The platform combines photography, video, statistics, and geographic data into a cohesive experience that serves educators, students, researchers, and the general public. The website demonstrates how thoughtful information design and user experience can make complex environmental and cultural topics accessible and engaging. Through its responsive design, comprehensive accessibility features, and performance optimizations, the site ensures that the critical message about mountain communities' importance and challenges reaches the widest possible audience. The project successfully balances aesthetic appeal with functional requirements, creating a platform that is both beautiful and usable.

What I Learned

• GSAP Flip plugin experience: Understanding how to capture element state, animate complex position and size changes, and integrate with routing systems opened new possibilities for creating seamless user experiences
• Accessible form validation patterns: Implementing real-time validation with proper ARIA attributes, error messaging, and user feedback taught the importance of inclusive design from the ground up
• Advanced responsive design techniques: Using CSS Grid and Flexbox together, implementing fluid typography with clamp(), and creating truly responsive layouts that work across all devices required deep understanding of modern CSS
• Performance optimization for video assets: Balancing visual quality with load times, implementing poster images, and using appropriate video attributes (autoplay, loop, muted) taught important lessons about media optimization
• SPA patterns without frameworks: Building single-page application functionality using vanilla JavaScript and hash routing demonstrated that complex interactions don't always require heavy frameworks, leading to better performance and maintainability

Challenges & Breakthroughs

Challenges:

• Implementing smooth hero transitions between layouts
• Ensuring accessibility while maintaining visual appeal
• Creating responsive carousel with custom controls
• Balancing animation performance with user experience

How the Project Shaped My Design Philosophy

• Emphasis on accessibility as foundation: Integrating accessibility from the initial design phase rather than adding it later resulted in a better product overall. This experience reinforced that accessible design is simply good design—clear information hierarchy, logical navigation, and thoughtful interactions benefit all users
• Content-first approach to information design: Prioritizing the educational content and ensuring it's immediately accessible led to design decisions that serve the user's goals rather than decorative aesthetics. This reinforced the importance of understanding user needs and designing to meet those needs
• Respect for user preferences: Implementing reduced motion support and ensuring the site works without JavaScript taught the importance of respecting user agency and providing options rather than forcing a single experience
• Clean, minimal aesthetic that serves the content: The earth-tone palette and minimalist design emerged from the need to let the photography and content shine, not from arbitrary aesthetic choices. This reinforced that design should enhance content, not compete with it
• Performance and accessibility as user experience: Optimizing for performance and ensuring accessibility are considerations of the user experience. A slow, inaccessible site fails its users regardless of how beautiful it looks

Future Plans

Features to Add or Extend:

• Backend integration for contact form: implementing server-side form processing to enable actual message submission, with email notifications and potential database storage for inquiries
• Expand community profiles with more detailed information: adding deeper content for each featured community, including history, cultural practices, current challenges, and conservation efforts, potentially with individual detail pages
• Add search/filter functionality: implementing search capabilities to help users find specific communities, regions, or topics of interest, with filtering by continent, climate challenges, or cultural characteristics
• Implement data visualization for statistics: creating interactive charts and graphs to visualize the statistical data, making trends and relationships more apparent and engaging

Technical Improvements:

• Consider CMS integration for content management: implementing a headless CMS would allow non-technical users to update content, add new communities, and manage the site's information without requiring code changes. This would make the platform more sustainable and easier to maintain long-term

Mountain Communities of the World represents a synthesis of technical skill, design sensibility, and social consciousness, demonstrating how digital platforms can serve educational and advocacy purposes while maintaining high standards for user experience and accessibility. The project bridges cultural awareness, environmental consciousness, and accessible web design, creating a platform that not only informs but also engages and inspires action. Through its thoughtful information architecture, responsive design, and comprehensive accessibility features, the website ensures that critical messages about mountain communities' importance and challenges reach diverse audiences across as many devices and abilities as possible. The work showcases proficiency in modern web technologies, animation, and user experience design while maintaining a commitment to inclusive design principles. As a portfolio piece, it demonstrates the ability to balance aesthetic appeal with functional requirements, technical implementation with user needs, and creative vision with practical constraints—skills essential for creating meaningful digital experiences that serve both users and the causes they support.