Germanic American Institute
Improving navigation, engagement, and program discovery for a cultural non-profit
Overview
The Germanic American Institute (GAI) is a cultural organization dedicated to promoting German language learning, education, and community events. Their previous website struggled with low user engagement, unclear navigation, and fragmented content, making it difficult for users to find programs, events, and key resources.
I led the UX design for a full website redesign, collaborating closely with the Marketing Manager and gathering input from multiple departments—including Communications, Language Programs, Events, and the Institute Director—to ensure the experience aligned with both user needs and organizational goals.
My role: UX Designer and Website Creator
Collaboration: Marketing Manager, Communications, Language Programs, Events, Director
HCD Methods: Competitive analysis, user research, user personas, card sorting, affinity mapping, user flow analysis, low to high-fidelity wireframes, prototypes, usability testing.
Focus: UX research, information architecture, content strategy, UI design
Features: Mega header for streamlined navigation, interactive event calendars, informative resource sections, user-oriented program descriptions.
Tools: Squarespace, Figma, Canva, Usability Hub, Unsplash
Germanic American Institute — Website Redesign
Redesigning a nonprofit cultural institute’s website to improve navigation, program discovery, and member engagement.
Role: UX Designer
Collaboration: Marketing Manager and internal departments
Scope: Research, IA, UX, UI, Squarespace customization
Platforms: Desktop and Mobile
Content & Highlights
Replaced dropdown-heavy navigation with a user-informed mega menu, surfaced the preschool, and added a persistent donate button.
Navigation & Structure
Survey results, in-person card sorting, and usability conversations that informed structural decisions.
Research & Insights
Color contrast fixes, button redesign, spacing improvements, and accessible typography standards.
Accessibility & UI Imp
Eliminating redundant pages, reducing clutter, restructuring content, and introducing clearer landing pages.
Content & Strategy
Adapting layouts and navigation for responsive use, ensuring users can discover and act seamlessly across devices.
Mobile Experience
The Issue
The website made it difficult for users to quickly understand what GAI offers and how to engage.
Programs were buried in dropdown-heavy navigation
The Preschool was hidden under unrelated categories
Donations lacked visibility despite being essential
Pages were cluttered with competing side navigation
Accessibility issues (contrast + typography)
Poor mobile responsiveness
The Goals
This redesign focused on visibility, clarity, and action.
Make programs immediately discoverable from the main navigation
Clearly communicate what GAI offers
Simplify paths to events, classes, preschool, and donations
Improve accessibility (contrast, hierarchy, readability)
Deliver a fully responsive experience
Previous website experience
Old home page
Old navigation close-up
To better understand these challenges from a user perspective, I conducted research with members and staff to identify navigation issues, content gaps, and usability pain points.
The Challenge
Goals
Research & Discovery
Research Objective
To understand how users navigate the site and where they encounter friction, I conducted research with members, learners, parents, and supporters.
Primary User Groups
Members & Event Attendees
Visit the site to discover events, festivals, and lectures.
Language Learners & Parents
Seek clear information about class offerings, schedules, levels, and the preschool.
Supporters & Donors
Look for easy access to donations, membership, and ways to engage with the institute.
Research Methods
62 participants
Multiple-choice and open-ended questions
Key Findings
Programs and events were difficult to locate within dropdown-heavy navigation
Preschool visibility did not reflect user demand
Donation pathways lacked prominence despite institutional reliance
Content density and competing elements increased cognitive load
Survey & questionnaire
15 participants
Participants sorted 45 cards into user-defined categories to reveal how users naturally group and label information.
Objective
Understand how users group and label institutional offerings.
Patterns Identified
Preschool consistently categorized as a primary section
Events and classes expected to live together
Preference for broader, flatter categories over deep dropdowns
Clear separation between programs and community resources
Impact on Direction
Directly informed the restructuring of the primary navigation and mega menu design.
In-person open card sorting
Usability testing (4 participants)
Tested navigation and structure concepts with members and staff, iterating based on feedback.
Survey snapshots
In-person open card sorting exercise
15 participants
Participants sorted 45 cards into user-defined categories to reveal how users naturally group and label information.
Objective
Understand how users group and label institutional offerings.
Patterns Identified
Preschool consistently categorized as a primary section
Events and classes expected to live together
Preference for broader, flatter categories over deep dropdowns
Clear separation between programs and community resources
Impact on Direction
Directly informed the restructuring of the primary navigation and mega menu design.
Cross-Department
Goal
Improve navigation and information structure so users can quickly find programs, events, and the preschool across desktop and mobile.
Problem
The previous dropdown-based navigation buried key offerings, required excessive clicking, and caused confusion—especially on mobile. Important programs like the preschool were hidden within unrelated sections.
Research
Surveyed 62 members and visitors using closed and open-ended questions. Open responses revealed navigation confusion, fragmented content, and difficulty finding events, language classes, and donation information.
Solution
Redesigned the site’s information architecture and introduced a mega menu that organizes content by user intent (Experience, Learn, Preschool, Support), elevates key programs, and reduces cognitive load.
Outcome
Clearer navigation, improved discoverability, stronger mobile usability, and a structure that supports both users and internal teams.
From insights to structure
These findings informed a complete reorganization of the site’s information architecture. Patterns from the open card sorting exercise directly influenced navigation labels, grouping of programs, and the decision to surface key offerings—such as the preschool—at the top level.
Research revealed that users needed:
Fewer navigation layers
Clearer program groupings
Immediate visibility into major offerings
These insights directly informed a new mega-menu navigation system that surfaces programs, events, and the preschool at a glance—reducing friction and helping users orient themselves quickly.
📸 Visual:
Old navigation screenshot → New mega menu comparison
Key Research Insights
Users struggled to understand what the institute offers and where to find key information.
The preschool was difficult to find despite being a major program.
Navigation required excessive clicking through nested dropdowns, increasing cognitive load.
Event and calendar information was difficult to access and plan around.
Language class information was fragmented and hard to compare.
Mobile layouts caused excessive scrolling and frustration
Donation and membership paths were unclear.
Research Synthesis
Survey and usability feedback revealed that while users valued the institute’s programming and sense of community, the website made it difficult to find key offerings efficiently. Navigation felt unintuitive, with important content—such as language programs, events, and the preschool—buried within dropdowns or disconnected from the main site experience. Event and class information was fragmented, donation and membership paths caused confusion, and mobile layouts required excessive scrolling. These insights informed a restructured site map, clearer content hierarchy, and the introduction of a mega menu that surfaced high-priority programs and improved discoverability across desktop and mobile.
Affinity mapping
Affinity mapping of survey responses highlighting user needs, pain points, and what’s working across navigation, events, and programs.
What’s working
Needs
Pain points
IA & Sitemap
Research findings informed a restructuring of the site’s information architecture.
Removed unnecessary pages that repeated information
Created one clear landing page per major section
Eliminated right-side navigation that competed with main content
Removed repeated newsletter boxes and consolidated sign-ups in the footer
Clarified footer language to “Subscribe to the e-newsletter”
These changes reduced ambiguity and helped users focus on content and actions.
Research insights, card sorting exercises, and stakeholder input informed a complete restructuring of the site’s information architecture.
The original navigation grouped content based on internal structure rather than user expectations. To address this, I redesigned the sitemap and navigation labels to better reflect how members and visitors explore GAI’s offerings.
Key improvements included:
Reorganizing content into experience-based categories
Elevating high-priority programs—such as events, language learning, and preschool—to top-level visibility
Reducing navigation depth and clarifying content groupings
Creating a scalable structure that supports multiple departments
This restructuring laid the foundation for introducing a mega menu that would clearly surface all options at once.
Navigation Redesign
Wireframes explored layout, hierarchy, and navigation before visual styling.
Visuals
🧱 Low-fi homepage
🧩 Mid-fi homepage
🧱 Low-fi interior page
🧩 Mid-fi interior page
💡 Tip: Use captions to label fidelity level.
High Fidelity Design
Navigation Redesign & Mega Menu
To address navigation challenges, I designed and implemented a custom mega menu, extending Squarespace’s native functionality through custom code.
The new navigation prioritizes clarity and visibility by allowing users to view all major offerings at once—reducing guesswork and unnecessary clicks.
Previous navigation challenges:
Nested dropdowns obscured important content
Programs were grouped inconsistently
Users had limited visibility into available options
Redesign Navigation - Mega Menu
How Research Informed the Redesign
These insights directly informed the restructuring of the site’s information architecture and navigation. The previous dropdown-based navigation (Events, Language, Support, Resources, About) was replaced with a mega menu that surfaces offerings more clearly and reduces cognitive load.
The new navigation organizes content by user intent, not internal structure, and includes:
Home
Experience (events, festivals, programs)
Learn (language programs, resources)
Preschool (elevated to top-level visibility)
Support
About
A persistent Donate button
This approach allows users to immediately understand what the institute offers and quickly navigate to relevant content across desktop and mobile.
🆚 Old dropdown navigation vs new mega menu
📸 Mega menu open (desktop)
📱 Mobile navigation
A persistent Donate button and search icon were added to improve access to high-intent actions.
Goal: allow users to understand the full scope of GAI’s offerings from a single interaction.
Previous Navigation - Dropdown menu
Visual Design & Accessibility Improvements
In addition to navigation, the redesign focused on improving clarity, accessibility, and visual balance.
Key improvements included:
Reducing heavy use of saturated blue backgrounds
Introducing more white space to improve readability
Using blue strategically for emphasis and section separation
Improving text size and color contrast for accessibility
Designing layouts that accommodate rich photography without overwhelming content
These changes resulted in a cleaner, more modern interface that supports both usability and GAI’s visual identity.
🆚 Old homepage vs new homepage
📸 Interior page showing white space
📱 Mobile page (contrast + spacing)
Mobile
Mobile Experience
Designed responsive layouts to ensure content is accessible across devices.
Visuals
📱 Mobile homepage
📱 Mobile navigation
📱 Mobile calendar
Gallery Block (Vertical layout)
Constraints
Designing Within Platform Constraints
While building the site in Squarespace, I implemented custom solutions to support the intended user experience, including:
Custom code to enable the mega menu
Conditional visibility for desktop vs mobile layouts
Enhancements to navigation functionality, such as a search icon and persistent donate button
These solutions ensured the final experience aligned with UX goals while remaining maintainable within the CMS.
Testing & Iterations
Content
Usability testing with members and staff
Iteration based on feedback
Cross-functional review cycles
Optional Image Block
Outcome
Content
Improved navigation clarity
Easier access to programs and events
Scalable content structure
Visual
📸 Final homepage (desktop + mobile)
Testimonial
“Alexandra is an exceptional UX designer who played a key role in shaping the flow and overall user experience of our website. From early concepting through launch, she provided thoughtful research, clear design rationale, and steady support as we developed our new site.
She is a deeply committed professional who consistently goes above and beyond—asking the right questions, anticipating user needs, and offering solutions that balance usability, aesthetics, and organizational goals. Alexandra’s collaborative approach, attention to detail, and responsiveness made the entire process smoother and more effective.
I am grateful for her expertise and dedication. I would highly recommend Alexandra to any team seeking a UX designer who brings both strategic insight and genuine care to their work.”
Survey snapshot
Card Sorting board
Affinity mapping
nnnnnnnn
Research Goals
What we need to learn to design the right solution:
Identify the primary goals and motivations of users visiting the website
Understand what users seek most from GAI’s online presence
Identify pain points and challenges in navigating the existing website
Evaluate how well the current layout and content meet user needs
Validate navigation structure, content clarity, and overall user flow through usability testing
Competitor analysis
I chose OneRecord and FollowMyHealth
because these popular apps help manage, store personal health records and communicate with healthcare providers in one place.
Analyzed each app based on:
key objectives
overall strategy
marketing advantages
SWOT analysis
UX competitive analysis
Conducted a competitor analysis in order to gain more insights into the current market and user expectations, helping me spot opportunities for my app.
Conclusion
Although OneRecord and FollowMyHealth offer robust platforms for storing medical information, they fall short in providing comprehensive wellness resources, giving the opportunity for others to offer a more holistic health management experience.
Survey
Created a user survey because I wanted a way to reach a broad audience. I used Google forms and shared on my social media and via email.
17 people participated
Target audience: health conscious individuals, 18+
Combination of multiple-choice questions and open-ended responses (see example below)
Survey Insights:
Major challenges: balancing work and personal life.
Helpful techniques to manage health: regular physical activities & healthy eating.
Goals: Form habits, improve fitness and mental health, reduce irritability, tips/tricks for time management and achieve goals, better organization, better quality of life, focus on the moment, weight management, tools for better mental health such as stress and anxiety, goals tracking, consistency and happiness.
Desired features: Personalized goal-setting and goal tracking, workout routines, recipes, stress management techniques, games, reminders, mood tracking, health and wellness articles, integration with wearables devices, sleep tracking and recommendations.
Interview
Conducted 3 user interviews in order to observe behaviors and facial expressions, gaining deeper insight into the emotions and experiences of people.
Interview script in order to give people a quick overview of the purpose of the interview.
11 open-ended questions focused mainly to better understand characteristics, behaviors and motivations of potential users. Identify needs, pain points and challenges, what kind of support do users seek, and what they hope to achieve in a health and wellness app.
Research Analysis
By asking WHAT? HOW? & WHY?
I gained access to insights into users’ needs, motivations and challenges.
Affinity Mapping
Created an affinity map in order to synthesize my research data, categorize user feedback, identify patterns and highlight key insights.
Key Insights
Users have a deep concern for their physical and mental health.
They seek to take control and be proactive in managing their overall wellness.
They desire assistance with organization, categorization, reminders and progress tracking.
Their goal is to achieve a balanced life and become their best selves through improved eating habits, health education, stress management, meditation and continuous self-improvement.
User Personas
Created 3 user personas to better understand and address the diverse needs and behaviors of Vita Sanus' potential users in order to ensure it meets their health and wellness goals.
These personas helped me to understand the target audience in a better way and make sure I could design with a user-centric approach.
These 3 personas reflect some of the main target users and their expectations. This allowed me to effectively design towards meeting their needs, and providing a user experience that meets their expectations.