PixelPet is a productivity app and mobile game wrapped in one! PixelPet helps users stay off their mobile devices by gamifying screen time monitoring. In PixelPet, users evolve pets with evolution points and prizes they earn from lowering their daily screen time. Users can also battle their pets with in-game bosses to win rarer pets and additional evolution points.
Design
Product Design
App Development
People are finding it increasingly difficult to stay off their mobile devices.
A quick overview
Increasing screen time has been linked to declining physical health, psychological health, and sleep patterns; however, people continue to stay connected to their mobile devices even though it is detrimental. This is called "maladaptive consumption in the form of smartphone overusage," and our brain's pleasure system is the main contributor. Our brains crave rewards, and with increased stimulation through our mobile devices, we can easily feed this craving by checking our phones.
What if we use this stimulation to log off our phones instead of staying logged in?
With this project, I aimed to address this issue by gamifying screen time monitoring. By incentivising users to stay off their phone, I could change this pleasure by staying logged in connection to a pleasure by staying logged off connection. Rewards and gamplay through staying unconnected thus takeover this stimulation our brains crave.
Sketching out the concept
Making character and pet designs in Procreate.
After completing secondary and primary research, I knew that this issue was big enough and important enough for users to focus on. To start the process, I began creating characters to put into the app. I started designing characters and pets before wire-framing for a couple of different reasons: it would be easier for me to fit the app's interface around the size and color palette of characters, and it would allow me to stylize the interface around the stylization of the characters I created.
I looked for inspiration on Pinterest to start ideating on character design, style, and color. After I saw clear similarities in every piece of media I was collecting, I started creating concept sketches that moved into character designs. In the end, I designed three starter pets, a professor that leads the introductory portion of the app, three bosses to fight against, and two avatars to choose from.
When creating the low-fidelity prototype, I focused a lot on the interaction aspect of the site: how users will get from page to page and what types of gestures they will make to switch pages. I also started to add color and finalized text.
I made sure to hold off on finishing touches like icons for buttons until I started working on my high-fidelity prototype because I still wanted to pay close amount of attention to the layout and the user interaction.
Creating a low-fidelity protoype.
Moving onto a high-fidelity prototype.
Once I was happy with the interactions, colors, and layout of my design, I finalized my high-fidelity prototype by adding icons to buttons. I drew these icons by hand in Procreate, transferred the PNG to Figma, and remapped the user interface so the interactions worked.
I used this prototype for usability testing, which I will discuss later. To view my Figma prototype, you can visit it here.
Creating the dialogue and tutorial part of the app.
To pair with the high-fidelity prototype, I mapped out the introductory dialogue and tutorial portion of the app. In this portion of the app, users are introduced to the main story as they are greeted by a professor who will be assisting in their Cyber-Ecologist lab. Toward the end of the dialogue, the main conflict is introduced as users meet their main rival, who calls them to a battle. Thus, users are prompted to learn the ropes of the app and start their first battle.
This dialogue transitions into the tutorial portion of the app, where users are taken through the different pages, how to use them, and how to move onto different pages within the interface.
Turning paper wireframes into digital wire-frames.
After transferring the paper wireframes to Figma, I started to replicate them digitally. In this step, I made sure not to get too specific on color, icons, or text because I really wanted to focus on the layout and interactions between pages.
In Figma, I used the prototype tool to draw connections between pages and buttons, making them interactive. I then tested out the interactions to make sure the interface ran smoothly. From there, I started cleaning up my wireframes, adding more text, and cleaning up the layout of each page to create a low-fidelity prototype.
Sketching out paper wireframes on Procreate.
Once the character and pet designs were completed, I started to sketch out paper wireframes, which helped me design the user interface of the app.
I sketched each page out on Procreate, which I then transferred to Figma to transform them into interactive, digital wireframes.
When refining my designs, I found four main issues with my high-fidelity that, if changed, would improve how this app was communicated to users or help address needs. These issues came in the form of the layout of the user interface, legibility issues, and communication of rare prizes. Here is a detailed look at these issues and how I was able to fix them in the next iteration of my prototype:
Making the screen time page the opening page. This was important to implement because it communicated to users the main purpose of this app. Out of all the pages within this app, the screen time page will be the page users reference back to the most often. So, it's important that this page is the first page users see.
Refining my prototype based on usability testing and user feedback.
Back to designing after research
Creating designs for rare and ultra pets. To show my users the different prizes you can receive after lowering screen time, I designed two different pets that are rarer and more powerful. If users lower their screen time significantly, they might receive an egg of either pet to hatch as a reward.
Adding text to the "About Pet" page to improve symbol legibility. Users were confused about what each symbol represented each element meant, because they were small and difficult to understand for first-time users. To fix this, I added text underneath the element symbol and pet name, which tells users which element their pet is. With this text added, the association between symbol and element title becomes clearer. Thus, users can either read the pet's element or identify the symbol that represents the element.
Moving from Figma to Unity
Coding the turn-based combat system.
After completing the design of the assets I created in Unity and started coding the dialogue and tutorial sector, the main interface, and the combat system. The code for the demo was written in C# and takes users through three days of using the app. During these three days, they battle bosses and gain prizes (such as XP for their pet and a mystery egg) as their screen time decreases. Here is an overview of my process:
Kayla Windust's Portfolio
kayla.windust@gmail.com
kewdyyy
Kayla Windust
