UCSD Global Ties: Diabeatit

Diabeatit is an educational health game tablet app aiming to teach children about diabetes.

Main Menu
Try it out!

Project Summary

Made under UCSD Global Ties’s Design For Development Lab for clients at the UCSD School of Medicine.

Story / Game Structure

story structure

Navigation

The team first began organizing the logical flow of the game’s navigation by grouping related functions and creating objects to place within the system.

paper nav flow
My rough ideas of how the game should be organized.

Plot Points

We plotted out the game’s overarching narrative into plot points concurrently with its navigation.

A typical 3-act story structure was fused with the navigation structure to ensure players would follow their avatar on their journey to learning about diabetes.

When converging we decided to combine our thoughts and ideas onto a white board drawing to ensure group comprehension.

mental model on whiteboard
Our finalized game structure/story flow.

UI: Wireframes

Lo-fi Sketches

Once we were all on the same page, we (along with someone from the Tech team) diverged to sketch lo-fi wireframes to come up with diverse ideas for presenting the navigation and story to players.

my individual wireframes
My individual wireframes with marked feedback from teammates.

This strategy proved useful when we combined UI elements from each member into a collective set of wireframes that better represented the UX team’s intentions and what the Tech team were capable of.

collective wireframes
Our collective wireframes. The Settings page was kept as-is.

Testing Paper Prototype

Time constraints caused us to do quick guerilla usability testing using three participants and specific-task based tests to elicit quick feedback for refining the UI’s layout.

For example, a common issue was a lack of clear affordances with the buttons. Participants reported confusion with where they went or what their functions were. More can be seen in the User Testing Report.

UI: Digital Collaboration

Moodboard + Style Guide

Before we began redesigning the layout in Figma, we created some quick moodboards. The first displayed inspiration for how friendly children’s game UI’s should look.

moodboard #1

The second moodboard was made to reflect the game’s tone and mood regarding teaching kids about diabetes.

moodboard #2

With the moodboards in mind, we made a styleguide to help ensure visual consistency across the game by defining the appearance of the UI elements and containers.

Containers in this diagram are presented with their frames removed to help the team understand how layering worked with their contents.

style guide

Digital Prototypes

The UX team worked together in Figma because of its collaborative ability and perks from its free plan. I redesigned and implemented in Figma the Start Menu, Settings, Intro Dialogue, and Home screen.

screens alternating on iPad

User Testing Report

We compiled our findings from testing in greater detail and asked future teams to consider potential issues and understand our reasoning. I wrote everything except the “Results & Interpretation” section.

Check it out!

Potential Next Steps

Had we more time, we would've conducted user testing with a school our outreach team connected with and see whether they could navigate successfully and what they thought about the interface personality.

Meanwhile, the Tech team would hopefully have made enough progress in Unity to prototype the bare mechanics of a game and the UX team would have begun implementing the interface in Unity.

Reflection

Diabeatit was one of my last projects before leaving UCSD and I loved having the chance to work on games. I also learned a lot more about myself, my communication style, and leading others by going outside of my comfort zone and taking this responsibility.

Final Deliverables