Imagine Cities

Brand refresh • Web design • QA

Imagine Cities

As a UI/UX Designer and Design Lead for Imagine Cities, I collaborated with a talented team of designers and developers to refine the organization's visual identity and website. Our goal was to bolster their visibility, attract key stakeholders, and increase user engagement, ultimately reinforcing their long-term vision for growth through their digital products and social initiatives.

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 - Ongoing

step 1:

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.

V 1.0.0

Figma

V 2.0.0

Google slides

V 2.0.1

step 2:

Conceptualizing and Implementing the Brand Refresh

Through a series of creative meetings, we conceptualized and implemented the refreshed brand identity. We took a careful and strategic approach, making sure to:

Retain the organization's core message and identity.
Incorporate scalable visual components.
Refine efficiently.

Tap or hover to zoom

step 3:

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 replaced the carousel with an expanded section detailing each of the three digital tools. However, we did add 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; } }

step 4:

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.

step 5:

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%

step 6:

Future Outlook & Ongoing Initiatives

The brand refresh remains an ongoing project, with continuous web development refinements managed through GitHub Issues.

Concurrently, we've kickstarted the development of new features, including user login capabilities for the website and the creation of a paid online course. Here's a sneak peek at our progress on the login functionality:

Brand refresh • Web design • QA

Imagine Cities

Tools:

Role:

Team:

Timeline:

step 1:

Defining the Brand Refresh Scope

V 1.0.0

Figma

V 2.0.0

Google slides

V 2.0.1

step 2:

Conceptualizing and Implementing the Brand Refresh

step 3:

Redesign Highlights & Brand Alignment

Before

After

After

Before

After

After

step 4:

Digital Tools at Any Scale

Search Engine

Search Engine

Learning Guides

Learning Guides

Creative Neighbourhood Lab

Creative Neighbourhood Lab

step 5:

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%

step 6:

Future Outlook & Ongoing Initiatives

See My Work

Imagine Cities

Receipt Digitalization

Monarch

Say Hello

Say Hello

GA4 •Active Users
‍

GA4 • New Users
‍

Hotjar • bounce rate
‍