FindAMoo
Winter/Spring 22 Spark Project
Introduction
Originally, the goal of our project was to create a mobile application that facilitates new students’ transition to UC Davis, specifically helping them navigate their week of orientation. Due to an administrative issue with implementing our application officially, we decided to pivot ideas but maintain the same goal.
Our overarching goal was to encourage UC Davis students to familiarize themselves with the campus, leading us to create a mobile application that engages students with a daily cow scavenger hunt. Every day, a cow appears on campus as shown on the live map, and students will have to navigate the campus and explore on foot to catch the cow.
The Team
Tony Nguyen (Project Manager)
Alan Chuang (Developer)
Alec Liang (Developer)
Alp Guler (Developer)
Aurielle Jocom (Developer)
Nathan D’Cruz (Developer)
Laura Yien (Designer)
Melanie Chau (Designer)
Sophie Lam (Designer)
Timeframe
Jan– May 2022 | 15 weeks
Tools
Figma: wireframes and prototyping
Adobe Illustrator: designing the cows & custom graphics
MongoDB: a NoSQL database to store user and cow data
Amazon S3: store all the cow models
Google Maps API: our base map within the app
Expo Location API and React Native Expo Geofence: location services
Express: our web server
JavaScript: our primary programming language
React Native: mobile development
Node.js: backend development
The Project
Design
Research: Orientation App
Originally, our target users were new UC Davis students who wanted a solution to help them navigate orientation week, campus, and campus life. For our first research phase, we wanted to find out what current students believed to be the strengths and weaknesses of orientation. Using a combination of competitive analysis, Google Form surveys, 1:1 interviews, and SWOT analysis, we discovered the following:
- Students liked meeting new people, learning general info about campus, and how to register for classes
- Students wished to learn more about UC Davis campus culture (e.g. clubs, student life, extracurriculars, etc.)
Pivoting Ideas
At the end of Week 3 in the term, our team pivoted app ideas after discussing the impracticality of implementing our orientation app officially with the university due to a complex process of approving the app. As this obstacle limited the features we originally had in mind for the app, we ultimately decided to create an entirely different app that would be more engaging to students and be a more productive use of our team’s efforts.
Both our team’s designers and developers worked together to brainstorm a new How Might We statement to guide us through the design process with the pivot:
How might we increase student engagement with the UC Davis campus and strengthen community?
With this, we worked together to generate Crazy 8 sketches of possible solutions and were inspired by Wordle and Pokemon Go (both highly trending passtimes) to build a “daily cow scavenger hunt.”
Research & Synthesis: FindAMoo
After developing the idea of a cow scavenger hunt game, we conducted additional research to learn more about people’s experiences playing with games. We sought information about what aspects of games people enjoyed, what they found most engaging, and whether they played alone or with friends. Through interviews and a Google Form survey, we found that:
- Students enjoy game progression and unlocking new achievements or customizations
- Students primarily play with friends
- Students find mobile games convenient and easy to access
We further developed our idea by participating in another Crazy 8’s exercise as a team, brainstorming potential features that could increase engagement. After sharing our sketches, we found a few features in common:
- Daily streaks
- Daily custom cow
- Barn collection of cows
We created a user flow following our synthesis of ideas:
Low-Fidelity Wireframes
After developing our user flow, we moved to creating low-fidelity wireframes to build out the layouts for our main pages: the map, barn, and profile.
Design System and Cows
When developing our design system, our team decided that we wanted FindAMoo to feel playful with a focus on accessibility and simplicity. Our header font is Lexend which we chose because of its modern and youthful feel. Our body text is Avenir which we chose because of its variability and readability. Our three main colors — teal, red, and yellow — were chosen to create variety and contrast between elements. For our components, we focused on keeping them simple to improve clarity while navigating the app.
We also created a customized Google Maps style by adapting our main teal color so that our map page fit within our design system and felt unified with the other pages.
To feel cohesive within our design system, cows were designed in a 2D vector graphic style using bright colors. Since FindAMoo is based around players being able to catch a unique cow every day, we developed enough variations of cows to be able to generate over 800 unique cows, which would be equivalent to over two years of playing every day. Cows come in two postures — front-facing and side-facing. As players catch more cows they unlock 6 different colors of cows and 5 types of each accessory (cowbell, head accessory, and extra accessory).
Mid-Fidelity User Testing
After applying the colors and fonts in our design system to the low-fidelity wireframes, we conducted a round of user testing to validate our design decisions and identify any user pain points.
We found 3 primary user pain points to address:
- Users were unclear about the “1 cow a day” rule after using the prototype.
Solution: We created a tutorial walkthrough of the game's rules and relevant features that pops up after logging in. - Users did not understand how the level system worked.
Solution: We focused on rewording the explanatory descriptions displayed on various screens. - Users felt there was a lack of customization in the game.
Originally, we allowed users to choose their avatar by favoriting one of the cows they caught.
Solution: We created a new feature to allow users to customize their own avatars.
High-Fidelity User Testing
The second round of user testing with our hi-fidelity prototype revealed that while users gained a better understanding of specific game functions from our new tutorial, they continued to lack a general sense of gameplay. We added a new screen in our onboarding to provide a more high-level description of the game to address the users’ pain point.
Users also expressed confusion over which type of cows they were able to catch at their current levels, leading us to revise our description of the level system to more clearly explain what occurs when leveling up and which cows they are able to collect at each level.
High-Fidelity Prototype: Final User Flows
Onboarding Tutorial
First-time users follow a tutorial that points out features in the game: the daily countdown timer, the daily streak, the barn, and the level system.
Catching the Cow
Once users are within 100 feet of the location, they are able to catch the cow.
Viewing the Barn
Users can view their collection of cows in their barn and sort or search to find specific cows.
Customizing Cow Avatar
Users can create their own profile avatar by selecting a cow, cow accessory, and background color.
Development
The user interacts with pages on our front-end app which makes API requests to our backend server. The server holds some local data and also consumes data about users, cows, and locations from our MongoDB database.
Stage 1: Backend
Building a database
The first stage of development involved building out the backend, which will be dealing with managing user and cow data. To give the data more structure, we created a schema indicating what information will be in each object. For instance, user objects will contain their name, email, collected cows, and so on. The MongoDB database will be where we save user and cow data. As for the different cow models, we will be storing them on AWS S3. The tools and APIs used to manage how data is stored and fetched, are listed below.
API Calls (fetching and storing data):
- Cows API
- Users API
- Google Maps API
- Expo Geolocation API
- React Native Expo Geofencing API
Data Storage:
- MongoDB
- AWS S3 Bucket for generated cow storage
Server Communication:
- Express.JS
As for retrieving data on the client side, the user has to log into a UC Davis Google account before the frontend queries for the user’s data. The user’s schema will have a part to identify which Google account is linked to which FindAMoo user. The next step was to implement Google Authentication to identify if the user is a UC Davis student.
Generating Cows
The designers designed different base cows along with various accessories for each level. In order to generate all possible combinations from the given designs, we had to use React Canvas API to first display the cows and accessories to determine the exact position of each accessory.
The next step is to iterate through each possible combination, generate the images, and save them into our local machine before we can upload them into AWS S3 Bucket. Here is where we removed our React code and change them into JavaScript. To easily iterate through the combinations, we used layer IDs (e.g: 11104) where each number in the ID correspondingly represents the orientation of the cow (front or side), cow color, spots color, cowbell types, and head accessories. As we saved each generated cows to our local machine, we implemented our cow naming system, which is “cow(layerID).png”, to give each cow a unique file name as well as to keep them organized.
After each possible cow model was saved to our local device, we made a new file to push each cow to our AWS bucket. We put each cow model’s ID into an array and after configuring the bucket, wrote a for loop that iterated through the array. This way the parameter that would be pushed to the bucket would change after every iteration and we pushed all possible custom cows.
Detecting User Location
Every day there is a new cow location, which is used as the center of the geofence coordinate. We then used geolocation to retrieve the user device’s coordinates, which triggers an event when the user enters the geofence, which had a radius of 100 ft. When they are within that range, the user is given the option to capture the cow.
When first implementing the geolocation API, we had trouble with testing and usage because the Expo project management didn’t allow for the proper permissions to be granted for location services. Therefore, we had to make do with the foreground location, and updating it every time we moved to a new location to make sure that the algorithm works. Without a native build, we had to wait until we had our own backend server to test the location API.
Stage 2: Frontend
Google Authentication
Our first approach to implementing the Google Authentication involved using a middleware called Passport.js for authentication on Node and Express.js. The next part was to set up a project on Google Cloud Platform with OAuth credentials. This will then allow us to use Google’s API to get information once the user logs in. The process to log in, involves redirecting the user to the official Google sign-in page (https://accounts.google.com/….) and once they log in, only a specific scope of their information will be shared. We also had to define where we would like to redirect them back to once they log in, which is just back to FindAMoo app. For FindAMoo, the scope used is just the user’s profile information on their Google account.
However, this first implementation was not acting very friendly with mobile apps, despite appearing to work when testing on a web browser. There were a lot of difficulties getting the implementation with Passport.js to work. As a result, we pivoted away from Passport.js to a library called AuthSession, which is one of Expo’s libraries. This allowed us to directly implement Google Authentication in the frontend and ensured compatibility with mobile devices. With that, we finished the Google authentication section.
React Navigation
We are utilizing React Navigation for our navigation bar, which is used to navigate through the Barn, Map, and Profile pages. First, we created the bottom tab navigator and added all the pages we want to navigate into the navigator along with icons and texts that we want to use. When one of the icons/texts is clicked, it will navigate to the corresponding page.
Various UI pages:
- Login / Account Creation Page: Utilizes Google Authentication API
- Onboarding / Tutorial Pages
- Map Page: Utilizes Google Maps API, Expo Geolocation API, React Native Expo Geofencing API
- Barn Page
- “Cow Caught” Page
- Profile Page
We are using:
- JavaScript and React Native to display all the elements on the screen
- Axios for Users and Cows API calls
Challenges & Takeaways
Challenges: Pivoting and prioritizing features
Our two biggest challenges were pivoting ideas and prioritizing which features to implement. Pivoting from an Orientation App to FindAMoo, challenged us to repurpose the work we had previously done and to conceptualize and develop a new app with less time. Due to the time constraint, we had to prioritize the most important features to develop. Several of the features (such as the share feature) were unable to be implemented during this term, but with more time in the future, we would like to finish building out FindAMoo.
Developer Takeaway: Building out core dependencies first
If we were to start the development of FindAMoo again, we would prioritize the development of the core aspects of our app such as the map page. Had we put more resources on the “main idea” of our app, our team would have seen more tangible progress on the development side earlier in the work period.
Designer Takeaway: Don’t overlook UX copywriting
One of our major insights was the importance of UX writing. Initially, we overlooked parts of the app such as the onboarding to focus on more interaction-heavy sections such as the map and barn, but our findings from user testing revealed how critical UX writing is as the primary means of communication with users. We learned that writing clear and concise descriptions helps users engage with our game, by giving them a better understanding of how to play.
Overall Takeaway: Teamwork makes the difference
For most of us on the FindAMoo team, this was our first time working in a cross-functional team. Initially, the designers and developers worked independently which made progress clunky and slow. However, once we started having weekly meetings where both designers and developers were present, we were able to communicate more effectively which translated to more productivity (and more fun!). Additionally, we learned that while asking for help can be difficult, it is crucial to ensure the development of the project. While you might be able to go faster when working by yourself, you ultimately go much further when you work with others.
Conclusion
We would like to thank the CodeLab board for giving us this opportunity to work on an amazing project this term. Special shoutout to James, Abhay, and Omid for giving us so much guidance throughout this process! While there is always room for improvement, we are extremely proud of the FindAMoo app. Overall, it has been an incredible journey and we are so grateful for this experience!
