HmongWomen.Org Website Design

Non-Profit Work - Case Study

Hnub Tshiab - Hmong Women Achieving Together (HWAT) is a national organization that empowers and advocates for Hmong American women and girls through education, leadership development, and community organizing. Their mission is to be a catalyst for lasting cultural, institutional, and social change to improve the lives of Hmong women.

Opportunity

Based in the Twin Cities of Minnesota, Hnub Tshiab (HWAT) supports women and girls in Hmong communities nationwide through grants, personal and professional development, and multi-generational cultural programming. This case study outlines the volunteer opportunity I had to partner with Hnub Tshiab to provide UX consultation and design recommendations for their live website, HmongWomen.Org.

Challenge

Powered by a volunteer board of Hmong women professionals, HWAT operates with a small, dedicated team that must take on various organizational responsibilities. As a result, the non-profit’s current website provides general information and is a place for supporters to donate and learn more. HWAT’s goal is to highlight its mission and story and better showcase ways people can get involved with programs or donate.

Role

Role: UX Designer and Researcher

Tools & Programs: Figma, Figma Community, Google Drive, PowerPoint, Photoshop

Methods

  • Heuristic Analysis

  • Accessibility Review

  • Stakeholder Meetings

  • UX Strategy

  • User Flows and Site Mapping

  • Style Guide Development

  • Wireframes

    • Low Fidelity Sketches

    • High Fidelity Wireframes

  • Prototyping

    • Interactive Website and Mobile Views

    • Component Building

    • Design System Development

Results

Working with the board members of Hmong Women Achieving Together, I developed a strong understanding of HWAT’s history and current and future goals for the organization. Keeping in mind HWAT’s primary goal for the website, showcasing its story and community impact, and prioritizing accessibility and quickly actionable updates, these key screens and features were conceptualized and designed:

  • Home page

  • About Us and Endowments

  • Donation Page

  • Greater community engagement and call to action

I could incorporate their expertise and passion for the organization into my website design recommendations by meeting and staying in touch with the board members. This approach infuses their energy and enthusiasm for the organization’s mission and vision into the design, resulting in a dynamic website that can effectively tell its story and inspires visitors to take part or support.

The Results

Website Prototype & Style Guide

The deliverables of a simple style guide and website prototype for Hmong Women Achieving Together (HWAT) are designed to provide a cohesive and visually appealing online presence for the organization. The style guide can also save time and resources by streamlining the design process. In the next stages of updating the website, web developers can refer to the guide for inspiration or support as they implement favorable recommendations.

Impact of the Home Page

A nonprofit's home page is crucial in conveying its story and mission to potential supporters, as it can influence their decision to engage with the organization. I curated the visual and written content into an engaging, scrollable experience that would feel welcoming and centered on community.

  • The home page banner showcases rotating images from HWAT's programming.

  • Include both organization names (Hnub Tshiab and HWAT) in screen reader accessible text.

  • A quick introduction to Hnub Tshiab can encourage visitors to keep scrolling and learn more.

Layout and Content Order

Top of HWAT’s Proposed Home Page

  • Including a variety of media content can engage with more users.

  • Displaying the faces of HWAT's community can create a sense of welcoming openness and inclusion.

  • Establishing a tone and personality for the organization in initial visual components, colors, and written voice will carry on throughout the website.

Visuals and Creating Tone

Engagement and Call to Action

  • A donate section is crucial to HWAT's website goals.

  • Interactive features like donate and learn more buttons can boost user engagement.

  • Home page call-to-action features simplify contribution without searching entire site.

Get Involved Section of Home Page

  • Quotes, testimonials and program videos build trust and engage users.

  • They increase understanding of the organization's mission and boost support.

  • A strong voice is established, fostering an engaged community.

Community Building

Community and Impact Section of Home Page

Reimagining “About Us” Section

HWAT’s original About Us section consisted of 6 separate pages found through the top menu. My recommendations combine 4 of those pages into one main About Us page and combining two endowments pages together, as well as adding an FAQ page. Instead of 6 separate pages, nav links were turned into anchor links which still allow for quick access to specific sections of the About Us content, while centralizing the information in one scrollable page.

  • Create a clear and organized website structure, making it easier for users to navigate and find information.

  • Establish a professional and polished image for the non-profit.

  • Developing sections within the About Us page improves scanability and supports the use of anchor links to navigate the content.

Consistent Headings

HWAT’s Mission and Organizational Change Framework

Visual Storytelling

  • By reorganizing the original text-heavy content and incorporating visuals makes information easier to digest and remember.

  • As HWAT continues to provide programming, they have options to update photos or videos to the About Us sections.

  • This allows HWAT to showcase the organization is active, responsive, and continually growing.

HWAT’s History and Visualization as a Timeline

Board Members Section

Call to Action Section of About Us Page

Endowments, FAQ, and Donate

The endowment, FAQ, and donate pages are crucial for non-profit websites. The endowment page showcases future goals, the FAQ page builds trust, and the donate page provides an easy way to give and understand impact. Together, they create a compelling online presence for HWAT to inspire support.

  • The Endowment page provides an overview of the organization's long-term financial goals and showcases its commitment to the community.

  • The Donate page needs to be easy to navigate, user-friendly, and secure. Providing multiple giving options, current projects can be added here to give a clear understanding of how contributions will be used.

  • The FAQ page is an essential resource that helps potential donors get answers to their questions quickly and efficiently.

The Process

Initial Analysis and Feature Components

When redesigning HWAT’s website, a thorough heuristic analysis was crucial to understanding its strengths and weaknesses. Once complete, meeting with the board members and taking detailed notes helped me identify key goals, preferences, and requirements for the new design. Using this information, I developed a design library of consistently styled components. This ensures a cohesive and visually appealing design that is easy to navigate while also communicating HWAT’s mission

Designing a consistent component library

By following a basic style guide, the design system maintains a cohesive look and feel throughout the website, providing a sense of familiarity and making it easier for users to navigate.

Key Components

  • Colors and fonts were tested for accessibility and are inspired by HWAT’s logo.

  • Interactive features like menu options and buttons have different styles for normal and hover states to create strong contrast and visibility of status.

  • Iconic symbols from Hmong textiles were turned into a component that can be easily placed and switched for use sections across multiple pages.

  • Card design is utilized to organize content and actions in a familiar intuitive way.

Next Steps

Before designs can be finalized and handed off to a web developer to implement, there are few next steps I as a UX designer and HWAT can take to ensure their website meets all the needs and goals of the people they serve.

  1. Conduct user testing to gather feedback and identify areas for improvement

  2. Refine the prototype based on user feedback and test again

  3. Confirm accessibility standards across various platforms and devices

  4. Finalize and annotate designs and wireframes

  5. Work with web developer or website manager to enact and monitor updated designs