ACADEMY 4
ASSIGNMENT
Redesigning a nonprofit's current Squarespace website for a team without design or coding experience
ROLE
Lead UX Designer and UX Researcher
TIMELINE
12 weeks during Spring 2024
I led a team of three during a website redesign for Academy 4, a nonprofit pairing mentors with fourth-grade children. Throughout the project, I confronted various constraints both technical and interpersonal. I also took on the responsibility of reigning in the team’s individual design instincts, including my own.
Academy 4 is a nonprofit that pairs mentors with children at the fourth-grade level. At this age, children start to pick up behaviors and values from the adults in their lives. Mentors volunteer their time to assist Academy 4’s mission of fostering positive adult relationships for children from economically disadvantaged schools.
As a result of Academy 4’s growth, the website needed a more professional look and feel. According to our main contact, Amanda, Academy 4’s marketing manager, when people visit the website, they should do at least one of the following:
We learned that this was the first time Academy 4 had ever worked with designers. The nonprofit built its website on Squarespace, and the marketing team maintains it. Along with three potential user flows, her only other concern was the site’s visual design.
During our first meeting with Amanda, I asked, “What challenges or constraints do you see this project running into?” She confided in us that a redesign was long overdue, but the Academy 4 team was overwhelmed with work and needed help figuring out where to begin. She was worried that we would also fall victim to the greater scope of the project.We learned that this was the first time Academy 4 had ever worked with designers.
The scope was the least of my worries. My only experience with Squarespace was a failed attempt at building my portfolio website. Even though the platform is renowned for allowing any user regardless of their technical proficiency to build a website easily and quickly, I never wanted to work with it again. I believe that Squarespace accomplishes accessibility with website templates which is great for some use cases, but I wasn’t satisfied with the limited out-of-the-box customization.
My other concern was that only half of my team was present on the mandatory first day of the semester. I learned that one of my teammates, someone I looked up to in previous classes and who I knew as a natural leader, dropped the class.
Another teammate was MIA — no one had heard from him yet. This left only two of us for our first interview. I was a little rusty on my UX’ing (my most recent UX class had been in the Spring of 2023).
After our first meeting with Amanda, I was confident we could deliver a successful redesign. This project felt familiar — a culmination of all the lessons before this project. This familiarity allowed me to shake off that anxiety and step into a leadership role. This would be my first time leading a team, but I knew how to pull off this redesign.
To keep all of our notes, links, and work organized and easily accessible, I built a Figjam board. There, I wrote an agenda and a to-do list for every week. During our first meeting, which our missing team member attended, we shared our observations of the current website.
I began the research phase by evaluating academy4.org. I wanted to locate all the possible flows a user might take to learn about Academy 4, how to volunteer, and how to donate. I found myself getting frustrated and confused navigating the site.
I followed up with Amanda on the decision to include school addresses. I learned the school pages serve two purposes: to provide mentors with multiple access points to school information and to encourage participation at other schools.
During our initial meeting with Amanda, I was excited about interviewing mentors and learning firsthand how they interact with the website. Amanda agreed to connect us with mentors, but that plan fell through. She had the flu and communication went quiet.
To stay on schedule, the team needed to make a pivot with our research. I developed an alternative to conduct a usability test of the current website. We would recruit people unfamiliar with Academy 4 as stand-ins for prospective mentors. I wrote the usability tasks. The team recruited eight participants.
I sifted through the participants’ notes and noticed they aligned with my initial observations. I synthesized this qualitative data into the following insights:
We dropped the donation page from our scope because we discovered the page was built and managed by Humanitru, a CRM that specializes in nonprofits and fundraising. Based on the usability test insights and the exclusion of the donation arm of Academy 4 we now had our main objectives:
Before we started the research we discussed potential methods. Card sorting and tree testing were suggested, but these methods didn’t excite the team. However, when I learned that our participants were confused by the navigation labeling and where to locate information, I knew we had an IA problem.
Information on mentorship needed to be consolidated from five pages to two: the homepage and the new “Become a Mentor” page. To make locating school information easier and more efficient, all pages related to participating schools needed a complete overhaul.
We needed to continue to work with prospective mentors and learn their mental models when navigating a nonprofit website. I convinced the team the best way to do this is through a card sort and tree test.
Each team member chose which page to work on. Since I had such heavy involvement in the research phase, I wanted my teammates to pick their pages first and I would take what was left, which were the school pages. I was relieved, I already had a vision of how to redesign these pages.
Wireframing and prototyping are usually where I excel, but I wasn’t looking forward to it in this project. Up until this point, I had put off researching Squarespace. Based on my brief experience with the program, I knew there would be constraints. I didn’t expect they would be primarily on my pages.
On the current website, mentors had to click through two pages and open five accordions to access school information.
I designed a single page with a three-column layout of school cards to make locating that same information faster. The cards would present the school name, address, and the site coordinator’s name and contact information.
The schools would be chunked into accordions by three geographical regions: North Texas, Central Texas, and Tennessee Schools. The accordion design would reduce the amount of scrolling in the mobile version. But I ran into a constraint: accordions in Squarespace can only contain lines of text.
There were plugins to bypass these constraints, but they all required some knowledge of CSS.
When we delivered our annotated mid-fidelity wires to Amanda, we discussed how applying plug-ins via CSS would be necessary to make locating information easier. She wasn’t confident in her or her team’s ability to implement these designs but still loved what we were delivering. Rather than implementing our design themselves, it was implied that our project could be used to inform their decision to hire more help and migrate to another website-building platform. She encouraged us to keep exploring what a best-case scenario could look like for Academy 4. My anxiety about the constraints was squashed.
I love prototype testing. Sure, validation is great, but what I love most about this step in the design process is learning what’s not working or what I overlooked. Anytime I interview or test with participants, I walk out feeling inspired.
This time around, we managed to recruit mentors and team members. Overall, they loved the prototype. The visual design stood out for them: buttons with proper margins, the chunking of information, and plenty of information about Academy 4 and its mission on the homepage.
One of the most notable moments of this entire project was testing with the Executive Assistant. I conducted a brief interview before launching the prototype. I learned she was once a mentor and had several critiques about the website. She was thrilled to see we solved all of her problems. What should have been a thirty-minute test turned into an hour — she was having so much fun.
As for the school list, along with a handful of visual notes, everyone commented on the page length. Some didn’t understand the order of the schools. One participant suggested a filter. Another commented on how cumbersome it was to compare the mentoring dates. This process required navigating to each school page and comparing the dates by memorization.
I implemented a filter and search bar based on a plugin. Mentors would be able to filter by region and ISD. If they needed to find information on a particular school, they could use the search bar.
To reduce the cognitive load from memorizing dates, I added a calendar button to the school cards. Clicking it opens a modal containing the mentoring dates.
The decision to use modals was a practical one. Squarespace utilizes a modal design it calls a lightbox. Accordions could be an option here, but applying the lightbox to forty-five schools would be easier than applying and editing a CSS snippet forty-five times.
One more significant moment happened during the high-fidelity prototype testing. A participant who has worked with several other nonprofits before praised our prototype. He said most nonprofit websites he’s visited lack information about what they do and seem suspicious. Our prototype looked professional and provided plenty of information to get involved.
To recap, the team updated the information architecture, provided more concise information about Academy 4 and its mission on the homepage, reduced the number of pages where mentor information can be found, and delivered a more professional visual design.
This redesign had been on the books for years for Academy 4. It had gotten to the point where they didn’t even know where to begin, hence the entire site was up for grabs. The marketing manager, Amanda, had too much on her plate for a long time, so by stepping in to help, we were able to relieve some stress in her life. When we presented our research to her she was blown away by the amount of work we accomplished. It was clear UX had never been considered.
The new visual design and improved information architecture will give the Academy 4 website a cleaner and more credible appearance. These updates will also help inspire more mentors to join Academy 4’s mission to make a positive impact on children’s lives.
©2025 Keith Charba. All rights reserved.
©2025 Keith Charba. All rights reserved.
