Flower Power

Here is the Teacher Pamphlet.
Here is the app. It is for iPad only.

Getting Green: Trash Traders Postmortem
Project Flower Power was a project in cooperation with the sustainability club of Steenrod Elementary, an elementary school in Wheeling, WV. The goal of the project was to create a game to help teach the students about recycling and living more sustainable lives. The team was composed of Kacey Eichen, the internal producer who dealt with scheduling, instructor interfacing, and team and project management, Chen Longyi , the programmer on the team that focused on implementing front-end functionality and UI, Xiong “Joe” Zhenhao, the programmer who focused on the networking and server functionality, Jibran Khan, a designer on the team, Mai Ao, the team’s sole artist, and Jacob Rosenbloom, the team’s other designer and external producer who interfaced with clients and playtesting partners. After fifteen weeks, we created a networked iPad game about sorting and recycling for 4-16 players, played across 4 iPads, that sat in the center of a lesson plan about how to be more sustainable in everyday life. The game has each iPad become a recycling center at which trash of that center’s specific type — paper, plastic, metal, or glass — can be turned into a processed material that can be used to help create green products for the city and lower pollution. The players can trade trash amongst themselves to ensure that the trash goes to the correct center to be processed. Additionally, players can trade their processed components to other centers, as the products able to be made are different for each center and often require multiple types of processed components to create.
Continue reading “Signing Off: Postmortem”

This is it, our last week, and it was a MASSIVE one. We had five playtest sessions: ETC Festival, faculty playtest, Steenrod, Avonworth Elementary School, and Connoquenessing Valley Elementary School.

We finished the tutorial, three difficulty settings, and added in a score page to allow guests of the ETC Festival to compete while they collaborated to save the planet. The festival showing was great. We had players of all ages playing and recycling. We were even featured in an article!

Steenrod had a great time!

and we even got to run through some of our teacher handout.

The teacher handout seemed to spark a lot of good discussion, but because Steenrod has been so invested throughout the entire process and we are working with their Green Team, the data may not be the most representative of an actual usage.

With Avonworth, we only got a few minutes to test, so not much usable data came from that, but with Connoquenessing Valley, we had an amazing time. They had never seen the game before in any iteration, so they were entirely fresh. This means we were able to test the effectivness of the tutorial. Additionally, they were not a sustainability club, meaning they could more thoroughly vet the teacher handout.

The students were not as engaged with the post-play discussion as Steenrod was, but there was still good discussion and much insistence to play again. The discussion that was able to happen with just one of our team members facilitating was good, and hopefully, in the hands of a real teacher, the teacher handout could be used to engage the students after they play the game and teach them things they can do to be more sustainable.

The faculty also played, but it is always a different experience when playing with only one person per iPad.

Next week, we will have our final presentation and be pushing out our game to the app store. Here it goes.

Half of our team was off for Thanksgiving break, but half stayed on to work on more art and fix some bugs. Here is some of the new screens we created for the background.

For Softs, we tried to initally get each visiting instructor to have their own iPad, but found that, because of the lack of tutorial, this made the professors struggle greatly. The social elements of the game allowed for them to coach one another on what to do, so if one understood the game, they could easily direct the rest on how to play. We found much greater success if the instructors shared an iPad, just like the ideal setup for the classroom. This made giving the tutorial much easier and they had more fun playing. Overall, the biggest issues were some UI confusion (especially with the dragging and holding the trash over certain areas), the lack of an interactive tutorial, and not understanding how they were progressing (not understanding how they gained or reduced pollution).

In light of this, we finished up outlining how our interactive tutorial would flow and began implementing it. We also worked on start and end screens for the experience as well as iterating on our teacher guide. On Thursday, we tested at the YMCA in Homewood to surprising success. The students got really into the experience even though there was only 1 to an iPad, which is not our ideal setup. We saw them socializing and shouting, but we also witnessed confusion with the hold over mechanic, further cementing the dire need for an interactive tutorial that can teach the students how to properly interact. Over the weekend, we will finish the tutorial, just in time for Festival and some more playtests.

This week, we tested our feature-complete game with our client. Saturday through Tuesday was some crunchtime madness, as we needed to have all of our features in the game by our Wednesday playtest with the Green Team.

After hours of work, we hit that goal…kinda. Edicts, the actionable items players vote on after completing enough wants, were in the game and functioning, but the front end was not working at all, so they never happened. Disasters, which were built from edicts, were also functioning, but had no front-end implementation, so when they happened, the effects just triggered with no sign of what was the cause. And, even though all of our features were in, we still had quite a few bugs, but we told our client we would be coming on Wednesday, so come we did.

