CSTO
TIMELINE
Q2 2023 - Q1 2024
TOOL(S) USED
Wix, Squarespace, Adobe Photoshop
INDUSTRY
Non-profit
PROJECT TYPE
Client, Web Design, Photography
ROLE
Web Design Consultant
Background
Castle Square Tenants Organization (CSTO) is a nonprofit group based in Boston, MA, dedicated to preserving affordable housing and fostering community empowerment.
CSTO's website needed a complete refresh, both in design and content, to create a more modern and user-friendly experience. Additionally, they required a transfer of the site from Wix to Squarespace for improved functionality and maintenance.
Problem
To redesign CSTO’s website with a modern, accessible look and feel while making it easier for visitors to find essential information. Additionally, the project aimed to streamline site maintenance and functionality by transitioning the platform from Wix to Squarespace.
Goal
Solution
A comprehensive website redesign, focusing on a cleaner layout, updated visuals, and improved navigation to enhance user experience. I successfully transferred the site from Wix to Squarespace, enabling easier content management and greater flexibility for future updates, all while preserving CSTO’s mission and brand identity.
OLD WEBSITE
Key Issues with Previous Design
UI
The design feels outdated and doesn’t reflect the company’s brand identity. A busy background diverts attention from key content, while inconsistent text and image placement creates a disorganized appearance. Text size is too small for readability, and the overuse of colors lacks cohesion. Additionally, icons vary across pages, making the design feel inconsistent.
UX
Some pages contain redundant information, and the navigation bar is overloaded with options. Many pages could be consolidated to improve flow, and some are dense with text, making it difficult for users to absorb the content. Additionally, some buttons are non-functional, but there’s no visual indication to show they’re inactive.
PROCESS
I collaborated closely with program managers and staff to discuss the website's content, gathering updated information about the programs, obtaining new pictures to feature, and scheduling a time for me to come in to take pictures. Throughout each phase of development and testing, I held monthly meetings with the board of directors to gather their feedback and suggestions, ensuring the website met their expectations and needs.
Below are examples of the notes I took during these meetings:
BRANDING
Color
I chose to align the website's color scheme with the colors featured in their logo to create a cohesive and unified design.
Typeface
I took a similar approach with the typography. For the primary typeface, I chose Caudex, which closely resembles the typeface used on their outdoor signboard. For the secondary typeface, I selected Avenir to reflect the style of their logo, maintaining consistency throughout the design.
NEW DESIGN
