Imagine Cities

Brand refresh • Web design • QA

Imagine Cities

As part of Imagine Cities’ design team, I worked alongside a team of UI/UX designers and developers to refine the organization's visual identity and website to bolster their visibility.

These improvements aim to attract stakeholders, increase engagement, and reinforce their long-term vision for growth via their digital products and social initiatives.

Tools:

Figma
Google Slides
GitHub
Mural
Hotjar
Google Analytics

Role:

UI/UX Designer (collaborating with 2 other designers, 3 developers, and the founder)

Timeline:

2024 - Ongoing

step 1:

Defining the Scope

Website redesign, with revisions that convey meaningful change without a full overhaul.
Version 2.0.0 (& 2.0.1) of brand guidelines, including a new colour palette and font system.
Implementing some ‘future-ready’ features.

V 1.0.0

Figma

V 2.0.0

Google slides

V 2.0.1

step 2:

Brainstorming

Through multiple creative meetings, we conceptualized and implemented the brand refresh. We took a careful approach, making sure to:

a) Retain the original message and identity.
b) Incorporate scalable visual components.
c) Refine efficiently.

Tap or hover to zoom

step 3:

The Brand Refresh

The Homepage

The "Learn More" CTA scrolls down to a section featuring a short description of Imagine Cities.
Rather than a carousel, there is now an expanded section dedicated to Imagine Cities’ three digital tools to make user exploration easier and faster.

Before

After

Our Digital Tools Page

This page was newly added to provide deeper insights into the digital tools.
I created a simple gif of the organization's Ecosystem of Adaptation to reiterate their mission and how the tools play critical roles in achieving it.

About Us Page

The organization's history, values, and volunteer opportunities were covered in a more holistic, singular About Us page.

Before

After

step 4:

Digital Tools at Any Scale

We worked collaboratively to ensure that the website is accessible at any screen size, 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.

[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; } }

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:

Data from Google Analytics & Hotjar

In an effort to quantify user engagement after the website refresh, I viewed data from Google Analytics and Hotjar 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:

Next Steps

The brand refresh is an ongoing project and any needed web dev refinements are continuously updated via GitHub Issues.

Concurrently, adding login features for Imagine Cities’ website and building a paid online course have both been kickstarted. Below is a sneak peek of our work on the log-in capabilities:

Brand refresh • Web design • QA

Imagine Cities

Tools:

Role:

Timeline:

step 1:

Defining the Scope

V 1.0.0

Figma

V 2.0.0

Google slides

V 2.0.1

step 2:

Brainstorming

step 3:

The Brand Refresh

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:

Data from Google Analytics & 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:

Next Steps

See My Work

Imagine Cities

Receipt Digitalization

Monarch

Say Hello

Say Hello

GA4 •Active Users
‍

GA4 • New Users
‍

Hotjar • bounce rate
‍