NONPROFIT AUSTIN

Enhancing understanding and navigation through organization.

Reorganizing menus and page content to help increase ease of navigation, friendliness to new users, and professional presence.

View Final Designs

CLIENT

Nonprofit Austin

ROLE

UX Designer (1 of 4)

TIMELINE

Dec 2024

STATUS

Closed

Overview

Background

Nonprofit Austin, a 501c3 nonprofit dedicated to helping others learn how to form their own nonprofits, had a fairly complex and confusing site organization as a result of internal site growth over several decades. They reached out for help after learning that newcomers weren't able to navigate their site or understand their mission.

Problem

Users were overwhelmed by the site and unable to complete basic usability tasks. They had difficulty navigating a split multi-level navigation, were confused by jargon-heavy content, had difficulty reading long paragraphs of very small body text, and felt that pages were inconsistent and confusingly laid out.

How might we make Nonprofit Austin more accessible to newcomers?

Solution

The core of the redesigns centered around restructuring the main navigation into a single menu menu, instead of a split multi-level format. I also focused on increasing the font size and minimizing the word count and use of jargon. Finally, we worked together as a team to create more consistent site-wide designs.

Access everything

With the new mega menu.

Every page is always accessible, organized in a single mega menu. No more need to remember specific pathways to important pages.

Skim content quickly

With the new simplified tables.

Tables have been redesigned to a new consistent style across all pages. Enjoy faster scanning with fewer words in each table cell.

Find specific resources

With new header sections for resource links

Resource pages have now gained header sections, making it faster to find the exact resources that pertain to your needs.

Project Shortcuts

Short on time, but want to learn more? Consider one of the following options instead of reading the design process.

Watch Presentation

View Final Designs

The Design Process

01

Research

Heuristic evaluation
Usability tests

02

Restructure

Web crawl
Current sitemap
Proposed sitemap

03

Redesign

Navigation design
Low fidelity designs

01 | Research

Heuristic Evaluation

Each team member, myself included, conducted individual heuristic analyses of the Nonprofit Austin website. I used both usability heuristics and content heuristics, focusing on 6 stakeholder-requested pages from the original site. I then created a spreadsheet that auto-calculated which findings the group found most important.

Font Size

Accessibility

The main body font of the site was too small to be accessible (12 pt font on mobile, tablet, and desktop)

Mobile Table Format

Recognition rather than recall

Large tables on desktop would split in half on mobile, making their content difficult to parse and decipher.

Two-Level Navigation

Appropriate structure

The two-level split navigation was so unusual that it violated Jakob's Law (users spend more time on sites other than yours).

Membership Names

Consistency and standards

Membership tier names were referenced inconsistently across the entire site, making it difficult to understand benefits.

Inconsistent Titles

Information scent

Some pages were referenced by multiple different names, including differences between the menu and page title.

Broken Links

Completeness

The "Resources" page was a long list of unsorted links, over a third of which were broken or incorrect.

Usability Tests

I conducted 2 of 5 usability tests, asking users:

Where they would go to learn more about funding a nonprofit they were wanting to start
Where they would go to become a member of Nonprofit Austin

Of 5 participants:

were able to complete both tasks, even with prompting.

found pricing tiers, but not how to become a member.

pointed out a wrong form for becoming members.

The main culprits?

Bad Labeling

There was a disconnect between the navigation labels, page names, and what users expected to find.

Navigation Structure

Two disconnected levels of navigation deviated too much from normal organization, and users couldn't navigate the site.

Too Much Jargon

There was too much jargon used across the website and users couldn't understand the content or purpose.

“I give up. At this point I’d close the website. I don’t feel like I’m able to find what I’m looking for”

02 | Restructure

Web Crawl

I conducted an automated web crawl to quickly familiarize myself with the website content, categorizing pages by the current navigation tab they were under and labeling what their primary purpose or layout was.

A screenshot of some categorized data from the web crawl (Google Spreadsheet).

