Group community project at Production Company class
October - December 2023
Web design
Figma
This project was completed as part of the course, where our team collaborated with a non-profit client to plan and execute a digital project that addressed real organizational needs. I was responsible for the website redesign, focusing on information architecture, navigation, and page layout, while my teammates worked on social media content.
Ups and Downs is a non-profit organization that has supported individuals with Down syndrome and their families in the Calgary area for over 30 years. Its existing website contained valuable information, but it was difficult to navigate, especially for new families seeking support.
For a non-profit organization that serves families and community members, clarity and accessibility are essential. Improving how information was structured and presented became the core focus of this redesign.
To identify areas for improvement, I reviewed the original website from the perspective of a first-time visitor and potential support-seeker.
From a user’s perspective, the main challenges included a disorganized navigation that made key information hard to locate; pages with unclear hierarchy and poorly grouped content; and a visual system that lacked cohesion across the site.
I began by mapping out all existing and proposed pages into a restructured sitemap, grouping content into logical sections and clarifying relationships between pages.This visual structure helped facilitate discussion with the client around content flow, priorities, and opportunities to simplify the overall experience.
The navigation bar was redesigned to reflect Ups and Downs’ key audiences: new families, volunteers, and members.
By separating content based on user needs, the navigation supports faster orientation and a more personalized entry point into the site. A prominent Donate call-to-action was also added to align with the organization’s goals.
The homepage was designed to surface the most relevant information immediately, highlighting pathways for each audience group.
The website serves as a valuable resource hub for those connected to individuals with Down Syndrome, so there is a section for that on the homepage as well.
At the bottom, the page invites visitors to donate or volunteer, making the call to action clear and accessible.
The Donation Page features various donation options presented in card format for easy selection. The primary option, a direct donation to the organization, is prominently displayed at the top along with the current donation goal and the amount already raised.
At the end of the page, a testimonial from a family supported by the organization was included to add emotional context and encourage participation.
For pages containing detailed information, such as facts and resources, line length was reduced and content was broken into clearly defined sections with descriptive subheadings.
This improves readability and makes long-form information easier to scan.
These pages feature the main support sources at the top: the organization's own support group and the assistance offered by 211 Alberta. Below these, the page displays a series of external links to other community associations and downloadable resources, all organized in a card format for easy access.
Our team decided to use blue and yellow as the main colours in our design, as they represent Down Syndrome awareness. Additionally, my teammates designed a new set of icons specifically for the website.
We have selected Open Sans for typography. It is a straightforward and easily readable font. Being a Google font, it is simple to implement, and it offers a range of visual weights that allow us to establish a hierarchy and typographic system.
Overall, in line with Ups and Downs’ goal, the visual design aims to support Ups and Downs’ mission by feeling supportive, empowering, and trustworthy.
To enhance usability and adaptability across various screen sizes, particularly on mobile platforms.
Build a prototype with interactive features and conduct user testing to gather valuable feedback and identify areas that need further improvement.
The website already includes an accessibility widget to make content accessible for people with disabilities. We can further enhance the compatibility of the website with the widget to ensure optimal performance.