They loved it. We ran them through the animated tutorial we had made, and they lost interest in it pretty quickly, but they loved playing the game. We split the students into four teams, two of two and two of three (with the teachers joining the groups of two). They all failed pretty bad the first game as they struggled to understand the interface and grappled with some of the nastier bugs in the game. However, after they lost, they immediately wanted to play again, and then again, and then again, and if we didn’t have to leave, they may have even wanted to play after that time.

We definitely learned that one of the best way to get the students to talk is to have more than one student per iPad, because even though they did talk between each other, most of the socializing and conversations happened between members of the same team.  We finally did see the chaos we had been aiming for, but some of it was due to the bugs that had not yet been squashed. There were conversations between students and teachers, and lots of shouting.

We tested again at a YMCA in Homewood, and were surprised by a similar response. Although the group was much less enthusiastic about playing and without as much time to give a tutorial, they did struggle a bit to play, they did seem to become engaged with the game, underestimated the amount of time they played for, and wanted to play again. This was surprising to us since we kept struggling with getting the iPads to connect to one another. Despite this, there was a palpable moment of silence when we were trying to get them reconnected, which we were informed later was the most silent this group of children has ever been. Mark extra points for engagement!

After reviewing our playtests, meeting with our instructors, and talking to Anthony Rocco of Foma Labs, we decided that our tutorial needed to be interactive, that we should change Want Cards into Need Cards, and that the edict system was not engaging, which meant that the educational content of that game component needed to be offloaded somewhere. One thing we did see was the teachers having conversations with the students during and after a game, and we decided that these conversations would be the best place for the excess educational content that was not able to coherently fit into the game. We worked on a teacher pamphlet to help instructors integrate the game into a larger lesson plan.

Now we just need to be ready for softs.

The playtest day proved quite fruitful. We observed many groups of children playing our game and, after three playtest sessions, we learned something both valuable and scary: they were not talking. There was not a peep. The groups were small, being no more than four students, but every time, they would just grab an iPad, sit down, play, and not say anything. They seemed engaged, often times underestimating the amount of time they played for or asking to play again, but none of them ever spoke to one another during play.

That is, until we learned the secret. One group somehow got split up, with two students coming in early. We ran them through our explanation and sat them down to play. After playing for about 6 minutes, the other two students came in. We ran them through an explanation of the game, and we restarted the game so that they could also play. This time through there was a lot more talking. Initially, it was just the two students that had come in early talking to each other about what some of the trash was and asking for recycled components. They also answered some rules questions from the other students, and shortly, all the students were talking.

This made us believe that understanding how to play the game was being the biggest barrier to creating the social experience we wanted. This helped us decide that we ABSOLUTELY NEEDED a tutorial and improved feedback to make knowing what to do and how to do it much less of a burden and allow the students more mental bandwidth to focus on the trash and the trading. Another interesting thing we noticed is that students tended to believe that the wants were individual and not shared, which led to students asking each other for components, an interaction we enjoyed seeing and think we will make modifications to the game to encourage this practice.

Our subject matter expert, Dr. Gwen DiPietro also came to play our game, and she brought two friends. One, Ms. Sara Willis Hartwell was speaking about solid waste management, which is her area of expertise. We talked with her and she agreed to look over our list of waste to check if the items we had were good and realistic items that fell into different waste categories. She also told us that there were some items on our list already that were categorized incorrectly, like paper cups, which due to the plastic coating inside of them are not recyclable! Who knew?

That means that this week we worked on finishing up all of our features, fixing some bugs, making feedback much better, and finalizing the trash we would use. The new and improved feedback required we create new UI elements and layout, which ate up a lot of time, meaning that there was some temporal slack with getting the trash finalized. That was useful since we needed to rely on an external source to help us with that. We also ran into an issue with one of the plugins we were using for a feature.

It was a bit frightening looking at everything we needed to fix as evidenced by the playtest, but very reassuring that the students had fun! Hopefully we can keep pushing on that as we polish to make the fun do a good amount of lifting in engaging our audience, which has been one of our goals from the start.

This week was a mad dash to complete our MVP to be ready for our playtesting day. We realized that on Wednesday that we would not be able to complete the entire loop in time because we ran into a few quirks of using the Unity Networking Module.

For our playtesting, we really needed to know if the game was still fun after moving it to digital. We knew that it worked as a physical card game, but it took too many people to manage it properly. Would the frenetic and chaotic energy still be there now that it was on the iPad? That is what we intended to find out, but we still had not completed our MVP, meaning that features were still not implemented. We decided that we would need to scale back what we would deliver, so that we could test the main mechanic of the game. We were unable to implement Panic Mode, a state where items traded to players with full sorting centers must be handled swiftly or the pollution will rise. We thought this would be important to up the pressure of the game, but since we were unable to implement it, we set the pollution to constantly rise. Hopefully, this would instill some pressure, although it would likely be largely different gameplay-wise.

Edicts were not part of the main mechanic of the game, so we also cut those for the playtest version. They are still going to be part of the game, but again, we needed to test that the pace and pressure were still intact. To fill the gap, we had fulfilling wants decrease the pollution level.

