top of page

MedPets

Overview

Built in UNITY (2022.3.20f1), MedPets is a game created to build healthy habits and medical knowledge, specifically for those living with diabetes.

My Role: UX/UI Designer & Art Director

Applications Used: 

My Team:

Sarina Varela
Producer
Harlan Robnett
Producer
Spencer Rhodes
Tech/game design
Ella Key
UI/Design
Casey Dutton
Aesthetics
Karen L
Aesthetics
John Yoon
QA
Alexander L
Concept Artist/ Sound Designer
Skyler Kweon
Tech/game design
Mary Gavrilova
Tech/Designer/QA

Milestone 1: UI Concepts

Virtual Pet Concept

PET ACTIONS

Players can FEED or EXERCISE/PLAY with their pet.

ITEMS

Medication

  1. METFORMIN

  2. ITEM

Food

  1. ITEM

  2. ITEM

EXERCISE/PLAY

PET ACTIONS

Sometimes your pet will fall into a NEGATIVE state, aka they will become HUNGRY, TIRED, OR SICK. Acting properly will heal your pet.

  • NAUSEA <- BAD COMBOS

  • BORED <- NEED TO PLAY/EXERCISE

  • HUNGRY <- FEED

  • TIRED <-TOO MUCH PLAY/EXERCISE

Feeding your pet the 2 wrong items in a row will sometimes cause them to BECOME SICK.

Chain Matching Concept

MATCHING

Players will match Food or Medicine Berries to create Food or Medicine. Making 3 combos of the right combination will give the player ONE of that item.

TIME

Players will be given 90 seconds to make matches for the items they want.

(Scoping for the future…difficulty will be increased by having less time, but will be balanced by allowing for easier item creation.)

Color Palette

Milestone 2: Edits

Testing out the new color palette and refining the layout of the virtual pet and matcher screen. 

Early UI Rules

  • Keep within color palette 

  • Prioritize icons over words

  • Numbers are BIG (18 size)

  • UI icons are cream or dark blue

  • UI elements are primarily blue

  • Font is K2D

  • UI elements utilize a 3px size border and slight shadow

Edited Screens

Home Screen
After Chain Match Screen
Status Screen
Chain Match Screen
Inventory Screen
Settings Screen

UI Walk-through 

Milestone 3: Finalization 

Guidebook UI

Pause Screen
Guidebook - Directory
Guidebook - Info Page

Spanish UI Test

In MS3 to MS4, language tests were done to account for how Spanish would fit in the UI.

Spanish Settings Screen
Spanish Info Screen
Spanish Results Screen

Milestone 4: Implementation

Guidebook UI Updates

Guidebook access through pause screen
Guidebook access through pet screen
Updated guidebook info screen
Updated guidebook directory screen

Unity Implementation

Actual implementation of UI elements has been into the CHAIN MATCH, SETTINGS SCREEN, and START SCREEN. Examples of this in the editor are below. More can be seen the MS4 Demo Video.

Milestone 5: Edits & Implementation

UI Implementation in Unity

UI has now been implemented into the PET SCREEN, RESULTS SCREEN, and INVENTORY SCREEN. The GUIDEBOOK has also been updated for the User Input System. The buttons within each area also now have responsive audio when clicked.

Milestone 6: Updated Work 

From July 2024 to December 2024, two other teammates and I were hired by the University of Texas to continue development on MedPets. Here is a brief overview of the work I completed during that time.

Food Redesign

Original designs were over complicated. I needed to make them simple and clear so an older audience could understand what they were.

New Food Designs

Medications Redesigns

UI Edits

Made the chain matching results page more dynamic by allowing users to flip through the items they collected
Made the blood sugar bar a meter rather than a progress bar to better reflect blood sugar: not to high & not too low
Changed the play button from a triangle to an icon of a dog walking to better reflect what the player is accomplishing by playing the matching game

Transition Animations

Created animation for the matching game to allow for cleaner flow between screens. This feature has not been implemented yet

Guidebook Redesign

The guidebook design was refined to better communicate its purpose and improve usability. Throughout their MedPets journey, patients can add and manage medications directly within the app. By selecting a medication, players can learn what it is for, view dosage and timing instructions, and understand which foods to avoid or pair with it—supporting safer and more informed medication habits.

Homescreen Redesign

I added a feature to display the player’s pet name, helping make the pet feel more personal and meaningful to the user. I also updated the exercise icon from a lightning bolt to a weight to improve clarity and better communicate the action.

Tutorial 

A major priority for my team and I was to include a tutorial not only was this an efficient way for players to fill out their information, but players could then understand the basic game loop and goal behind the game. Below is a prototype of the tutorial created in Figma

Milestone 7: Updated Tutorial

In Spring of 2026 I enrolled in Advanced Games for Good to continue working on MedPets to get it ready for human subject testing. Our primary goals were to revise the tutorial and finalize the UI, improving the overall flow and user experience of the game. 

Revised UI

The Problem:

There was an overall lack of consistency in the UI, through design, scaling, and resolution. 

The Solution:

Reimport all UI using a vector scale, so UI can properly scale with different screen sizes and create a more consistent Icon library.

Created more consistent, simple icons for the pet state panel

Redesigned bottom navigation icons to match the rest of the design system

Redesigned the pause panel to match the rest of the design system

Revised Tutorial

The Problem:

The current tutorial was to lengthly, due to heavy text blocks explaining how to play the game. 

The Solution:

We decided to show rather than tell, replacing multiple heavy text boxes with quick animations that communicated the same information just in a more efficient manner. 

Revised Tutorial Mockup

We began by outlining the new tutorial in a google doc, rewriting the dialogue to make it more snappy and adding mockups of what our tutorial animations would look like. 

Revised Item Information Display

As we created the revised version of our tutorial, we noticed a lack of use in one of our features, The Guidebook. We wanted our players to be able to quickly view a medication and learn what it is and what it does. We felt that our current layout for this was too convoluted so we decided to simplify it. 

​

We also applied this new solution to any new item the player receives. When they select it in there inventory, a pop up will display with basic information about what that item is and how it can effect the players in game pet.

Old Version
Revised Version

Revised Tutorial Implementation

We then implemented our revised tutorial in Unity, using CSV files for the tutorial dialogue (translated to both English and Spanish) and Unity's built in animator for the tutorial animations. 

bottom of page