Back

Artifice Street

Artifice Street is a video game I created for my graphic design senior thesis project. In this game, users interact with different virtual storefronts and then play activities and mini-games that teach different aspects about graphic design. My senior thesis was about helping the general public more fully appreciate graphic design in the world around them. After interviewing several professional designers about what makes graphic design stand out to the general public, I gathered that it was a matter of teaching people. Thus, Artifice Street aims to teach users, in a fun and engaging way, about just how much the world needs graphic design. *All menus were designed by me, and all illustrations were drawn by me.
PROJECT TYPE
Senior Thesis Video Game
YEAR
2024-2025
Standing beside my thesis on opening night

The Challenge

For this video game, I had to teach principles of graphic design without making it too educational. If the video game was just a matter of reading things about graphic design, that's just like telling someone what they should think. I wanted the video game to help the user arrive at new understandings about graphic design that they can’t get from just reading. They have to interact with the game.
Welcome screens of each store
UI/UX notes I took observing Persona 5 Royal

Ui Ux Research

Having never designed a video game before, I decided to look to the Persona games for inspiration. These are my favorite games! Not only are the stories good, but the visual design takes a very stylized approach. Every aspect is designed uniquely and beautifully.
While observing the UI/UX design, I took careful notes on how information was communicated. Which unique button shapes were used. The feedback after selecting an option. Hover states and pressed states. How much asymmetry was used. The extent to which 2D drawings were utilized. There was a lot to learn!
UI/UX notes I took observing Persona 3 Reload

Understanding the Psychology Behind UX Design

Once the visual inspiration was gathered, I had to do some research into the psychology behind UI/UX design, because my thesis was about getting the general public to notice and appreciate design. Cognitive psychology is the primary force behind how we notice and react to things. Three books that shaped my research were: Laws of UX, The Principles of Beautiful Web Design, and Design, Create, Thrill.
The books I used to research cognitive psychology in UI/UX
Argument identified

Thesis Identified

After being equipped with both visual and psychological research, I began fleshing out what exactly it was that I was arguing. I pondered what was the X factor that made people notice design in the world around them, and felt strongly that one of the main factors has got to be when people have a positive user experience with the design and product.
But where do people have good user experiences outside of mobile apps and websites? I needed a place that was teeming with great design so as to provide a good backdrop for the game. It hit me that a city is the perfect place to have a video game of this nature.
Setting of game identified

Planning the Gameplay

Once I had the foundational ideas in place, I began planning out how the gameplay was going to work. From the epiphany that the video game should be set in a city-like setting came the idea that the users could interact with menus from storefronts. I began sketching what a potential city center could look like.
Initial sketches for the plaza

Choosing the Stores

I started off extremely ambitious. I wanted to do five stores, each with multiple activities in them that taught a distinct lesson about graphic design. My initial ideas were a movie theater, a bookstore, a music store, a cafe, and a cable car stop. It wasn’t until long after that I realized that would have been way too much work for one school year. I cut out the movie theater, changed the cafe to a bakery, and changed the cable car stop to a general train station.
Initial sketches for the storefronts

Illustrating Each Store

One of the most time-consuming parts of creating the game was hand-illustrating all of the assets and backdrops. One reason for this was that the stores each had to be stylized to fit the store’s brand identity. For example, the bakery was to be a pink themed pastel bakery. Thus, the drawing had to reflect that.
Lineart for the store interiors

First Store — Bakery

Bakery Concept

The bakery, Cloud Garden Bakery, is a playful and pink themed bakery specializing in frosted desserts. It had to have a very specific look to it, otherwise the mini-game would be much more of a subjective task with too much left up to personal taste and preference.
Cloud Garden Bakery Interior

Planning the Activity

For the bakery activity, I wanted a game where the user could be put in the shoes of a designer, and carry out the simplified version of some tasks that a designer would do. In this task, the user is asked to design the new logo for Cloud Garden Bakery by choosing between three fonts and three colors. It’s simple, but it requires thought.
Bakery activity initial brainstorming

User Journey

After entering the bakery, the user clicks into the activity and reads the directions. The font selection part of the activity begins, and the color selection part comes immediately after. At the end, the user gets to see their choice reflected on a promo poster for the bakery, with feedback from the Cloud Garden Bakery staff on the design choices.
Bakery activity user flow

Revisions and Reiterations

Pinning down the look for the bakery was not difficult, but I had to be deliberate about really only using pinks. Otherwise, the visual design of the bakery brand would be a little crowded and distracting. For this reason, I kept everything the same shades of pink, so the user gets a feeling of consistency.

Gameplay