Current Sitemap

I created a sitemap of the current state of the website at the time of redesign and discovered that a large portion of the site's content was linked exclusively in their 'Resources' page, which was a large list of uncategorized links to resources both internal and external (a third of which were outdated or broken).

When explaining their site to us, Nonprofit Austin employees sent links from the 'Resources' page multiple times, indicating that the "Resources" page contained important information, which was not apparent by how the page was being treated.

A sitemap of the current state of the website at the time of redesign.

Proposed Sitemap

I realized I needed provide contextual labels with clear and common language, to help users learn what Nonprofit Austin's custom-named services actually offered. I decided on a mega menu structure to do so. Users might not know what "CommunitySpace" is, but it's easier to infer if it's listed under "Services".

This proposed sitemap used the same indexing system as the current state sitemap and web crawl, to make it easier for their web team to cross-reference deliverables.

A sitemap of the proposed state of the website organization post-redesign.

03 | Redesign

Navigation Design

I then created mid fidelity mockups of the mega menu based on the proposed sitemap, to give the web team an easier to visualize concept. Since Nonprofit Austin focused on providing help and resources, I wanted to ensure the majority of their content was visible to users from every page.

All states and dropdown content of the navigation menu when we began redesigns (left/top) versus the proposed mega menu redesign (right/bottom).

Low Fidelity

As a group, we then met to sketch some ideations and discuss some basic directions from the current website that we wanted to keep. We each took ownership of 1-2 of the 6 total pages for this redesign. I chose the CommunitySpace and Grant Research Center pages, which were the two pages that had multiple navigation levels.

A portion of low fidelity screens created during the first round of iteration. The 2nd and 4th wireframes in this series were my responsibility.

Final Designs

Due to timeline constraints, the client was aware this project would end with mid fidelity wireframes, which would not undergo dedicated usability testing. I provided an interactive prototype to the Nonprofit Austin team so they could conduct their own testing if they wanted more data before adopting our recommendations.

View Figma Prototype

CommunitySpace

Redesigned by me

Navigation: Removed second navigation tier and consolidated into single mega menu. Added hero anchor links to common sections

Information Visibility: Reworded the about section, highlighting location, hours, contact

Service Relationships: Added cards for all services offered by CommunitySpace, with brief explanations and CTA buttons

Memberships: Reduced the membership comparison to 3 summary cards, giving users CTAs to "Become a Member" or "Learn More"

Consistency: Reworded the Equity Statement to match the 3C Development page, and added an FAQ to match other pages

Grant Research Center

Redesigned by me and Omar Villa

CTA: Added CTA to schedule an appointment (a required step to publicly access this service), and added a CTA section become a member after the benefits table

Information Visibility: Added about section to help users understand what the GRC does

Consistency: Reworked the 'Public vs Member Access' table in the 3C Development style, and moved the FAQs to the bottom

3C Development

Redesigned by Omar Villa

CTA: Moved the "Application" CTA to a more compelling location and added a secondary CTA to the bottom of the page

Tables: Restructured the hierarchy and coloring, and reworded content to minimize the amount of information in each cell

"Other Services": Restructured content to more clearly represent what it means

Events

Redesigned by Han Tran

Title: Renamed the page to "Events" for consistency (was previously referred to as different things across the site)

Search: Increased size of search bar and added more filtering, sorting, and pagination

Hierarchy and Info: Increased the visual separation of months and added more info (pricing, location, time, date) to event cards. Removed unnecessary image section.

CTA: Added "Buy Tickets" and "Learn More" buttons to each event

Certificates

Redesigned by Tony Till

Accessibility: Moved text from the hero into a dedicated about section, reduced the alumni photos to a 1x3 carousel section, and added photo captions

CTA: Added "Register Now" and "Learn More" buttons on each card to increase affordance

Alignment: Fixed "Registration Open" tag alignment, increased padding around statistics section, and horizontally aligned the testimonials section

Resources