Campaign for Council of Agriculture
I lead and developed the game 'Fruit crush' from sketches to launch, as well as the campaign site and the related plant library pages.
The Intro
COA Campaign was a series of mini games in 2012 to promote agricultural knowledge and raise public awareness of our client, Council of Agriculture. At the end of the campaign, the registered members who collected the most points during the campaign win the prizes provided by the client.
In the project, I was the lead UI designer and front-end developer of a browser game 'Fruit Crush', as well as the design and implementations of the official campaign website, and two pages of the Agriculture Library.
Fig 1. A final mock of the campaign game page.
Role
Lead Designer
Front-End Developer
Team
1 Tech Lead
1 Sr. Front-End Developer
1 Backend Developer
Tools
Photoshop
Illustrator
HTML/CSS/SASS
Javascript/ JQuery
Moqups
Time
4 months
2012
Client
Council of Agriculture
Location
Taipei, Taiwan
The Game Design
Fruit Crush
Fruit Crush is a embedded browser game on COA ( Council of Agriculture ) website. The game is to match each picture of a Fruit in Taiwan to its name. The game serves the purpose to promote agricultural knowledge, and engage online users with its gamification.
To participate in the campaign and win the prizes, users first register as a member of COA website before collecting game points. The game is one of the games launched during the campaign.For each game, there is a walkthrough, and the introductory webpages of the rules; at the end of the campaign, users who had the most points claim the prizes provided by Council of Agriculture.
The Process
Design and Development
Our team started off by making requirements for the project. Fruit crush supported Apple mobile devices and major browsers, so my developement also went to the cross-browser compatibility tests. The game concept was originally linking words and their corresponding pictures, we thought of the use of drag-and-drop to make the interaction more intuitive. The navigation and tabs were added onto the game interface later on.
Fig 2. The iteration of the game design
The Outcome
A total of 36740 members recorded in the database. It was another successful yearly campaign.
Fig 3. The hi-fidelity mock (left) vs. the final game develpment (right)
The Campaign Site
The Official Site of 2012 COA Campaign
The official site posted the latest news about the campaign. The green character was based on COA's mascot 'Beans'; In every year's campaign, it appears throughout the COA website in a 2D form. I was working on the two design and development of both the game and the site at the same time. The game interface was approved by our client earlier and fairly quickly. Though matching two visuals was not a part of the requirement, to match the visual style, I was inspired to flipped Beans into a 2.5D figure to conform the skeuomorphism style of Fruit Crush.
Fig 4. The main visual of campaign site finalized after approximately seven iterations with the client.
The Plant Libary
Site of Catharanthus Roses
The site was designed to populate the content of an existed Agriculture Library on COA website. Each theme site in Agriculture Library introduces a specie of signature flower, plant, or animal in Taiwan. The topic I was assigned were Catharanthus Roses and Water Lily. I created mockups in Photoshop, sliced them up the old-school way, then implemented with HTML/CSS.
Fig 5. I designed and developed two pages of additional plant profiles like this Site of Catharanthus Roses.
