Spring 2022
7 weeks

The_Game of Design_ is a digital board-game of a designer’s journey


The AIGA Design Census is a comprehensive report of 9432 entries that provides factual and emotional aspects of the design industry. Our team wanted to showcase the intricate levels of data by creating an interactive board-game that allows designers to learn more about their place in the community.

I was responsible for developing branding, illustrations, and UI/UX prototypes
Team
Dorothy Li
Maggie Ma

Skills
Branding
Illustration
Web Design
Data Visualization







Concept - A Digital Board Game 

How might we educate designers about their place in the current industry?


As designers, we go on unique journeys to grow and discover ourselves. Our board game visualizes realities of the design industry by curating personalized game play based on the user’s background in design.




The Site
The site uses characters of a board game for players to navigate, with each block sparking an interaction. To create a sense of unpredictability, the overall board is hidden until the user reaches each block.


 


Landing Page

Instruction Page



User Flow

Interacting with Data


The user navigates through 25 blocks of the board by interacting with cards that appear on each block. By inputing their answers on the cards, the user gather stickers as a reward. As the final takeaway, the user would receive a personalized sticker collection to learn more about the statistics related to themselves, to and share with other people.









Card Type 01

About Me Card



Invites user to input answers based on personal experience and background.









Click to view variations






Card Type 02

Reward Card


Presents user with a reward scenario, in which they will learn facts about the industry and earn a happy face sticker.

 




Click to view variations




Card Type 03

Obstacle Card


Presents user with an obstacle scenario, in which they will learn facts about the industry and have a happy face sticker taken away.





Click to view variations




Card Type 04

Quote Card

   Introduces a quote by real designers that has a personal voice about the design industry.





Click to view variations




Card Type 05

Risk Card


Presents user with a situation with different outcomes based on their choice. The backside of card will display corresponding data of the outcome.




Click to view variations





Ending the Journey with Purpose


After navigating though all of the blocks, the final screen shows all the stickers that the user has collected along the way. When hovering over the sticker, users would be reminded of the statistics related to their choices throughout the journey.





Completion page













Visual System

Creating a Playful Identity of the Board Game 


The combination of a game-like typeface and vibrant colors helped form a lighthearted mood of playing a board game. The supporting stickers and cards are designed in a simple yet quirky approach to provide an additional personality to the brand.  Finally, we used different methods of data visualization to show variety in the different types of cards.













Initial Research

Working with the AIGA Dataset


Before designing, our team studied the dataset by finding correlations between the different categories. We were especially curious about a designer’s satisfaction with their work, and we compared the satisfaction levels with categories like job title, salary, years of experience, and gender.






The Concept

The Board Game Narrative


Our team decided on creating a digital board game as it illustrates a metaphor of an unpredictable yet charming journey with challenges and surprises. We saw the opportunity of integrating different interactions that leads to unique outcomes of the journey.



Moodboard



When designing the layout of the board, we focused on finding a desirable proportion of the board, cards, and collected stickers. We settled on a layout with the overview of the board for users to keep track of the journey while focusing on the interactions with the cards.



Layout exploration






Reflection

This project allowed me to explore data visualization with a highly visual approach by creating a digital game. It was interesting to explore integrating the customization aspect of the game into learning opportunities. After establishing the visual system and flow of the board, I learned to shift into an asset-based workflow, in which the assets will be delivered to the developer.

If more time is allowed, I would explore more micro interactions such as sticker animations and moving hints that would  keep the experience engaging throughout the journey.






Fall 2020
4 weeks

Emotions in Modern Love visualizes what writers associate with “Love”


Modern Love is a weekly column from the NYT that features reader submissions of stories around love. Pieces range from short 100-word submissions to long stories. Our team realized the diverse and intricate relationships revealed through the entries, and designed two different views to allow exploration in different scales and relationships between components of each article.

I was responsible for designing Web interface prototypes.
Team
Elizabeth Han
Mimi Jiao

Skills
Data Visualization
Web Design 









Site 01

Emotions View


The emotions view visualizes the proportion of the six emotions that we chose to explore: joy, anger, sadness, fear, disgust, and surprise. With each article represented by a circular shape, the viewer can explore the various emotions associated with each article.


View Website








Site 02

Subject View


The subjects view allowed exploration in the relationship between various subjects and the date that the article was published. Viewers can zoom in and out of the chart to explore different subjects and trends.


View Website












Design Process

Initial explorations

We began our design process by defining the most important aspects of articles in “Modern Love” that can spark reflection when visualized with data. We were greatly inspired by organic visualization styles that present the humanness in emotions.


Moodboard



Our initial explorations were focused on ways to group data and represent the emotions through lively ways. We realized that it was visually redundant when the same emotions overlap throughout the groupings. Since we want the users to understand the diverse emotions and topics in “Modern Love” articles, we decided to design two view with different purposes.








Wireframes


