Building a Nonprofit Website that Invites Confidence
Redesigning a Local Nonprofit Website and Improving Daily Workflows of Stakeholders
Role
UX Designer
Club
DesignCo @UCSD
Team
4 UX Designers
1 Project Manager
1 Content Strategist
1 Web Builder
Timeline
June-Aug 2024
Skills
Interaction Design
Visual Design
Information Architecture
Content Strategy
Management
Tools
Figma
Wix Studio
01
PROVIDING CONTEXT
Who Did I Work With?
This summer, I participated in UCSD Design Co's summer program, a 10-week internship program that gives students the opportunity to work for a local non profit to elevate their branding and exposure.
For this internship, I, along with 7 other students, were paired with the local nonprofit SAY San Diego.
We were tasked with working with San Diego Military Family Collaborative (SDMFC), an associated program whose goal is to organize resources for military families in San Diego.
Image: The Original Website
The initial task we were given was to redesign their website and implement a simpler Content Management System for our stakeholders. Let's explore how this task evolved.
02
RESEARCH
Diving Deeper: Initial Tasks Analyzed
After being assigned our goals, my team and I immediately got started. As we were initially evaluating the website, we immediately ran into some big problems.
We noticed that it was difficult to locate content on the website. Why were there two search bars?
On top of that, it was clear that the visual design was consistently, inconsistent. There were a variety of buttons and discrepancies between hyperlinks. Constant use of bolded text made it difficult for users to discern what was important.
After doing our initial evaluation of the website, we got to researching the user base to see what users, as well as our stakeholders were struggling with.
But Wait… What Is a Member?
But first, who were actually the users of the website? We were told by our stakeholders that "members" were the main users of the website. But there was difficulty understanding the jargon they were using.
Did "members" mean members of SDMFC, such as organizations involved providing resources to military families? Or were members the military families themselves? What about our stakeholders, were they considered members?
After coming across this issue, we immediately consulted our stakeholders to get clearer definitions on who our user base was. Through this, we pinned down four key user groups:
New Visitors
Those wanting to learn more about SDMFC.
Military Families
Those seeking resources, events, and organizational support.
Members
Those interested in participating and contributing to SDMFC.
Council
Those part of SDMFC and are involved in management and oversight.
After nailing down our definition and fully understanding who used the SDMFC website, we got to surveying the user base.
Patiently Waiting For Survey Responses
As a designer, I was used to just immediately getting survey responses, but for this project, we were working on the timeline of SDMFC, meaning we had to wait for our stakeholders to release the survey during their monthly meeting, and then waiting a bit more for the survey responses to roll in.
Despite not having direct access to users initially, the other UX Designer and I took advantage of industry research and UX standards to identify key areas for improvement.
Image: Heuristic Evaluation of the Home Page
Image:A Market Analysis
We conducted a heuristic evaluation on the entire website, as well as a market analysis while awaiting survey responses to get a deeper understanding of the issue at hand.
But First, What Did the Data Say?
Before iterating on our solutions, we consolidated our data and extracted these key findings:
5 in person interviews, 105+ survey responses.
average time to find convening notes was 1:05
user gave up on one of the tasks
"The SDMFC website is very busy, especially with the collage of member logos. A website that is easier to navigate and highlights what services/programs are available for military families would be helpful."
5
In person interviews
100+
Survey responses
Some Insightful Data Points
1:05 Minutes
Average time to find convening notes
2 Users
Gave up on the tasks during the interview
"Busy"
2/5 interviewees stated the website looked "busy"
Now, we have data to inform our designs. Let's revisit our key issues and how we plan to solve them.
03
RE-CENTERING: OUR PROBLEMS AND SOLUTIONS
Main Issues, After Research
Lack of Design Consistency
Elements on the website did not reliably communicate their function and relationship to each other.
Scattered Content
Information was poorly categorized, making it difficult for users to find what they need.
Discoverability and Management
Stakeholders find it challenging to update content, which leads to difficulty finding resources.
Thus, we asked ourselves, how might we simplify the content viewing experience of all users?
Our Solution
Lack of Design Consistency
Unified Design
and Accessibility
Scattered Content
Narrowing Down on
What's Important
Discoverability and Management
Streamlined Operation
and Engagement
Now let's talk about how we went about implementing these solutions!
04
IDEATION AND IMPLEMENTATION
Starting Small
The other UX Designer and I had trouble knowing where to start. Because there was just so much to do in so little time, we struggled to even get started designing. Our mentor suggested we start small: the lowest fidelity is just words.
Problem:
Links to pages and other content are difficult to identify
Solution:
Containers with text, media and buttons
Different buttons depending on content
Problem:
Sidebar on Resources Page limits navigation horizontally
Solution:
Implement filters for resources
Emphasize breadcrumbs
Problem:
Homepage carousel is difficult to navigate and lacks user control
Solution:
Navigation arrows, radio buttons, numbers
Replace with new images and text
After wrote out our problems and solutions, we then made low-fidelity wireframes and moved on to high-fidelity afterwards.
Designing and Implementing, Concurrently
Because we were working on such a tight deadline, my team and I had to design and implement on Wix Studio concurrently in order to ensure timely completion of the project. Additionally, we were working through different levels of fidelities concurrently as well. All throughout, we were in constant communication with our stakeholders, meeting with them every week to update them on our progress.
Image:Our Iterations Over the Weeks
05
TESTING
Usability Testing
As we were wrapping up and right before our launch, our UX Researcher conducted usability testing on the 5 people he conducted initial interviews on.
We saw a 78% decrease in time needed to find information!
Let's look at all the final changes we made to see how we got here!
06
RESULT
Our Deliverables
Content-Reorganization
A Cohesive Design System
Simplified Workflows for Stakeholders
07
TAKEAWAYS
What Did I Learn?
One of the biggest lessons I learned was adapting to change. One of the biggest roadblocks we encountered was waiting for user research. Since our survey responses were dependent on SDMFC releasing it to their community, we had to push everything back while awaiting responses.
Instead of letting the delay our progress, I shifted my focus to areas of the project that didn’t rely on the survey responses. I took the opportunity to, as mentioned earlier, conduct a heuristic evaluation and beginning sketching potential solutions based off that. This helped me ensure that when the user data finally came in, I was ready to integrate it efficiently and make the most of the insights we gathered.
Thank You!
Thank you so much to my team, as well as to SDMFC for this opportunity! This seriously could not have been completed without the support of my fellow peers, as well as mentor!
Thanks for stopping by! Let’s connect