RadiCalgary

End-to-End Website Design

Overview
RadiCalgary is a non-profit organization that has a mission is to promote the dignity and wellbeing for anyone experiencing poverty in Calgary by offering hygiene and wraparound services.

I took on the crucial role of overseeing the entire design process of the website, from its initial concept to the final implementation, ensuring a seamless and user-friendly experience.
Role
UI/UX Designer
Responsibilities
Web Design
Prototyping
Responsive Design
Team
1 UX Designer
1 Front-End Developer
1 Client
Timeline
1.5 months
Background
Understanding the Problem
In designing the non-profit website, the challenge was to create an intuitive and engaging user experience that effectively communicated the organization's mission, inspired visitor engagement, and facilitated seamless navigation with a new multi-page design.
How Can We Solve This?
We revitalized the website by introducing a multi-page layout with captivating visuals and intuitive navigation, transforming it into an engaging and user-friendly platform that effectively communicates the organization's mission and encourages active participation.
Mission Statement
How can we produce an engaging website that’s visually appealing, easy to navigate, and clearly communicates the organizations message?
Understanding the Goal
Context
Before beginning the design journey, I conducted in-depth discussions with the client, aligning our vision with their goals and expectations. This collaborative approach ensured a clear understanding of their pain points and objectives, allowing me to create a tailored and impactful design solution that precisely met their needs.
Single page experience. The current website is a single page, making all of the information feel very cluttered together.
Non-unique. The current website is not visually unique and looks very generic, we want the redesign to stand out.
Understand the broader mission. Navigating through existing charity websites, it's usually hard to understand their mission.
High Level Objectives
Multi-Page Design
Create a multi-page web design, allowing for more information to be displayed.
Clear Mission Statement
Ensure that the organization’s mission is clear and easy for user’s to understand.
Visually Appealing
Produce a visually appealing design that’s easily digestible and skimmable.
Research
Competitive Analysis
In order to get a solid understanding of how other organizations are doing in the market and to lay out a solid foundation, we did a competitor analysis which consisted of direct and indirect competitors.
Affinity map comparing other web pages
Informational Architecture
Created an informational architecture to form a basis for the website’s structure.

The first iteration of the informational architecture was built based off of what was given to me by the client. However after considering the content that will be featured on each page, I found that the “Our Team” page wouldn’t have much content at the moment. Thus, I recommended that we instead combine it with the “About” page since it would add content to the existing content light page.
Home Page
Mission Statement
Services
News Articles
About Page
Mission Statement
Programs & Services
Mobile Hygeine
About
C-PUCV
Statistics
About
Social Enterprise
About
Values
Our Team
Team Members
An Alternative Route
Here is the current IA after aligning with the team.
Home Page
Mission Statement
Services
News Articles
About Page
Mission Statement
Values
Our Team
Programs & Services
Mobile Hygiene
About
Timeline
C-PUCV
Statistics
About
Gallery
Social Enterprise
About
Values
Gallery
Design
Design Process
I followed a structured design process, starting with low-fidelity wireframes and progressing to mid-fidelity grayscale designs. Throughout, I collaborated closely with the web developer, ensuring feasibility and refining the design. In the high-fidelity stage, vibrant visuals and interactivity were added, culminating in an interactive prototype for both desktop and mobile views.
Low-Fidelity Wireframe
Created a hand sketched wireframe based on the final informational architecture as a baseline.
Mid-Fidelity Wireframe
After creating initial wireframes of the product, getting approval from the client and aligning the the web-development end for feasibility, I moved on to creating a mid-fidelity grayscale design to better demonstrate the structure before moving on to the high-fidelity prototype.
UI Kit
Before moving onto the high-fidelity prototype, I developed a cohesive, user-friendly style guide, defining colours, typography, icons, and a grid system for the website's visual consistency. I was told to primarily use merriweather for headings and poppins for body text, as well as use purple as the primary colour.

The exact specifications for font sizing, colours, icons, and the grid system were all up to my discretion.
Results
Final Designs
The final website design offers a fresh, modern take that better reflects RadiCalgary’s mission and values. By moving to a multi-page layout, we made the content easier to navigate and more inviting to explore. The visuals feel clean but welcoming, with thoughtful use of color, clear typography, and a layout that helps users quickly find what they’re looking for. It’s fully responsive, so whether someone’s visiting on desktop or mobile, the experience stays smooth and intuitive.
View Website
Reflection
Feedback
The client's response to the final website was overwhelmingly positive, expressing genuine satisfaction with its appealing design and seamless functionality. Their feedback reflected a strong approval, highlighting the successful translation of the organization's mission into an engaging online platform.
Learnings
Prototyping with Purpose
I learned how to prototype quickly at different fidelities to validate ideas early, enabling faster feedback and more informed design decisions.
Clear Information Architecture is Key
Developing a well-structured information architecture prevented content overload and made the website more navigable. Combining related pages, like the "Our Team" and "About" pages, streamlined the user experience.
Plan for Responsiveness Early
Starting with responsive design in mind ensured a consistent experience across devices and made developer handoff smoother with clear components and breakpoints.
Made with love by Nancy.