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

UX/UI Design
Prototyping
Responsive Design

Team

Ronald Jin, Front-End Developer

Timeline

Sep 2023 - Oct 2023
Jump to Solution

Background

❓

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.
💡

Solution

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.

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.

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 Phase

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 Mockup

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.

High-Fidelity Prototype

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.
View Website
View Figma

Reflection

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.
✅

Takeaways

This project allowed me to learn more about the design process and explore the various design tools on Figma. I learned how to prototype more in depth by exploring more efficient methods to create components and prototype overlays. Moreover, I was also able to work with a non-profit organization for the first time and learn more about their inspiring mission.
🙌

Kudos

I’d like to give a shoutout the people on my team that made it possible for me to work on such a fulfilling project. Huge thanks to Bill Zheng and Ronald Jin for presenting me with this opportunity and for working with me throughout the process!
Made with love by Nancy.