TylerGAID
Published in

TylerGAID

Learn with Pinky Pea!!!

UI/UX case study for educational farm game for future blended learning

Introduction

Pinky Pea’s Family Farm is an integrated, multidisciplinary educational farm game. It is an excellent tool for the future of blended learning that helps teachers make learning and education easier by providing engaging classrooms and practicing collaboration and exploration skills for kids during the pandemic.

Problems

Covid19 has had a massive impact on the way education is delivered. According to UNICEF, only 35 percent of students worldwide backed in the classroom by September 2021. For the rest of the students, online courses are still the primary way they receive their education. In this situation, many elementary schools are also choosing to switch from face-to-face to online instruction, leaving younger children facing more significant challenges. Teachers complain that teaching online through Zoom has become very difficult because they are limited in interaction with students in the classroom. In addition, these young learners are having difficulty communicating with friends or learning how to work with others. Their teachers have to figure out how to make online instruction fun and engaging while considering the blended learning model that may exist for a long time in the future.

Our Plan

To solve this problem, we intend to create a game that can be used as an educational tool in online and offline education. The game needed to integrate different disciplines and provide an exciting learning space for young learners while also meeting the pedagogical needs of educators.

The idea we came out with is to create a farm game. More and more people are becoming interested in outdoor nature-related content during the pandemic. And farm games can cover a wide range of subjects such as math, reading, science, biology, etc., and are suitable for educators of all subjects. It can quickly bring out social topics like climate change and food conservation. More importantly, the farm can allow students to explore and collaborate, which we lack right now.

So we started looking at some of the more popular casual games for inspiration, such as Staxel, Minecraft, Farming Simulator, Harvest Moon: Light of Hope, and others to find out how a game works. After that, we investigated many educational websites for children to see what would capture children’s attention and decided to use farm animals as the game’s feature.

Animal Characters in Pinky Pea’s Family Farm

That is how Pinky Pea’s Family Farm was born, a new game that helps teachers enhance the children’s learning experience. We took into account the needs of teachers and made teaching easier through pre-made lesson plans. The teacher can control the farms through the teacher page, assign tasks to the children, and use the farm as a classroom presentation. At the same time, the young learner will have fun learning fundamental math problems by taking care of chicks and more challenging reading problems by growing plants. Homework will become funnier too! Children can collect achievements and medals by completing homework tasks and having their animal friends! Everyone can use their imagination to create their farm and learning experience in this game.

The Game Design Process

User persona

To narrow down our users and develop a better user experience, we considered the two groups — kids and educators and created the user personas for each.

Student

Jimmy is a six-year-old boy who has been taking online classes for three months. During studying at home, Jimmy was interested in raising small animals. But it was clear that he did not have any experience raising animals. At the same time, his teacher Mary used Pinky Pea’s Family Farm as a learning tool for her class. That couldn’t be better! Now he can complete his daily learning and take care of his farm animal in the game.

Educator

Mary is an elementary school teacher. She was actively looking for ways to make her class funnier. But she doesn’t want to use an entirely online tool and thinks to use the same device in future face-to-face teaching. Pinky Pea’s Family Farm became her first choice.

Site Map

In the next step, we start planning the game’s pages and creating the site map. It clarifies how many steps are needed to fulfill the user’s requirements.

Site Map

User Flow

After that, we made user flow, and customer journey maps to identify problems users might encounter to achieve their goals.

User Flow for Student
User Flow for Educator

Customer Journey Map

Journey Map for Student
Journey Map for Educator

Wireframing

Using our user flows and site map, we sketched out the basic structure of the game. We continued to refine our sketches and built a digital low-fidelity wireframe. Since our game is heavily illustrated, testing the wireframes first before explaining each page was necessary. After working through a few UX concerns, we worked through demonstrating each low-fidelity wireframe and slowly imported the assets into Adobe XD so we could add some animation.

Low-fidelity Wireframe