Finally, when we had everything ready to go for our playtest build, we ran into a few bugs while integrating.  But after a long night of working out all the bugs, we had a playtest build.

 

Introduction

The art making process in our project has been based on research-exploration-feedback loops. We wandered to several different places, before we began to see clarity in our direction. The pivotal point in our journey was when we realized we needed to inject a distinct feeling, a palpable personality into the aesthetic choices. We transitioned from approaching art in terms of styles and techniques, to thinking in terms of visions.

Why are visions important? Because having a vision means our artistic choices are united by a common goal. A vision also means a clear message or an emotion our art wants to communicate. Ideas and emotions are what will ultimately connect with the audience.

Our original approach might give us a pretty appearance, but it is just an appearance. Even in an iPad game about recycling, there is room for using art as a tool to communicate, to resonate, and not simply to decorate.

But of course, this lesson didn’t come to us at the beginning.

 

Phase 1 – Art as Content Supporter

It was a blank sheet of paper initially. I was not sure where the art is heading. The subject matter of our experience, recycling, did not demand a certain aesthetic. It was also not a storytelling or world-building game. I thought this implied that art was situated as a supportive role to the content.

The first iteration of art was created within this framework. It was designed to accompany the paper and digital prototypes and to visualize future possibilities. It was functional, supportive, and kid-friendly with vibrant, complimentary colors.

 

The kids responded warmly to the crude, whimsical drawing style. The visual clearly helped them to grasp the game mechanism. That put this style as a potential candidate. However, it soon became apparent that it was difficult to grow on this prototype. The supportive placement of the art did not create much room for excitement.

 

Phase 2 – Art as Cost-Efficient Solution

So we needed to let art breathe on its own for a bit, by exploring possibilities largely regardless of the content. We explored a wide range of game art styles, in both 3D and 2D, to see what would catch our eyes. From that, we compiled a detailed art analysis, breaking down and comparing the appeal and complexity of each style in relation to potential game ideas. As the artist, I provided the team with my own recommendations from a cost-efficient perspective. What would be the most beautiful art we could achieve with the most reasonable amount of cost?

Naturally, we could not make the calls ourselves. We selected the top five art samples and brought them in front of our clients.

The kids showed a clear preference to richer, more organic art styles, with beautiful colors and textures, over the “digital-clean” looks. Their top choices (last two images from above) actually aligned with our internal favorites.

This confirmation informed us that we would probably do a painting-like 2D environment. Our projection was still through the lens of cost-efficiency. The time constraint was perhaps the deciding factor in what our art would look like.

 

Phase 3 – Art as Ambitious Visuals

Before we produced any prototype during Phase 2 (it coincided with the branding material production and game design exploration phase), the result of our branding material gave instructors and team confidence that we had the capacity to push for more ambitious visuals. Phase 3 was defined by that raw passion for aesthetics.

I would be attempting something slightly beyond my existing skills. I did many hours of research and tutorials in order to define the styles we wanted, and to learn the painting techniques needed. Our technical references narrowed down to two Oscar-nominated animations, The Dam Keeper, Ernest and Celestine, as well as a multiple-award-winning game Machinarium.

I found and deconstructed the making process of these works and created two art prototypes of our own. One of them featured loose outlines and paint brush textures, the other pencil stretches and repainted photo textures.

Both of these prototypes received positive feedback. They informed us that we could do this, and how much time it would cost to do it. However, it was not clear what the rest of the game should look like.

There was an increasingly tangible sense of urgency that we were still missing the bigger picture.

 

Phase 4 – Art as Vision

We started to conduct a sweeping research on both art direction and UI/UX design. We looked at between 15-20 different AAA and indie titles’ GDC talks, iOS’s design recommendations, and more. The research gave us pages of valuable notes, from which, we then extracted the principles most applicable to us. For the first time in our art, we started to apply industry-tested guideline to our thought process. It illuminated our path forward.

Notable lessons:

Hearthstone developers belabored on the transformational effect of having a seed idea (a.k.a. core idea, vision). Before they came up with the “Box”, their prototypes were all over the place. Once the “Box” became the seed, suddenly everything from art to UI fell into the right place, and the design leaped forward.

The art director of Ninja Theory (Devil May Cry, Hellblade) used a whole talk to demonstrate why being different makes all the difference. He strongly encouraged artist to not follow the mass, to bring themselves into the art, and to seek references from unexpected places. He also highlighted the power of visual association/metaphors, meaning using imageries that resonate with our memory and subconscious to evoke a desired feeling.

Our shortlist principles for aesthetics:

Dare to be different;  Visually striking;  Rooted somewhere.

Our shortlist principles for usability:

Clear structure; Seamlessness; Deference.

