PROJECT TYPE
User Experience Design,
Information Architecture
ROLE
Project Manager,
IA Consultant,
Co-Designer
TEAM
Kayleigh Malik,
Omar Villa,
Han Tran,
Tony Till
TIMELINE
Dec 2024
(3 weeks)
Project Overview
Problems
Nonprofit Austin grew their site internally over decades of adding new services, which led to a fairly complex and confusing site organization. We were contacted and asked to help them:
​
-
Improve their site navigation
-
Help new users understand their business more easily
-
Increase the professionalism of their online presence
-
Make their site more accessible and responsive
Solution
We provided a set of mid fidelity wireframes to address the requested issues. While usability testing on our redesigns was not part of the project scope, we provided an interactive prototype for if they wished to conduct any testing of their own.
​
The core of our redesigns centered around:
​
-
Reorganizing the site content
-
Restructuring the navigation from two separated levels into a single mega menu
-
Enforcing a consistent design system for fonts, card layouts, and tables
-
Increasing font size, reducing word count, and using more targeted words to increase readability scores
The Design Process
01
Research
02
Restructure
03
Redesign
04
Present
05
Reflect
01 | Research
Project Plan
The first step I always take to help projects stay on track is to create a detailed project plan with the project background, process steps, timeline, and an asset management table. Throughout the project, this plan proved to be a valuable foundation that my team used to remain grounded.
A screenshot of the project plan document, created using Google Docs., showcasing the timeline and asset management portions of the plan.
Heuristic Evaluation
We each conducted our own heuristic analyses, using both usability heuristics and content heuristics, of 6 key pages from the original site. After, we each voted on our perceived importance of each finding in a spreadsheet that auto-calculated which findings the group found most important across all the pages being evaluated.
We determined two main issues that we wanted to focus on:
Font Size
-
The base font size on desktop was set to 12px
-
Too small to pass accessibility tests
-
Too much text, with too small of font, made reading difficult
2 Navigation Levels
-
An unusual navigation pattern violated Jakob's Law and we suspected it would cause issues in our usability testing
-
We made sure to create usability tests that would require use of this navigation system
Usability Tests
For usability tests, we simply asked users to accomplish two tasks:
​
-
Learn more about funding their (hypothetical) nonprofit
-
Where they would go to become a member of Nonprofit Austin
​
No participants successfully completed either task, stating that they could not find the information. When asked their thoughts about the site, we found 3 key factors behind user confusion:
​
-
Disconnect between the navigation labels and what users expected to find
-
Using 2 levels of navigation deviated too much from organizational norms
-
Too much internal jargon for incoming users to understand what labels meant
One participant even said:
“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 a basic web crawl to quickly familiarize myself with the website content and categorized pages by the current navigation tab they were under and what their primary purpose or layout was.
A screenshot of some categorized data from the web crawl Google Spreadsheet.
Current Sitemap
I created a current state sitemap and discovered that a large portion of the site's content was linked exclusively in their 'Resources' page, which was a list of links to resources both internal and external (many of which were outdated or broken).
When explaining their site to us, I noticed that the Nonprofit Austin team sent us several resources from the 'Resources' page multiple times. This clearly indicated the resources were important, but they weren't linked on any other site pages.
.png)
A sitemap of the current state of the website at the time of redesign.
Proposed Sitemap
I restructured the pages around the idea of having top level dropdown labels that used clear and common language to help give users context clues about what each label meant. Users might not know what "CommunitySpace" is, but if it's listed under a "Services" dropdown, it's easier to understand where it fits into the bigger picture.
​
I also provided annotations for recommended page removal, page combining, and new page creations.
​
This proposed sitemap used the same indexing numbers as the current state sitemap AND the web crawl, to make it easier for the web team to cross reference each deliverable.
A sitemap of the proposed state of the website organization post-redesign.
Navigation Design
I then created mid fidelity mockups of the proposed sitemap, to give the web team an easier-to-grasp concept of the mega menu I had in mind.
​
When we began our redesigns, the navigation menu looked like this:
The default content and dropdown states of the navigation menu when we began redesigns.
Our redesign recommendations focused more on the idea of a mega menu, to help their sitemap be wider than it was deep. For a site focused on providing help and resources to users, we wanted to ensure that the majority of their content was visible from every page.
.png)
All states and dropdown content of the proposed mega menu redesign.
03 | Redesign
Low Fidelity
As always, a good redesign starts with some quick sketching and low fidelity wireframes. As a group we met up to do some quick Crazy 8s ideation sketches and discussed some basic directions from the current website that we wanted to keep.
​
We then each took on one or two pages for this redesign and decided to do a series of 2-4 low fidelity wireframes for each of our pages.
A portion of low fidelity screens created during the first round of iteration.
Mid Fidelity
We ended this project on mid fidelity wireframes, which did not undergo usability testing. We made sure to provide an interactive prototype to the Nonprofit Austin team so they could conduct any testing themselves if they wanted some data before adopting our redesign recommendations.
3C Development
Before and After
-
Moved the "Application" CTA from the second level navigation to a primary button under the first paragraph
-
Restructured the table hierarchy and coloring
-
Reworded table content to minimize the amount of information
-
Restructured the "Other Services" content to more clearly represent what it means
-
Added another application CTA at the bottom of the page
Events
Before and After
-
Changed the page title to "Events" for consistency (was previously referred to as different things across the site)
-
Moved anchor links from 2nd level nav to hero
-
Increased size of search bar
-
Added more filtering and sorting options
-
Increased visual separation of months
-
Added "Buy Tickets" and "Learn More" buttons
-
Added more session info (pricing, location, time, date) to event cards
-
Reduced height of event cards
-
Removed image carousel section at the bottom of the page
Certificates
Before and After
-
Moved text from the hero into a dedicated about section
-
Increased padding around statistics section
-
Added "Register Now" and "Learn More" CTA buttons on each card to increase affordance
-
Fixed "Registration Open" tag alignment
-
Aligned the testimonials section
-
Reduced the alumni photos to a 1x3 carousel section and added captions
CommunitySpace
Before and After
-
Added anchor links to the hero to help the user quickly navigate to common sections
-
Removed the 2nd level navigation entirely
-
Reworded the about section
-
Separated location, hours, and contact info
-
Added cards for all CommunitySpace services with brief explanations and CTA buttons
-
Reduced the membership comparison section but gave an option to "Learn More"
-
Reworded and renamed the Equity Statement to align with the section on the 3C Development page
-
Added a dedicated FAQ section
Grant Research Center
Before and After
-
Fixed alignment issues
-
Added an about section to help users understand what the GRC does
-
Placed a primary CTA for scheduling an appointment in top section, which is a required step for public access
-
Reworked the public vs member access table to align with the 3C Development page
-
Added a section with a CTA for becoming a member to increase the % of conversions
-
Moved the FAQ section to the bottom to match other page layouts
Resources
Before and After
-
Removed any internal site links and moved all of them to the new mega menu navigation
-
Combined the Resources: Articles page and the Resources page and renamed "Helpful Links and Articles"
-
Moved tabs to the top instead of the right
-
Broke up link sections with headings
-
Fixed alignment on the "Downloadable Resources" section
04 | Present
Presentation and Project Handoff
We presented a project summarization slide deck to the Nonprofit Austin team with the goal of summarizing our research findings and redesigns and providing a set of top recommendations for them to focus on.
We also made sure to organize all of our deliverables and provide a Table of Contents document to help annotate, explain, and document all of the different files being sent to their web team.
05 | Reflect
What I Learned
Good project management involves more work.
I took on the majority of work for this project as the rest of my team had far more external commitments than I during the project time frame. I tried to mitigate the imbalance of this by allowing my team members to all call first "dibs" on any aspects of the project they wanted to take on whenever a new responsibility came up. ​
​
Team check ins are important.
I checked in with my team weekly to make sure they felt okay with their contribution levels throughout the project, but to also ensure they weren't taking on too much. Several team members had extensive time conflicts during this project and as such needed to take on fewer commitments. I wanted to make sure they knew this was okay. I would rather a team take on fewer commitments but produce higher quality work than take on too much and burn out.
Next Steps
Design Mobile Wireframes​
​The scope of this project didn't involve a mobile redesign, but we did include mobile screens in our initial heuristic evaluation. If we continue, i would love to create a mobile version of all of the screens we covered, including the new navigation menu.​
​
Conduct Usability Tests
​We want to make sure that our redesigns are testing well before implementing any higher fidelity versions. Are users better able to find a specific set of resources when given a usability task? How receptive would they be to a new membership flow? We want to ensure the designs aren't introducing new problems before continuing.
​
Create High Fidelity Wireframes
​Once the mid fidelity designs pass testing, we want to implement high fidelity wireframes and possibly conduct some A/B testing on things like different wording for the 'Events' page or different styles of 'Memberships' in the navigation bar. ​
.png)