Transition from the plaza to the bakery
Activity directions

Task

The task is to help rebrand the bakery by choosing the font and color for a new logo. I decided on a rebrand activity because an activity where the user has to come up with a new logo from scratch would be too difficult to implement.
Font selection

Design the Logo

There are four different fonts to choose between, and three colors. I had to first choose which colors to present to the user, to ensure that the right choice is pretty clear, but that they could reason through the incorrect choices.
Final feedback

Lesson

The lesson of this activity is that there is a lot of reasoning that goes into choosing fonts and colors. Each choice communicates something different. A bakery logo using the font Helvetica is a completely different bakery than one using a round and playful font. It helps teach the user that all the logos in the world around us were designed with intention and critical thinking.

My Drawings

Some assets in the bakery that needed to be drawn included the cake on the menu cover, a cake box for the activity portion, a plate for the menu to sit on, and a cake icon to be pressed.
Timelapse recording of bakery interior illustration

Second Store — Music Store

Music Store Concept

The music store, City Pulse Records, is a record store with digital kiosk screens near the back, which is where the activity takes place. City Pulse Records has a laid back and vaporwave look to its designs. I chose a dark purple theme for this store so that I could design in dark-mode for the user interface design.
City Pulse Records Interior

Planning the Activity

The activity in the music store is less of a task and more of an experience. I was inspired by the old Apple Music user interface feature where the background of a playlist would be a color-picked color from cover art that you uploaded. It was this that gave me the idea that graphic design can enhance the mood of a playlist.
Music store activity initial brainstorming

Revisions and Reiterations

The visual brand identity for City Pulse Records is informed by 80s synthwave aesthetics. I incorporated the old Apple Music user interface feature by having the screen lay on top of moving neon circles in the back.

Gameplay

Transition from the plaza to the music store
Activity directions

Activity Outline

This activity shows how graphic design elements all uniquely affect mood, particularly the mood of a playlist. Playlists are already so often mood-based, and graphic design enhances that. You can choose between four playlists: happy, chill, energetic, and sad.
Playlist updating with your changes

Redesign the Playlist

When prompted, the game will ask you to change three things: the font, the cover art, and the color of the buttons. They change to more fully support the mood of the playlist.
Listen to the playlist when done

Lesson

By the end of the activity, the fonts now communicate the tone of the playlist, the cover art is an interpretation of the playlist’s mood, and the color of the button matches the colors from the cover art. This activity teaches users that graphic design has a psychological effect on mood.

My Drawings

For City Pulse Records, the main challenge was drawing the playlist cover art. I had to think of scenes or things to draw that could almost universally be understood to convey the mood. Each playlist had to have a distinct set of main colors, so that meant I couldn’t repeat colors, either.
Timelapse recording of music store interior illustration

Third Store — Bookstore

Bookstore Concept

Ivory and Ink Bookstore is a vintage bookstore with large open windows, giving you a view of the city while you browse books. The book cover and opening spread designs are inspired by both the Art Nouveau and Art Deco movements.
Bookstore Interior

Planning the Activity

The bookstore activity is my personal favorite because it does such a good job of sneakily proving to the user that the world would not function without graphic design. In this activity, the user has to guess the genre of a book that has no front cover. The user then realizes just how important graphic design is when it comes to situations where the design informs choices.
Bookstore activity initial brainstorming

Revisions and Reiterations

I really wanted for the bookstore to have an artfully vintage aesthetic, which was why the modal dialogs are beige, and why I chose a scroll for the modal dialog in the first place. The front cover and opening spread design of the book were the most difficult to draw. I ended up going with a design that’s a cross between Art Nouveau and Art Deco.

Gameplay

Transition from the plaza to the bookstore
Activity directions

Activity Outline

The bookstore activity is based off the phrase ‘Don’t judge a book by its cover’. I think this phrase applies to people, but not necessarily to design. Especially when it comes to book cover design! A book’s cover informs the reader of what the book is about, which helps the reader decide whether they want to read the book or not.
Selection for books with no cover

Guess the Genre

However, in a world where books do not have front cover designs, it’s suddenly way harder to deduce what the book is about, especially if the title is ambiguous. The user now has to guess which genre the book is, based on the title of the book alone.
Book cover and genre reveal

Lesson

Since I designed and came up with the titles, I purposefully made them misleading so that the user would understand how much easier this task would be if there was the presence of graphic design. Without the cover, the reader is completely in the dark about what the book’s contents are. It could be a multitude of genres as well! But I designed the covers in such a way that the genre is immediately obvious as soon as they are revealed, thus proving the crucial role that graphic design plays in this game.

