Mystic Walker
Role
- Developer
- App Designer
- UI Designer
Team
- Jenise Cheung – Artist, App Designer, UI Designer
Tools
- Android Studio
- Java
- XML
Context
Final project for Mobile Computing course at SFU, October – December 2023.
The purpose of this project was to design and develop a mobile app with rich interactions using Android Studio.
Overview
Mystic Walker is a creature collection and pet simulation app that aims to motivate users to spend more time outdoors. The user sets a timer to take a walk, and when the timer runs out, they take a photo with their camera to reveal a creature that they can name and collect. The user can interact with their creatures or exchange them for XP, which unlocks accessories for collected creatures to wear.
Process
Design
The concept came from the fact that we wanted our app to be both useful and fun. After we had decided to use this idea, we started planning out the app's functionalities and structure, as well as a rough timeline for the project, in a proposal document.
The creature that appears at the end of a walk depends on the light and temperature of the environment, as well as the length of the set timer. Originally, we had planned to use sensors to obtain temperature data, but after we submitted our proposal, we found that our devices did not have temperature sensors. We then changed our app design to access the GPS location data and use it to obtain weather data from a web service.
After planning out all the features of the app, I made sketches of the user interface for each page and functionality.
Development
I did all of the development in Android Studio and tested the app by running it on my Android phone, and I would regularly send new versions of the project to my partner for her to test on her device as well. In the last few weeks, I also had access to two more phones I could use to test with.
The greatest challenge I faced presented itself when I was programming the retrieval of weather data from the web service. The issue was that the feature worked fine on my phone and on the emulator in Android Studio, but it would not work on my partner's phone.
My first approach to the problem was to thoroughly check through the code to figure out where it went wrong. However, even after identifying which line the problem occurred in, none of my revision attempts resolved the issue, and researching it online yielded no results.
I then decided to look at the problem differently: since the function worked on one device but not the other, perhaps the issue was related to the device rather than the code. After some consideration, I realized that the phone the function worked on used Android 8 while the other was on Android 13. Researching the subject, I found that Android 9 and later versions restrict HTTP requests, and the solution was to add a line in the Android Manifest file to allow it.
Final App
Here is a link to the video if the embedded one doesn't load.
Reflection
Working on this project made me better understand the importance of testing a digital product, whether it is an application or a website, on multiple different devices. I had thought that the greatest difference between devices would be the layout and elements of the app's user interface. Through facing the challenges in creating this app, I have learned to consider possible restrictions of operating systems and software, and even the possibility of the wrong colour palette being used if the device is in dark mode.
Something I would do differently is to add more variety in the button designs. While I do believe it is important to have a consistent style guide, I think our app could benefit from having a few variations to improve both the aesthetic and intuitiveness of the interface.