top of page

Yiddishland CA Navigation

Yiddishland California

Navigation/Responsive Website

The Yiddish Arts and Academics Association of North America (YAAANA) promotes and preserves Yiddish language, culture, and arts through events, workshops, and educational programs. The UX design case study focuses on improving website navigation to provide intuitive access to Yiddish resources, fostering community engagement and celebrating Ashkenazi Jewish heritage.

Project Duration:

August 2023 - November 2023

Basic Layout idea_2x-left.png

Project overview

The problem:

The nonprofit's website faces challenges including complex navigation, low user engagement, limited accessibility, inconsistent content organization, and a lack of community interaction. To address these, a content audit can identify key topics, streamline the navigation menu by grouping related content, reducing layers, and using clear labels. This ensures easier access to Yiddish cultural resources while fostering user satisfaction and inclusivity.

The goal:

The UX design case study aims to improve website navigation, providing intuitive access to Yiddish language, literature, music, and traditions. By enhancing usability through user-centric design, the project celebrates Yiddish culture and fosters community engagement and connection within and beyond Jewish communities.

My role:

UX designer, UX researcher, Visuals, Interactions

My responsibilities:

Conducting user research, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs

User Research

During the user research phase, we conducted in-depth interviews, surveys, and usability testing to gain insights into the preferences, behaviors, and needs of the average website visitor.  We sent out various surveys, card sorts, tree tests, and user tests. Compiling the data has led to key pain points to work on.

​​​

Pain point/findings:

  • Landing Pages

  • Condensing Information

  • Hierarchy/Organization of navigation

  • Visual design

  • Clarity on categories

Competitive Audit

The competitive audit revealed key strengths and weaknesses across the navigation structures of non-profit websites. Successful designs, such as those from World Wide Fund and United Nations, use clear category-based menus and robust search tools, making it easy for users to find relevant content. However, overly complex or text-heavy navigation can overwhelm users. Accessibility features ensure inclusivity but are inconsistently implemented across competitors, with some sites neglecting text resizing and screen reader compatibility. Interactive and engagement features effectively foster community connection but are often underutilized elsewhere. Overall, the findings emphasize the importance of streamlined navigation, clear labeling, robust accessibility options, and engaging community-driven features to enhance user experience and satisfaction.

Key points that can be improved on:

  • Simplify Navigation

  • Enhance Accessibility

  • Foster Engagement

  • Improve Search Tools

  • ​Highlight Key Actions

Design

Sitemap

Screenshot 2023-09-08 at 2.02 1.png

Incorporating the insights gathered from the tree and card tests, we made a site map of what the future navigation would look like and try to condense information as much as possible while keeping the client's needs in mind.

Design system/Breadcrumbs
Breadcrumbs.png

The client’s choice of yellow and purple as the primary brand colors provides a strong foundation for a design system centered on a royal theme. These colors historically symbolize wealth, power, and sophistication, with purple often associated with royalty and yellow representing optimism and prestige. Building the design system around this palette allows for the creation of a cohesive and visually striking brand identity. Incorporating regal motifs, such as elegant typography, luxurious gradients, and ornate patterns, will further reinforce the theme. The combination of these elements ensures that the brand feels both accessible and grand, honoring the client’s vision while providing a polished, professional aesthetic.

​

The button design emphasizes both aesthetics and accessibility to ensure usability for all users. Buttons feature a high-contrast color scheme, pairing the brand’s yellow and purple hues to maintain visibility even for individuals with visual impairments or color blindness. The text within the buttons is bold and uses a legible, sans-serif font, ensuring clarity at any size. Buttons are designed with generous padding and distinct hover states, providing clear visual and tactile feedback. Additionally, the buttons are fully keyboard-navigable and screen-reader compatible, with accessible labels to support users relying on assistive technologies. These design choices prioritize inclusivity while maintaining a cohesive and visually appealing style.

​

Click here to view the design system

Final mockup
Screenshot 2023-09-27 at 9.56 1.png
Basic Layout idea_2x-portrait.png

After thoroughly double-checking accessibility for text and design, the final mockup was created, incorporating all findings and best design practices. The design integrates the brand’s yellow and purple color palette, emphasizing a royal theme with clear, high-contrast visuals and an intuitive layout. Accessibility features, such as legible fonts, ample spacing, and keyboard-friendly navigation, ensure usability for all. The mockup reflects a refined design system, seamlessly aligning aesthetic appeal with functionality, while addressing key user needs. By implementing the insights gained through research and the competitive audit, the mockup delivers a cohesive and user-centric experience that celebrates the client’s mission and vision.

​

​The final phase involved implementing a functional test of the search and call-to-action (CTA) buttons using HTML/CSS and WordPress on the client's testing site. Special attention was given to the design and placement of these elements to ensure usability and alignment with user expectations. The search bar was designed to be prominent and intuitive, featuring autocomplete functionality and clear labels for accessibility. CTA buttons, styled with the brand’s yellow and purple color palette, were strategically placed to guide users toward key actions, such as “Donate” or “Tours.” Both elements were tested for responsiveness, accessibility compliance, and seamless functionality across devices and browsers. This testing phase ensures the design system transitions effectively from mockup to implementation, maintaining both aesthetic and functional integrity.

​

Social media icons were applied at the bottom of the page, providing easy access for users to connect with the brand across various platforms. This integration encourages community engagement and allows users to stay updated with the latest content and events. Additionally, the mockup on the right demonstrates the full navigation structure, with all submenus opened, highlighting the comprehensive organization of resources. This visual representation ensures users can easily explore the site’s content, showing how the design accommodates deeper navigation without feeling overwhelming or cluttered.

Basic Layout idea-1.png

Takeaways

Impact:

The design improvements have significantly enhanced the user experience, making it easier for visitors to navigate the site and access valuable resources related to Yiddish culture. By focusing on accessibility and intuitive design, the project fosters greater engagement with the community, helping to preserve and promote Yiddish heritage in a more user-friendly environment. The integration of social media further amplifies community connection, ensuring the brand’s reach extends beyond the website.

What I learned:

Through this case study, I gained a deeper understanding of balancing aesthetic appeal with functional usability in non-profit web design. I learned the importance of conducting thorough accessibility checks and user testing to ensure a seamless experience for all users. Additionally, I realized the significance of aligning design decisions with the client’s brand values while also addressing the needs of the target audience.

Next steps:

The next steps would involve gathering user feedback through usability testing to identify any further pain points or areas for improvement. Additionally, implementing ongoing performance monitoring and adjusting the design based on user interactions will ensure the site remains functional and engaging. Moving forward, incorporating dynamic features, such as personalized content or more interactive community-building tools, could further enhance the user experience and promote sustained engagement.

Thank you for your time reviewing my work on Yiddishland! If you would like to see more or get in touch please contact me at:

 

Email: connieliu000@gmail.com

Website: https://connieliu000.wixsite.com/connie-liu 

Linkedin: https://www.linkedin.com/in/liu-connie/ 

bottom of page