We chose colors that are commonly used to identify corresponding emotions, and used opacity to allow overlapping in the visual representation.




Colors



When designing the two different views, we focused on finding ways to present data by the purpose of each view. In the emotions view, we used a macro-view of all articles to help viewers make connections of emotions within an article. On the other hand, the subject's view utilized a graph structure to better present the various subjects and its relationship with the year published.



Emotions View
Subjects View




Reflection


This project gave me an opportunity to work in a diverse team and understand the affordances of using code as a creative medium. One challenging aspect of this project was to work with data in the process of designing. It was impossible to predict the outcome of screen designs before implementation, which gave me limitations when wireframing the UI. However, the uncertainty became the beauty of working with data, as we were pleasantly surprised by the outcome of our visualization.





Spring 2021
6 weeks

Creating a brand identity for Vancouver SEGD 2022


Being a group of over 2200 members across 35 countries, SEGD is the global, multidisciplinary community of professionals who plan, design, and build experiences that connect people to place.

I designed the SEGD 2022 conference identity with the presumption of the event being held in Vancouver. With the objective of strengthening the connection of the public space and the people who interacts within it through placemaking, I took the approach of bringing the characters of Vancouver into the identity of the cross-disciplinary event.
Team
Individual

Skills
Branding
Experimental Type
Graphic Design
Signage Design












Concept

A Creative Space that is dynamic and constantly evolving in new directions without boundaries.

The logotype draws inspiration from Vancouver’s nature and ocean with the characteristics of free-form and fluidity. The movement is guided by strokes of varying weight, colorful highlights, and a slight slant of the letters.





Logo Animation


Logotype with alternative color and arrangement 




Design System

Color and Supporting Typeface

The main colors consist of a dark blue that resembles the ocean and a contrasted cream color as backdrop. Three supporting colors are chosen as highlights, which inject elements of excitement to the creative event. At the same time, a simple and legible type, is chosen as the supporting typeface to create contrast with the complexity of the logotype.






Communication piece

Posters


These posters will act as communication pieces before and at the time of the event. I controlled the amount of information on the posters according to scale. With the street posters, I superimposed close-up sections of my logotype with the imageries of Vancouver to establish direct connection between the city and my design outputs.





 



Communication piece

Interior Signage


I designed navigational signage that exists in different scales and provides important information regarding to each floor and the surrounding location.






Communication piece

Merchandise 

To further enhance the identity of the event, I designed event-specific peripherals such as name cards and merchandise following the established design system.






           






Process



Reflection


This project prompted me to carefully examine the place I am designing for and to extract essential characteristics from the place to inform my design decisions. I learned that it is important to balance between introducing transformation and new assets to the design while preserving the uniformity of the whole. All variations and expansions in design need to enhance the Identity of the event.




Fall 2020
10 weeks

Jinxi: Water Sounds is a book inspired by a trip to the water town


This is a materialization of one of the many journeys that I took during the pandemic to understand my hometown, Shanghai. Through my own camera lens and conversations with the locals, I explored the extraordinary lifestyle that people lead just 57 kilometers outside of Shanghai.
Team
Individual

Skills
Graphic Design

Photography








Overview


This book features my personal photography diary of a day-trip to Jinxi, translated documentation of my interviews with the people, and my research on the history of water towns.

6.5 x 9.5 inches, 61 pages




         

         


Process



Fall 2022
15 weeks

Designing an informational poster on climate change and healthy eating.


Fighting climate change at an individual level can seem like an endeavor that is challenging to implement in our daily routines, however, there is a solution to shift our food consumption which can both benefit personal and planetary health: Planet-based diets. Food as a vital resource for human health and survival, is also at the same time, the single strongest lever to optimize environmental sustainability on Earth.

This informational poster presents the environmental impacts caused by food production and how to approach a planetary diet with proposed food category portions from the EAT-Lancet report. 

Full Process
Team
Individual

Skills
Graphic Design 
Infographic Design
Research











Design System

Creating a clean visual language for a complex collection of data

To tell a story that is complex in nature with different levels of data (text, imagery, infographic), the design system gives a simple visual language that will not distract from the information presented. The typography is legible and the illustrations are drawn with black outlines which clearly indicate the ingredients of each meal. The color system is rationalized by categorizing similar items and making them co-exist within different sections of the poster.










Reflection


The design process of presenting a rigorous amount of information requires precision in layout and a balanced distribution of texts, graphs, and imagery. Starting with establishing the design language for the main focal point of the poster, the example meals with the center piechart, I was able to iterate on how the rest of the poster finishes the story with visual consistency that maintains the viewer’s interest. The challenge of the process was to construct a contrasted yet cohesive color palette that can be utilized in different sections of the poster to make sense of the color system. I gained experience in color testing for a specific printer and creating iterations based on test results. If I have more time with the project, I would expand the example planetary plates from more regions of the world to create representation for a diverse audience.



© CHARMAINE QIU 2023