City Wars

Project Overview

City Wars is an interactive web experience that we created for The project is a campaign for May 4th – May the Fourth Be With You, which is a parody of the movie of the Star Wars Franchise: May the Force Be With You. We were asked to build an immersive experience that utilizes the Star Wars theme to drive traffic to


The premise of this highly visual and interactive campaign is for users to toggle through different negative and positive characteristics of a given city and then assign it to the dark or light side. We created light facts and dark facts for each city that users can easily navigate before making a decision. Examples being weather, cost of living, safety index, HPI and unemployment rate.

Screenshot of cities that voted as Dark Forces.
Screenshot of cities that voted as Light Forces.
Example of Miami's city facts

User Flow

Before interaction was developed, user flows were created to help us review how users will interact with the website and if the conceptual model agrees with the user model.

For this experience, we designed two share functions – one is for sharing the result of a user’s vote and the other for sharing the entire web experience. We anticipated that this will increase the brand visibility across the social networks.

Screenshot of individual city sharing function.
Screenshot of whole experience sharing function.


We designed the cities based on the Cloud City from Star Wars. According to the famous trilogy, the “Cloud City” is a floating metropolis of sophisticated beauty and political freedom.

"I saw... I saw a city in the clouds." ― Luke Skywalker
Example of city illustrations. 50 cities are illustrated by Shufei Ma and Kefang Ning.
Style guide of City Wars.