We worked out the basic UI layout based on our principles. A city was connected to four recycling centers on four sides in an open continuous environment. Each player had two basic views: the city view and the recycling view. The UI placement was aligned with the information structure, to establish proper hierarchy and avoid clutter. The city view contained all the information and events associated with the city. We called it the consequence window. The recycling center contained everything related to recycling. We called it the management window.  We wanted our four players to feel connected with each other and with the city. That was why we used camera pan over continuous landscape, instead of separate screens.

We began to really think about how we wanted the art to make players feel in our game. One of our game designers mentioned the word “renewal”, which depicted the feeling at a successful end-game state. I quite liked that word. It implied an upward emotional curve, which matched the design of the experience. We had thought about using color and light transitions to denote changes in the environment. So I basically needed visual references of two opposing moods: one renewed and hopeful, one dirty and depressing.

Because we also wanted our vision to be rooted somewhere in people’s visual memory, I was digging through various styles of old paintings. Despite some of them containing the emotional quality that we were looking for, it was not easy to picture how to turn them into a game. The potential vision was elusive.

Finally, the inspiration struck when I was going through Walt Disney Animation Studio’s Archives Series, and I came across a stained glass art for Beauty and Beast. There was something enchanting about the  medieval narrative composition: its zonal scenes, shallow depth, hierarchical proportions, and the way it compresses time and space into a single frame.

It brought back memories of the large collection of stained glass windows in Canterbury Cathedral which I visited in England:

America’s famous artist Louis Comfort Tiffany’s stained glass exhibition that came to my college:

Concept artists Nick Thornborrow and Matt Rhodes’ ITP2013 winning stained glass artwork from my favorite game Dragon Age:

DeviantART artist Jian Guo’s Lord of the Rings stained glass fan-art that went viral on the internet:

Stained glass has such a marvelous tradition in visual storytelling. It differs from other graphical narratives due to its strong association with allegories, epics, and religious matters. It carries an air of gravity, timelessness, and romanticism, making it potentially empowering to our educational goal about saving the environment. Stained glass is also visually stimulating, possessing a very unique personality. It matched all our core aesthetic principles, and it even allowed me to bring a bit of myself into its creation.

Nevertheless, we recognized the challenge with this style even before we started to develop a prototype. It is a luminescent, back-lit medium with plenty black contours. That poses inherent difficulties to separation of environment and the interactable pieces. The feedback to our first round of prototypes are consistent with this worry, while people responded enthusiastically to the art itself.

So we dedicated a lot of efforts on readability issues. We de-saturated and darkened the background while bringing up the vibrancy of the interactables. We employed different line weights, and tested both outer glows and drop shadows to separate foreground objects. We also realized the pieces were much easier to identify when they were in motion or shifting scales.

We needed a color transition to accompany the emotional shift. The palettes again came from the masters. We took the dirty and depressing colors from romanticism paintings, works like Turner, Loutherbourg, Géricault. It was rather appropriate given that romanticism was considered a response to Industrial Revolution. As for the renewed and hopeful feeling, we found it in abundance in the works of Van Gogh and Monet.

In order to determine the most ideal representation of the dirty environment, we created three variations and conducted animation tests for accurate comparison. We also performed a series of motion tests on our major mechanisms.

 

We sought feedback from our clients, faculty, colleagues, friends and family. It was certainly encouraging that they really liked the art. They also confirmed most of our major targets, such as uniqueness, appeal, and visual association with stained glass. Furthermore, our testers provided us with very constructive suggestions on what problems to fix and how to take our design a step further. There is still a lot to do!

 

Conclusion

We are currently half-way through our project. For the art production, what began as a seemingly bread-and-butter task turned out to be quite a formative journey. It guided me to a deeper and broader understanding of art direction. It made me reconsider boundaries of what a production artist could do. To borrow from Ninja Theory’s art director Alessandro Taini: “Artist” is not just a job title.

 

Mai Ao
Artist, UI Designer of Project Flower Power

This week was our first week out of preproduction, and we definitely saw that we had a lot that needs doing. We ran another playtest for visitors and worked on the design more, focusing on the edicts (rewards for fulfilling wants that will change the game) and disasters (events to increase difficulty, keep the drama up, and teach about problems facing living sustainable lives) that we wanted to have in the game. We did a bunch of research on UI, looking at talks by over a dozen successfully shipped titles and how and why they made their UI the way they did. We eventually came up with this concept:

Where the top would be the city, which each player can view. They can then swipe down to reveal the their own base, where most of the gameplay will take place. Here they will get waste, which slots into one of the circles, and can process waste at their recycling building at the bottom of the screen. The timer counts down to when the new waste will appear.

 

We also continued our networking research. We ran into a few issues with communication, since CMU’s wifi was denying our connection and disallowing communication to external. We talked with another student, Sharan Shodhan, about networking advice as well.