FarmVille on Mobile
All the appeal of the original FarmVille game, designed for ease of accessibility on mobile. With an offline mode, players can play anywhere, making progress on crafting, selling goods, and expanding on their farm anytime. Play online to connect to social features such as your Co-Op, chat with friends, and Contribute to collaborative order boards
Overview
With the game entering into launch, we needed to keep the trajectory for player engagement. With that, we created our first two events from the ground up, tying back into the crafting/collecting loop, and rewarding players with event-limited characters. We continued to add to our event types, and give our players something new in a 2-week cadence.
Approach
As we created new event types every two weeks, we realized that creating new event themes (new UI, art direction, 3D pipeline of new characters) were challenging to sustain. UX and Engineering needed to come together and figure out how to templatize these events to support the growing needs of keeping things fresh, and support campaigns.
Outcome
We created templatized layouts that would data-drive the newly created art assets and content. Upon creating a new event, based on the event type templatization, would create a bare bones version of each layout in Unity.
Problem
Event Theme Customizations
Each event wasn't just a turnover of UI assets, it included 3D character rigging for both rewarded farm hand and event characters, full farm 3D map updates, design content and data. The three event types we were designing had distinct core mechanics:
-
Competitive Leaderboards - Crafting distinct recipes converting points into a rank system.
-
Collection based progression with multiple phases - Individually paced, completing sets of items to craft.
-
Bingo style - Strategic 4x4 recipe card layout paying out rewards when connecting in a row.
For UX/UI, a lot was to be considered which included creation of scalable 3D to 2D models and placement throughout the event including promotional pop ups, all the icons representing ingredients/recipes , full layout theming, stylizing all UI elements. At first, I was helping to build out the architecture of how these events would look, which included 4 key parts of the event. This was in part of wireframing each aspect of the interaction points and creating mock ups to ensure vision and development aligned. In parallel of creating the layouts in Unity, considerations of how things animated through transitions came into play. There was much to be considered when constructing our first several events.
Downtime between Events
As we were still building out the game's live-service structure, our players had to wait a month for a new event type, after the successfully leaderboard event. As the three events were built by early 2015, we now realized in order to sustain live-ops for our events, we needed to structure our events in a templatized fashion.
Design Solution
Building the Reusable Framework
UX and Engineering collaborated to create a reusable live-event framework that connected data, UI, and art assets, dynamically determining what content appeared where within the experience. This allowed new events to be configured and delivered over the air without requiring an app-store update.
Creating Rules
Modular System
A lot of the work was still on Art/UI/Design to create custom theme assets and content, but was now structured around guidelines. My role was to do an audit on the past events that I created themes around. I looked at the entirety of what makes up an event, including intro/final event pop ups, ad monetization opportunities, main UI's, etc and located where we could save on time and what needed to remain as custom. Building on established UI placement across previously themed events, I formalized patterns into guidelines for key interaction areas, including crafting items and leaderboard lists.
↳Node Referencing
My layout audit included general area of dynamic placement of data. I set constraints on size of components, general area of component type, text limitations and interactable elements. I recreated, based off the original footprint of each element built in Unity, each component with placeholder images to provide size required for art. Each of these components were mapped in the backend for data to instantiate specified assets created in the event asset or prefab folders.
↳Handling 3D & VFX
Most of the events had some form of limited-time characters that would pop up throughout the farm. We wanted to showcase these lovable characters alive in our UI's, especially when introducing new events. In our three panel event dialogs, I worked with Designers and Engineers to create scripting to allow 3D models to show up in the rewards detail. The script also had a toggle to switch on/off custom VFX particle effects drawn further below the z axis. We realized that sandwiching a particle effect in between 2 UI layers posed some issues when shifting between 2 events. We chose to turn those off at the time, until we could address it as a backlog.
Themes
Custom Theming Didn't Constrain the UI and Art
I found ways to integrate custom theming as ways of layering on top of a foundation. To freshen up each theme, required some creative ways of layering elements to feel different and evoke the spirit of the event. I created a framework guideline for future UI designers to continue event cadence, that has been running for over 12 years.
Brands
Alignment with Brands and Charitable Campaigns
The framework gave the game flexibility to not only introduce new themes and partnerships with brands, but it also allowed the team to quickly stand up charitable campaign integrations within events. Some campaigns extended beyond the FarmVille experience to support global initiatives, including World AIDS Day through Apple’s (PRODUCT)RED campaign.We were able to quickly plan out limited-time (PRODUCT)RED items only offered through the event, with proceeds from participating in-app purchases benefiting the Global Fund to fight AIDS.