My Drawings

The bookstore required slightly more drawings, including two different drawn backgrounds. None of the other stores have as in-depth drawn backgrounds as the bookstore. The book covers were made using free clip-art, in order to imitate the style of many book covers that are not hand-drawn.
Timelapse recording of bookstore interior illustration

Fourth Store — Train Station

Train Station Concept

The train station is called the Hidden Village Station. Of the four stores in my plaza, I wanted two of them to have a more modern visual identity, and then two to have a vintage visual identity. The Hidden Village Station has a vintage look. The designed assets are inspired by the vintage travel ephemera from the 20th century.
Hidden Village Station Interior

Planning the Activity

The activity in the train station is also a guessing game. I felt strongly that my video game needed an activity about how graphic design shapes our understanding of a city or a country. So, in this game, the user has to guess the country of a stamp by just looking at the design.
Train store activity initial brainstorming

Revisions and Reiterations

Because the visual identity of this game was also inspired by vintage 20th century aesthetics, I emphasized the beige colors to convey the old paper feeling.

Gameplay

Transition from the plaza to the train store
Activity Outline

Task

The user has to guess a country just by looking at a stamp’s design. This game reinforces the existing visual associations tied to the following countries: Greece, Egypt, China, and the Bahamas.
Stamp selection

Guess the Country

For the stamp designs, I had to ensure that the answer is clear, while doing my due visual and cultural research on the countries in order to show respect to the countries I was exhibiting. I represented Greece through an ancient Greek bust, Egypt through a pharaoh, China through a dragon, and the Bahamas through a tropical flower.
Stamp graphic design elements explained

Lesson

The user feedback I got on this game in particular was, “This is so obvious”. Yes, it is. But, that is the exact point of the game right there. Why is it obvious? Because of graphic design! Through graphic representations of each country, we have come to associate visual elements with them. That is the point of this game.

My Drawings

The bulk of the drawings in this game relied on the stamps. Carrying out the stamp drawings were simple, but deciding on what to draw, and what style to draw it in were not. An ancient Greek bust has to look regal, for example. A Chinese dragon has to have a lot of detail. All of these decisions made the stamp illustration progress a good challenge for me.
Timelapse recording of train store interior illustration

Bonus: Plaza

A regular day at the Plaza

Plaza Concept

The plaza is actually one of the most important parts of the video game. This is the ‘home page’, so to speak. This is where the user will return to every time they want to navigate the individual stores. It has to have a central hub feeling to it.
Artifice Street

Planning the Plaza

Without the help of icons, users might not know they can go inside the stores. Even in my first brainstorming session about the plaza, I knew I had to use flashy icons in front of each store to communicate that the user can press the button and go inside the stores.

Some of the buildings are based off of the Victorian houses in San Francisco. I have always been drawn to the pastel colors and intricate details of those houses, so I decided to include them in the plaza.
Plaza initial brainstorming

Layout and Structure

Laying out the plaza was pretty challenging. There are so many ways that something like a plaza can be communicated! A lot of seemingly small decisions had to be made, but I knew they would greatly impact the feel of the plaza, so I had to deliberate on a lot of different layout options.
Sketching out different layouts

Different Renditions

My initial drawing for the plaza had a curved structure to it, with a pool in the middle, inspired directly by The Venetian Resort in Las Vegas and Macau. The issue with that was there would be no room on the storefronts for the name of the store to be displayed, and the floating icons would be too crowded.
Timelapse recording of plaza illustration

Thesis Exhibition Gallery

After working on my video game for 6 months, I finally got to exhibit it to the public at my school’s annual senior thesis exhibition extravaganza, called the NEXT Festival. I’ve attended these festivals in previous years as well, and I always wondered what I would present for my thesis when my time came. Finally, it was my turn, and it ended up being a fantastic experience. I was overjoyed that people were actually playing my game. The two semesters' worth of work finally paid off. Here are some of the photos I took from the NEXT opening night!

Thesis Book and Promo Poster

Along with the actual project, my thesis professor also required us to write and design a book detailing the argument and process work of our thesis, as well as a promo poster representing the heart of our thesis. My book is called You Love Graphic Design Too, You Just Haven't Noticed It Yet, and the concept behind both my book and my poster is that the general public often takes graphic design for granted, but that everyone benefits from it. That's why I drew a girl stopping in her tracks to look at a city center that is bursting with graphic text everywhere. That is the reaction that I believe everyone should have to graphic design!

Contact Me

Let's work together! I am very responsive on email and would love to hear from you. Find my Linkedin here.
Send me a message anytime at hello@meimei.lu!