ABOUT👋

Reshaping Identity of

the Space Centre

as Vancity's Tech Hub

Honorarium-based Non-Profit Organization Project

Design System Establishment | UX/UI Design | Sep 2024 - Jan 2025

H.R. MacMillan Space Centre Website Revamp

H.R. MacMillan Space Centre is British Columbia's not-for-profit space science museum and planetarium. The Space Centre provides spaces not only for its permanent exhibits but also for community purposes, such as public lectures and events, school and public programs and cultural activities. I had an opportunity to collaborate with Space Centre's marketing team in revamping their project.

Throughout 4 months, I, along with a fellow UX Designer, established a design system with reusable components, then created a visual mock-ups to present a new website information architecture.

Main Roles

  • Design System Component Creation

  • Layout Audit

  • Re-arrangement of Information Architecture

  • High-fidelity Mock-ups

Client

Team

Jae Eun
Valeriya

Tool

Figma

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Here is the overview of how we established micro design system.

Moodboard to Style Guide

Space Centre provided us with a mood board and a brand personality as "nostalgic and futuristic".

Moodboard to Style Guide

Space Centre provided us with a mood board and a brand personality as "nostalgic and futuristic".

Moodboard to Style Guide

Space Centre provided us with a mood board and a brand personality as "nostalgic and futuristic".

First, we identified the scope of the project.

This project started with a request from the Space Centre's Marketing Team, who tasked us to "revamp the website by enhancing UI design". Further in our meetings with the Marketing Team, Valeriya and I were able to summarize key information.

Business Objective

Turn the Space Centre into a new “Tech Hub/Innovation Hub” for emerging set of audience, such as Vancouver AI Community or cultural conventions.

Design Objective

Create visual artifacts, aligning with the moodboard from the Marketing Team, to have a successful hand-off from design to development.

We were then invited to Space Centre's Mid-Autumn Festival to see how the Space Centre is being used for "Tech Hub/Innovation Hub" purposes.

Valeriya

What are some areas that reflect business objective for the Space Centre to be used as a hub?

Jae Eun

I see that people are being drawn to activities with physical incentives completely novel to the Space Centre, such as moon cake displays and lion dance.

Valeriya

Unfortunately not many people are seem to be interested in permanent exhibit.

Jae Eun

Can we then highlight the areas where the Space Centre's being used for novel, innovative purposes? Like venue bookings for public events?

Valeriya

That sounds good, that also aligns with the business objectives to promote the idea of Space Centre as a multi-purpose venue for the public.

I created Information Architecture to curate areas worthy of highlighted.

Jae Eun

I see that there are many redundant pages, what would 'Learn > Kids & Family' mean, for example? How can I make it clear that the Space Centre offers more than just permanent exhibits?

I then made wireframes, starting from a navigation pane, reflecting the updated IA.

I transformed high-fidelity wireframes into responsive mock-ups & reusable components.

Based on my low-fidelity wireframes, Valeriya made high-fidelity wireframes with colours and typography that we have defined. As she does so, she also defined visual guidelines of how key components, such as buttons, cards, and chips would look.

As you can see above, I then transformed the wireframes into responsive visual mock-ups and ensured that the components have consistent styles.

Here is an example of how our conversation went.

Valeriya

Hey, here is a wireframe for something that can be a 'card' component. It's in our landing page wireframes.

Jae Eun

Awesome, I will make that a component in Figma, and make that responsive. I can also make variants of that component…

Jae Eun

I've made the 'card' components in Figma! I made variants to that component.

This can be used for when we use long list of items in different categories, with filter options.

This can be then used for long list of items in the same category, such as blogs.

I developed interactive prototype.

The navigation bar fully reflects what the Space Centre has to offer, aligning with their business objective to promote it as a "Tech Hub/Innovation Hub".

The navigation bar fully reflects what the Space Centre has to offer, aligning with their business objective to promote it as a "Tech Hub/Innovation Hub".

The navigation bar fully reflects what the Space Centre has to offer, aligning with their business objective to promote it as a "Tech Hub/Innovation Hub".

The mock-up shows how the various programs and offerings are organized by card layout and filters.

WORK✨

Prev.

Prev.

Prev.

Go up

Go up

Go up

Next

Next

Next

CONTACT 🙌

@JAE EUN KIM 2024

@JAE EUN KIM 2024

@JAE EUN KIM 2024

CONTACT ME 🙌

CONTACT ME 🙌

CONTACT ME 🙌

CONTACT ME 🙌