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

bottom of page