Game of Rice
Mobile App
Timeline
August 2019 - December 2019
Goal
Develop an Android app that provides a social benefit, impacting any type of community, group, or region
Tools
Android SDK, Java, Justinmind
Methodologies
Wireframing, prototyping, usability testing
Game of Rice is an Android app that allows its users to play Tic-Tac-Toe to donate rice to impoverished countries. Inspired by the website, Freerice, I developed this mobile game for my final project in the course, ITP 341: Android App Development, at the University of Southern California.
My Roles
This was an individual project given to the class during the second half of the semester. I handled everything from designing, to usability testing, to programming. The tools I used were AdMob, Android Studio, Firebase, Justinmind, and Microsoft Word.
Problem
Global hunger remains an immense challenge to overcome. The United Nation's World Food Programme (WFP) aims to tackle this issue and achieve food security for people worldwide. The organization, however, has no independent source of funds; it receives voluntary donations from corporations, governments, and individuals. To achieve their goal of ending hunger by 2030 (Zero Hunger), WFP requires more funding and support to create lasting solutions.
.jpg)
Solution
To contribute to the fight against world hunger, I developed a mobile app, where users can play Tic-Tac-Toe to donate rice to impoverished countries via the World Food Programme. Each time a user collects a hundred grains of rice, a drought-resistant seed is also given to a community experiencing food insecurity due to climate change.
Project Journey
Research and Wireframing
A requirement for the final project was an Android app that provides a social benefit. For the project, I researched current social issues and identified the ones that I wanted to tackle. After reading several recent articles about world hunger, I decided to build an Android app that allowed its users to donate food to impoverished countries. Inspired by Freerice's use of quizzes to educate players while they donate rice to WFP, I planned to engage the app's users with Tic-Tac-Toe. After conceptualizing Game of Rice, I wrote an app proposal detailing the app's goal, target audience, key features, requirements. I also created wireframes for the app screens using Justinmind, and I attached them to the proposal.
Prototyping
After the professor approved my proposal, I added interactive elements to the wireframes by using the prototyping tool, Justinmind. Due to time constraints, I gave the app a simple design with a blue color scheme. This allowed me to focus on more time-consuming tasks, such as programming the app, satisfying project requirements, and fixing bugs.
.png)
.png)
.jpg)
Mobile Development
While building Game of Rice, I programmed the app in Java using the integrated development environment (IDE), Android Studio. I also used Firebase to store data, because the software provided extensive documentation and easy access of real-time data.
One main challenge that I faced while working on the project was using new technologies. I struggled with learning how to implement a program that efficiently reads and modifies data stored in Firebase. There were times when my app took a long time to fetch and process data, causing delays in loading a screen. To overcome this obstacle, I read articles, watched tutorials, and sought help from my professor about the software. Eventually, my code refactors removed the lengthy lags between screen transitions.
Another challenge was developing artificial intelligence (AI) for Tic-Tac-Toe. In Game of Rice, the player can play games against a computer-controlled opponent. However, I found it difficult to create an AI to play Tic-Tac-Toe optimally. After searching online for advice, I decided to use the minimax algorithm. With this implementation, the AI would consider all possible game scenarios and choose the most optimal move to win.
Usability Tests
After I completed the initial version of the app, I conducted usability tests with five participants. From these tests, I found five issues: incorrect signup, lack of contrast, unsatisfactory game results, minimal player data, and odd ad placement. For some of these problems, I came up with multiple design solutions and presented them to the same participants. By having people experience and compare all the designs, I gathered data about which elements of each solution worked well. Finally, I combined the aspects that garnered the most positive feedback into my final version of the app.
I had classmates test the prototype by assigning them tasks to complete within the app. With their feedback, I identified some key issues in the design and functionality of the app. One use case was incorrectly setting a password on the Sign Up screen; there was no way to confirm that the user inputted the password he or she wanted. Participants also disliked the ad placement, insufficient player information, and lack of visual satisfaction from winning a game.
Incorrect Signup: While signing up, some participants entered their password incorrectly. As a result, they could not log back into their account without resetting their password. To lower the chances of making this mistake, I required new users to enter their password a second time.
Lack of Player Data: The participants wanted to see more game statistics, such as the number of wins they had. They were curious about their progress in the app and how their total donated rice was summed up. I expanded the user info section and added the player's number of wins, losses, and draws.
No Contrast: A few players disliked the lack of color contrast between the X's and O's in Tic-Tac-Toe. Though the shapes were different, they thought the two symbols' black color made the game board less legible. By changing the O to blue and X to red, I had each symbol pop out more on the board.
Unsatisfactory Game: After a round of Tic-Tac-Toe, the participants were confused about the results. Once a game ended, the app immediately redirected a player to the profile screen, and the lack of user data only added to the player's confusion. There was also no visual satisfaction from winning a game; people wanted a congratulatory message for their victory. To resolve this issue, I wrote three messages each for a win, loss, and draw. I then asked the same participants from the previous usability test to select which messages they liked the most. Finally, I programmed the app to display the most popular texts—confirming a player's win, loss, or draw—at the end of a game. I included emojis to indicate the game status in a more expressive way and to elevate the user experience.
Ad Placement: One critique was about the odd advertisement placement on the user profile screen. People were bothered by the ad's near-center placement; they felt that it took their attention away from the rest of the profile's features. I created three solutions—top, bottom, and side advertisements—and showed them to the same participants from my previous usability test. Most people preferred the bottom ad placement, because the ad became less of a focal point and was the last element for many to notice. Thus, I placed the ad at the bottom of the screen in my final version of the app.
Outcome
At the end of the semester, I presented Game of Rice to my professor. Following the presentation, he tested the app, appreciating its simple design and easy navigation. My classmates also had the opportunity to explore the app afterwards. The password confirmation box added convenience to the signup process for new users, and my classmates enjoyed seeing more statistics (i.e. number of wins, losses, and draws) on their profile screen. They also liked the color contrast between the X and O symbols on the Tic-Tac-Toe board, because it increased the game board's legibility. Lastly, the addition of end-game messages and the change to the disagreeable placement of ads increased the users' experience with the app.
Key Takeaways
Game of Rice taught me how to build an Android app from start to finish. While working on the individual project, I acquired first-hand knowledge of conceptualizing, designing, developing, and testing for a mobile app. By the conclusion of the project, I had three key takeaways.
The design of positive user experiences can change depending on the device. At the start of the course, I learned about eight design principles for mobile apps. They were intuitive navigation, content prioritization, large touch areas, minimum clutter, big text, simple forms, thumb-friendly zones, and consistency. Two principles, however, particularly stood out to me when prototyping my app: large touch areas and thumb-friendly zones. People typically see a website on a wide computer screen and use a mouse to interact with the web content. In contrast, a mobile app is displayed on a smaller screen and depends on touch interaction. I realized that there are different design considerations for promoting a positive user experience based on the device.
Legibility of all elements is a key aspect of user-friendly design. In my initial wireframes for the app, I had accounted for the legibility of text but did not consider how people would see and distinguish other visual elements. After discovering that users preferred different colors for the X's and O's in my app's Tic-Tac-Toe board, I learned to value the perception of all content—not just text.
The prevention of user error should be a priority. During the design stage of my project, I did not focus on finding all the edge cases for app features. As a result, some users incorrectly inputted their password while signing up, and they were inconvenienced by the lengthy process of resetting their password. I became aware of how committing a mistake or recovering from one can cause friction and frustration. To improve a product's user experience, it is necessary to design methods for error prevention and simple processes for users to fix an error.