Ups and Downs
A redesign of a non-profit organization's website with improved navigation and layout.
Team project at Production Company III class - a course focused on working with a non-profit organization to scope, plan and execute a project to benefit the organization. I was responsible for web design, while my teammates focused on creating social media content.
Wireframes
Sitemap
21 webpages
Web design
Figma
October - December 2023
Ups and Downs has supported individuals with Down syndrome, their parents, families, and friends in the Calgary area for over 30 years.
They wanted a redesign of their website.
To identify areas where we can improve, I explored the website from the perspective of a regular user and find information I would need if I were the target audience.
The website's navigation is not organized properly, which makes it difficult to find the required information. Most of the pages lack a clear hierarchy and have poorly grouped information.
Moreover, the color scheme used on the website lacks cohesiveness.
I am responsible for web design. To begin with, I mapped out all current and proposed pages in a visual format, categorizing them into logical sections to demonstrate how information would be grouped and interconnected. This allowed for clear discussion with the client about content flow, as well as suggestions for optimization.
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 feel supportive, empowering, and trustworthy.
The navigation bar was reorganized for clarity.
Three separate tabs were added to cater to the organization's target audiences: new families, volunteers, and members. This approach streamlines the user's journey and demonstrates an understanding of the unique requirements of each group.
A prominent Call-To-Action button was placed at the top to encourage donations, aligning with the organization’s goals.
The homepage is designed to immediately show visitors the most relevant information they're looking for. It features a section for the three key audience groups: new families, volunteers, and members.
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, there's a testimonial from a family who has benefited from the organization's assistance, serving as a powerful encouragement for others to donate.
The event calendar has been redesigned to improve clarity.
On the event details page, a hero section with a full-width photo has been added. This is intended to grab the user's attention and make a lasting impression.
Given the text-heavy nature of the information, I reduced line length to enhance readability.
Clear sections with specific subheadings were created for clarity.
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.
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.
