Case study 03 · Institute of Cultural Affairs Canada
ICA Canada website redesign
A class project that turned into a ten-month contract. I led a team of four designers in rebuilding a nonprofit’s confusing website into one that’s easy to find your way around, works for everyone, and that their own team can keep updating.
Role
Lead Product Designer & Framer Developer
TIMELINE
January–November 2025 · 10 months, alongside my full-time job at TD
TEAM
Me and three other designers, working directly with the Institute of Cultural Affairs Canada
PLATFORM
A website for desktop and mobile, built in Framer
Fewer clicks to reach important pages
Higher visitor satisfaction in surveys after launch
Client satisfaction with the redesign and handover
The problem
ICA helps people lead change in their communities. Its website made that hard to see.
The Institute of Cultural Affairs Canada (ICA) is a nonprofit that runs courses and programs on leadership and community change. Its old website was hard to get around, explained its programs poorly, and gave people little reason to come back. We ran two surveys, one with current members and one with people new to ICA. Members found the site confusing and out of date. Newcomers couldn’t work out what ICA actually did.
ICA was also planning to grow, with new membership options, content in more languages, and more events and donations. The new site needed room for all of that, and ICA’s own team had to be able to run it after we left.
How we got there
Finding what was broken
A close review and two surveys, to find what was really broken.
Each of us reviewed the old site on our own using Nielsen’s 10 usability principles, a widely used checklist for spotting design problems, then combined what we found. The biggest issues were buttons that didn’t look clickable, forms that were hard to get out of, vague labels, no search or filters, and cluttered pages that were hard to read. The surveys told the same story from both sides, and both groups wanted an easier way to sign up for events and stay connected between programs.
Who we designed for
Two people: one who knows ICA, and one who doesn’t yet.
The surveys pointed to two very different visitors, so we wrote a persona, a short profile of a typical user, for each.
The Lifelong Learner
A current member who takes courses in his spare time. He wants to find programs and events quickly, sign up easily, and stay in touch between them.
The Emerging Leader
A graduate student who’s new to ICA. She’s looking for flexible programs in leadership, activism and social change, but the old site didn’t tell her what ICA offered.
The main decision
A simpler structure, built around what people come to do.
The old site had pages scattered everywhere, no clear order, and menu labels that overlapped. We reorganized it around what visitors actually come to do, with five main sections anyone can understand at a glance: Programs, Publications, Impact, About Us and Donate. Related content now lives together, like events and courses both under Programs. That change alone made the most important pages much quicker to reach.
WHAT OTHERS DID BETTER
Learning from sites that already worked.
Each designer studied one similar organization’s website, looking at how it was organized and how easy it was to use. The patterns were clear. Those sites had organized menus, search and filters, where ICA had none. They offered event calendars and webinars to keep people engaged. And their layouts made the important buttons easy to spot.
Wireframes
Home, Programs and Publications, from rough layout to detailed design.
The homepage puts ICA’s mission up front, with clear paths to programs, events and member stories. The Programs page gives each course a card with its start date, length and format, plus filters and a built-in calendar. Publications shows ICA’s library in a simple, consistent grid.
Hand-drawn wireframes of the ICA Canada home, courses, and publications pages.
Courses page design on a laptop, with Courage to Lead course cards beside an events calendar.
Homepage design on a laptop, with the ICA Canada mission and an introduction to Courage to Lead.
Publications page design on a laptop, showing book covers by ICA Canada colleagues and staff.
Build and handover
We built it in Framer so ICA could run it themselves.
We built the final site in Framer, a website builder that doesn’t need a developer for updates, and set up its content system so ICA can add courses, events and articles. Then we handed over a design system and trained ICA’s team to manage the site on their own.
Framer canvas with the new ICA Canada pages laid out at desktop, tablet, and phone sizes.
Final designs
Mobile
Every page was designed for phones as well as computers. On a phone, the homepage, publications and course calendar keep the same structure in a single column.
ICA Canada homepage on a phone, with the main headline and the introduction to ICA.
Publications page on a phone, listing books with their covers and authors.
Courses page on a phone, with a monthly calendar above a Courage to Lead course card.
What I learned
Leading a real client project taught me as much as the design did.
Running this project from start to finish made me a stronger leader and communicator. I learned to keep the client’s goals, our timeline and the design direction in sync while guiding a small team, and to manage feedback, file versions and deadlines so nothing slipped.
Working with a real client also taught me to turn their goals into practical design decisions. And building the design system and training ICA showed me that handover matters: a redesign only works if the client can keep it going.