Imagine Cities

Brand refresh • website redesign • qa

Imagine Cities

I collaborated with a talented team of designers and developers to refine Imagine Cities' visual identity and website to bolster their visibility, attract key stakeholders, and increase user engagement.

Tools:

Figma
Google Slides
Mailchimp
GitHub
Mural
Hotjar
Google Analytics

Role:

UI/UX Designer
Design Lead

Team:

Collaborating with 2 other Designers, 3 Developers, and the Founder

Timeline:

2024 - 2025

Research & Ideation

Defining the Brand Refresh Scope

Website redesign, with revisions that conveyed meaningful change without a full overhaul.
Developed Version 2.0.0 & 2.0.1 of brand guidelines, introducing a new colour palette and font system.
Implemented some ‘future-ready’ features for long-term adaptability.

Tap or hover to zoom

original guidelines

V 1.0.0

Figma

V 2.0.0

Google slides

V 2.0.1

PROTOTYPING

Redesign Highlights & Brand Alignment

The Homepage—Facilitating Easier and Faster User Exploration

The "Learn More" CTA now smoothly scrolls to a short description of Imagine Cities.
We also inputted an expanded section detailing each of the three digital tools, with the addition of an infinite carousel featuring the organization's partners.

Before

After

Our Digital Tools Page—Visualizing the Mission

This page was added to provide deeper insights into Imagine Cities' digital tools.
I designed a simple GIF of the organization's Ecosystem of Adaptation, visually reiterating their mission and the critical roles each tool plays in achieving it.

About Us Page—Consolidating History and Other Important Info

The organization's history, values, and volunteer opportunities are now presented holistically within a single, comprehensive About Us page.

Before

After

A Semi-New Newsletter—Updating Email Campaigns to Reflect Brand Refresh

Using Mailchimp, I applied the refreshed brand properties and leveraged their animated banner feature to add engaging visual interest.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

responsive web design

Digital Tools at Any Scale

We worked collaboratively to ensure that the website is responsive across all screen sizes, and by extension, to any individuals in need of Imagine Cities’ online resources.

Search Engine

Aggregates useful articles tagged with relevant research categories under one platform.

Search Engine

Aggregates useful articles tagged with relevant research categories under one platform.

Learning Guides

A collection of internal and external resources for any skills and tools needed to enact social actions.

Learning Guides

A collection of internal and external resources for any skills and tools needed to enact social actions.

Creative Neighbourhood Lab

Connects individuals to various neighbourhood organizations or post-secondary institutions and their available projects.

Creative Neighbourhood Lab

Connects individuals to various neighbourhood organizations or post-secondary institutions and their available projects.

gathering user feedback

Quantifying Impact: 3 Months Pre- and Post-Launch

To quantify the impact of the website refresh on user engagement, I analyzed three months of pre- and post-launch data from Google Analytics (GA4) and Hotjar.

GA4 •Active Users
‍

Increased by 31.6%

GA4 • New Users
‍

Increased by 33.2%

GA4 • USer's Average Engagement Time

Increased by 52.2%

Hotjar • Average Session duration

Increased from 6:55 to 11:17

Hotjar • Average pages per Session

Increased from 3.5 to 4.5

Hotjar • bounce rate
‍

Decreased from 48.7% to 40.3%

next steps

Future Outlook & Ongoing Initiatives

Continuous web-development refinements were managed through GitHub Issues throughout the brand refresh.
‍
‍We also kicked off development of new features, including user-login capabilities for the website. Here’s a snapshot of the login functionality progress I contributed to:

Brand refresh • website redesign • qa

Imagine Cities

Tools:

Role:

Team:

Timeline:

Research & Ideation

Defining the Brand Refresh Scope

original guidelines

V 1.0.0

Figma

V 2.0.0

Google slides

V 2.0.1

PROTOTYPING

Redesign Highlights & Brand Alignment

Before

After

After

Before

After

After

responsive web design

Digital Tools at Any Scale

Search Engine

Search Engine

Learning Guides

Learning Guides

Creative Neighbourhood Lab

Creative Neighbourhood Lab

gathering user feedback

Quantifying Impact: 3 Months Pre- and Post-Launch

GA4 •Active Users‍

Increased by 31.6%

GA4 • New Users‍

Increased by 33.2%

GA4 • USer's Average Engagement Time

Increased by 52.2%

Hotjar • Average Session duration

Increased from 6:55 to 11:17

Hotjar • Average pages per Session

Increased from 3.5 to 4.5

Hotjar • bounce rate‍

Decreased from 48.7% to 40.3%

next steps

Future Outlook & Ongoing Initiatives

View Other Designs

Imagine Cities

Receipt Digitalization

Monarch

Say Hello

Say Hello

GA4 •Active Users
‍

GA4 • New Users
‍

Hotjar • bounce rate
‍