Logo Design

In the logo design, we start with two different directions, one is more traditional, and the other combines our animal character ideas. We decided to use one of our protagonists-piglet Pinky Pea, to assume the logo’s mascot.

Logo Sketch
Final Logo

Pinky Pea is a pink-loving piglet, and we have no doubt combined this into our design. After our logo was completed, the overall style of our game also had a general direction. Since it is an educational software for kids, we leaned towards bright colors. These colors bring Pinky Pea’s world to life.

Style Tile

Animal Character

Animal characters will play essential roles on the farm to guide and help children complete their daily tasks. They will also become the children’s best friends. We have given each animal character a different personality, occupation, and function. Coco is a pigeon that delivers mail for the children. Luna runs the farm store with her brother. Pinky pea and Oscar are the working partners on the farm, etc.

ID Cards for Animal Characters

On-Boarding

Pinky Pea’s Family Farm Game Video

Our biggest concern in creating the game is to make sure our users know how to use the game. So we spent a lot of time and effort refining our teaching section to guide our users on using the game.

Students

We used dialogues and direct demonstrations for the younger students to explain the whole game slowly. And also marked each step with a red exclamation point so that the children could understand it more clearly.

Introduction of Farm Facilities

The farm’s shop allows students to learn how to manage their property and a place to sell tools, seeds, and new animals.

Shelves and Shop Assistants in the Farm Shop

After successfully ordering the items, they will be delivered to the farm immediately.

Each area of the farm represents a subject at school. Students can access it through a task list or by clicking on the images. They can choose to look after their animals and plants or complete today’s assignment.

Caring for Animals
Complete the Tasks

Students can get feedback from the teacher, get items or peas (the money in the game), receive news from the farm every day. We also provide students with the game rewarding system, in which they will reward after completing different tasks.

The Mail System & Game Rewarding System

Educators

And for educators, we’ve streamlined all the information in one handbook so educators can quickly navigate through all the information they need and return to read at any time.

Handbook

After reading the instructions, teachers can plan their education plans. They can choose different subjects and modify the content of learning at any time according to the classroom situation.

Setting up Plan
Teacher’s Home Page
Student Flow
Educator Flow

We also used illustrations to design two sets of stickers that teachers could distribute to students as rewards to increase their motivation.

Stickers of Pinky Pea’s Family Farm

These are example diagrams of how Pinky Pea’s Family Farm could implement the game in reality. A teacher can teach through a smartboard, while students can use their tablets to study and do homework.

Demo Chart

Conclusion

After various difficulties, we finally reached our desired goal. This group work was a precious memory for us, in which we helped each other, communicated, and repeatedly revised our work. Without any one of us, we would not have completed this work. At Pinky Pea’s Family Farm, we tried our hand at animation for the first time, making interactive games, teaching young children, and even doing voice-overs together. We grew like a water-absorbing sponge in the process, constantly absorbing new knowledge and challenging ourselves.

Designer: Yiran Chi & Huixin Zheng

Art director: Abby Guido

XD: Play Game

Tyler School of Art and Architecture, Temple University

--

--

--

Graphic & Interactive Design Program at Tyler School of Art and Architecture at Temple University

Recommended from Medium

Cant wait to see this project come out.

UX Review: Apple News+

‘Thinking Outside the Box’ while being inside of a box

Skeuomorphism in UI: an outdated concept nowadays…or not?

How to invent a Figma plugin

Putting the AR in Wall ARt

3 Ways create very amazing protopholio in 1minut

How I design identity with User Experience & Data : Case study

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
HUIXIN ZHENG

HUIXIN ZHENG

More from Medium

A WALKTHROUGH ON HOW YOU CAN EASILY CREATE BEP-777 SMART CONTRACT ON CREATOR MAINNET

721craft: a token gated Minecraft server

MAD Magazine Creative Team Joins Award-Winning TheIdea Integration Co.