Game Design ⋅ Competition

Strategy Game App

A mobile strategy game app designed to raise the environmental awareness of the students. We went into the final within 150 teams.

Hero image to showcase the UI of the final design.

PROJECT OVERVIEW

What is Anthropocene?

Anthropocene is a strategy mobile app designed to use in lectures. 

This app is developed for the Climate Change Creative Competition. Each team proposed a product prototype or plan to solve any aspect of climate change within three months.​ My team and I wanted to raise awareness of the environment among high school and college students by giving out a new teaching model and app to enhance their willingness to learn.

goal-

Raise awareness of the environment among high school and college students

by delivering a new teaching model.

USER-

High school and college students who are not interested in environment

are the main users.

REsult-

Made into the Final 20 within 150 teams

and finish prototyping.

DURATION

4 months (Jan 2018-May 2018)

MY ROLE

UI Design Lead - User Research, UI Design, Prototype

process

How I go through my way to the goal.

By following the design thinking process, we aim to put focus on the understand and explore stage.

The process of design thinking. Including three main stages - Discover, Explore and Materialize.

User research

Understand the user needs.

Climate change is truly an issue nowadays.

My team wants to solve the problem through the fundamental problem, which is education. In our memories, we seldom have course about environmental education, or most of them are not interested enough for the students to pay attention.

Therefore, we want to find the problem of the lecture and give out a potential solution for this issue.T o understand users' needs, we interviewed ten people and collected 27 responses with the survey. We found that:​

78%

of people experience watching videos to learn environmental education in school.

57%

of people experience taking lectures from teachers and feel bored with the same content.

87%

of people would like to take hands-on courses in order to learn more.

HMW statement

How might we enable the environmental lecture to become more interesting and more interactive?

decision

Brainstorm for Solutions

According to the result of the interview, we brainstormed to find out a solution to fit the three aspects:

Could be executed with hands-on lectures.

Should catch students' attention.

Could enable more interaction with the teachers.

A white board with discussion notes on it.

Decision

After brainstorming for possible solutions, we decided to develop a strategy mobile app, which fits every condition that can be used in lectures to learn through play.

design

Design the structure

To help figure out the information architecture of the game, we draw both the functional map with a tree structure to see whether we miss any page.
Then, we drew the logic flow of every page to make sure the pages are well-linked.

functional map

There are three main pages in the app, which are:

Landing Page.

Link the application with the lecturer.

Main Page.

Where all the actions are being done.

Shop.

Users can see the information on different assets that can be used in the game.

The functional map of the strategy game.

logic flow

A logic chart of the three main structures of the game.

live Prototype

Boom! Meet Anthropocene.
Try it yourself!

Try and play around to see how to interact with the game.
​Scroll down to see how we built it 👇👇👇

final design

Design System

To create a lively and prosperous atmosphere for the game, I have selected the five most common colors found in nature.
These colors are:
green for plants, brown for earth, blue for the sky and ocean, yellow for the sun, and red for flowers.
I have used these five colors to build the entire interface, giving the app a warm, cheerful, and natural feel.

Additionally, I have designed a series of icons to be used as game elements. Each icon follows the rule of using no more than three colors, ensuring that they do not appear too cluttered or dull on the screen.

Color Palette

The color palette used in the game app.

Typography

The typpgraphy used in the game app.

Icon Design

The collections of  icons used in the game.

Final design

Interface Design

2022 Update:
All interfaces are designed in Mandarin at first. I optimized some interfaces and translated them into English versions to meet future international students' needs.

Poster

The poster is designed to give an overall instruction to the game.

The poster of the game app used in the presentation and promotion.

Game Operation Main Screen

In every terminal, students press on the farmland to decide what should they do now. They have three buttons to choose from: Construct, Destroy or Grow Crops. Once they choose the action, the farmland will be replaced with the capital that they chose.

The screen showing the landing page of the game.
The screen showing a first stage of the game.
The screen showing the second stage of the game.
The screen showing the third stage of the game.
The screen showing the last stage of the game.

Store Screen

Once the student clicks on the action they want to do on the main screen, crops and constructions that they could choose will pop out with instructions. In this way, students may know more about the effect that the crops, housing, and animals will bring to the environment.

The screen showing the store pic.
The screen showing the store pic.
The screen showing the store pic.
The screen showing the store pic.
The screen showing the store pic.

Climate Changes

The probability of climate change occurs as more capital is constructed on the virtual land. Instructions to those climate changes help the students learn how those natural disasters affect human activities and the environment.

The screen showing the disaster - Drought with explanation.
The screen showing the disaster - extreme weather with explanation.
The screen showing the disaster - insects with explanation.
The screen showing the disaster - Heat with explanation.

challenge

Challenges we faced and overcame.

Since this was the first time for all members to design and create an app, we faced some problems.​

How to start?

We have no idea how to design the structure of the game.

What software should we use to draw the drafts and create the app?

Since this is the first time for all of us to develop an app, we have totally no idea about which tools to use at first.

How do you make sure that the app is available for educational use?

Are there any regulations for educational apps?

To solve the problems, we do a lot of self-learning exercises, such as:

Referring to similar games.

We download various turn-based apps, collect the steps and pages when manipulating them, and list the flaws of these apps to avoid the same mistakes.

Planned the workshop with the mechanical member to learn Unity every week.

By attending free online classes, I collected tips and basic skills for using Unity to create a simple prototype.

Self-learned the usage of Adobe Illustrator.

Since I have learned Adobe InDesign in the past, I learned another software by watching free videos and books in the library to draw the design and elements of the game for my members to apply in the coding.

Collected regulations on government websites.

Research for regulations and basic rules for designing teaching material.

key takeaways

Something that I learned in this project.

Participating in the Climate Change Creative Project competition was a momentous event that brought me into UI/UX. After 4 months of working,
We made it into the final round within 150 teams!

Although we did not win an award, our idea has been praised by several judges and give us suggestion to improve in the future.

Thanks to the competition to lead me into the world of UI design. It is our first time to complete an app with cooperation to diverse backgrounds members. I experienced a great time and enjoyed the teamwork with my teammates.

Cooperation of diverse backgrounds brings different ideas.

Grouping up by members from different experiences gives us an overall aspect of the app and covers each other's blind points. I realized that people from technical departments provide logical and practical thinking, while forestry members focus more on the theories and models to predict the effects.

The first impression is essential.

Since there are about 30 groups in the final round, the first impression is vital to let the judges remember you at first sight. Find out the advantages that help you stand out from the crowds.

Always focus on your key goal.

As we designed and started prototyping the app, losing focus on a specific purpose was easy. Always stop and review your work to ensure that we are on the right track.

A group photo with my teammate of four.

Thank you for reading!
Interested in more works?