Digital Case Study:
Chatsworth Avenue School PTA

I designed and launched a new website for the Chatsworth Avenue PTA School in New York.
This case study covers UX Research, Information Architecture, Interface and Interaction Design, and website build.
Visit the site here.

Objective

I was given two months to design new Information Architecture and launch a new website for the Chatsworth Avenue PTA School in New York. I was responsible for UX research and ideation all the way through from concept, prototype, photography, graphic assets, and the redesign of the website.

Overview

Chatsworth Avenue School is public school in Westchester, New York that provides elementary education. The school’s PTA is crucial in raising money to support the needs of the school and supports over 50 programs, events, and initiatives that enrich the lives of students, faculty, and community.

The PTA needed a user friendly website to provide all the information families might need to know. Classroom supply lists, sign ups for events, ability to process payments, newsworthy items, Covid procedures, access to other district information, and much, much more.

Methodology & User Needs

The first focus of the project was on Information Architecture (IA), so I broke up the process using the following techniques to evaluate and redesign.

• User Research

• Heuristic Evaluation

• Content Audit & Card sorting

• Wireframing & Prototyping

• Usability Testing

I undertook a survey and user interviews to evaluate the website to get a deeper understanding of user needs. I also tested the current website with potential users to validate my findings. The main goal was to ensure the new redesign would address the needs of users and provide a more seamless experience across both desktop and mobile, something the current site was failing to do. I evaluated the current website using Jakob Nielsen’s 10 usability heuristics which helped identify pain points users would face trying to navigate through the website.

Tools I Used

Figma, Squarespace, Google sheets, Google forms, Adobe Illustrator, Photoshop, InDesign, my Camera, and a ton of post-its.

Evaluation

Some of the major concerns with the website:

1. Navigation - The previous website had many drop down menus meaning users needed to go through layers of clicking to get to a particular page. Information was ‘buried’ and couldn’t be easily found.

2. Visual Appeal - No imagery meant a very flat, list based site.

3. Hierarchy - The content was divided up into sections that had no obvious order, alphabetical or otherwise.

4. Topical Information - There was no functionality to add current events or promote PTA funded promotions. This included class supply lists, and new families information.

5. Sign Up & Payments - Individual sign ups were placed under layers of tabs which prevented the users from finding the information quickly. It did not support online payments.

Card Sorting & Design

After an in-depth content audit, I conducted a card sorting exercise. This involved creating a set of cards that each represent a page on the website and grouping the cards in a way that makes sense. I saw that the site needed to have a solid main, accessible area for everything that not only the PTA had to offer, but for school information also. I grouped topics for the ‘Useful Links’ section, which would become the information ‘hub’ of the website. A ‘How the PTA Spends Money’ section was born, to show the scope of the support the PTA provides.

Using the existing color palate of the school (tiger orange), I developed a clean design using my favorite website platform Squarespace. I took photos in and around the school, and married them with stock photography (unsplash) to capture the upbeat spirit of the school. I created icons using illustrator for each section to be included in the ‘Useful Links’ hub. I linked district information and the merchandise store to create a seamless transitions across the website. The current domain name was very lengthy, so I recommended a change to chatsworthavepta.org

The Results

• A simple clear intention on all pages helps the user navigate.

• Streamlined colors, typography, tone of voice, imagery, simplicity, and functionality all contribute to the success of the website.

• Keeping navigation simple, intuitive and consistent on every page has been key.

• The visual hierarchy either by size, color, imagery, typographically, and white space creates a clear focal point showing visitors where the most important information is.

• Successfully mobile friendly, the website has a responsive layout which will adjust to different screens.

Visit the site here.