T1DAR: AR game to teach kids about Type 1 diabetes

AR game design

• Date: June - August 2017
• Client: Lenovo
• Category: AR/VR Desginer

Context

This project came about as Phab 2 Pro, Lenovo’s new flagship phone has just come out and they were looking for content for it in order to market it better.
T1DAR is an augmented reality game with a purpose to teach kids suffering from Type1 diabetes about how to take care of themselves, by making them take care of a type 1 diabetic pet.
It is intended for kids in the age group 8-12 and suffering from Type 1 diabetes, whose parents want them to take up a sense of responsibility for their own health.

Why is it a problem?

a. Kids suffering from Type 1 diabetes go through a lot of struggle in managing it.
b. They have to make sure to estimate the amount of carbs in the food they are going to eat correctly and then give themselves the correct amount of insulin. Moreover, they have to do it for all the meals that they are going to eat which is too much burden for a kid less than 8 years old.
c. The amount of insulin to be taken for a specific amount of carbs in a meal, can be very difficult to compute as well. Moreover, they have to make sure to take into account the carb ratio and correction factor as well.
d. The educational material provided by clinicians is too long and hard to remember for kids.
e. During the initial years of their life, their parents take care of it. But with time, the parents want the children to take responsibility of their own health.

Initial goal

To come with a prototype for a game that is fun, engaging, conveys all the learning points and can be tested with the kids at C.S.Mott children’s hospital.

My role

a. Worked as a game designer to come up with different levels of the game. Brainstormed, sketched, storyboarded and critiqued the different ideas to come up with the design of the level.
b. Prototyped the game in Unity going through various design sprints.
c. Conducted usability tests and A/B tests for validation.

Objectives/success criteria

Before we started working, we decided to define some key objectives that could help guide us through the design process. Some of the main objectives were:
a. To make the game fun and engaging.
b. Explain the concept of carb ratio, correction factor, insulin, glucagon etc. to an 8-12 year old diabetic kid.

Research phase

a. In order to understand more about Type 1 diabetes, we invited Dr. Joyce Lee, prof. of pediatrics in the Umich Medical school who explained us about diabetes and the common struggles associated with it.

b. Apart from that we carefully observed our in-house patient, a 12 year old girl suffering from Type 1 diabetes and asked her questions at regular intervals to make sure we understood the problem clearly. We were very keen to notice how she calculated the amount of carbs in a given food and what kind of food she preferred.

c. We performed competitive analysis, to see which all games are out there who are trying to do the same.

Current situation

This is the actual kit used by Type 1 diabetic kids. Just by looking at the kit it can become extremely overwhelming for a 8 year old kid.

An insulin pump: currently used by Alexis to calculate the amount of insulin ot give herself.

Glucagon: Whenever the patient’s diabetes becomes too high and gets out of control, glucogon is injected into them to get it back to normal. But It has to be done by someone else.

Educational material provided is too much for a kid to grasp and remember.

Execution

a. We worked in 2-3 week design sprints following a strict agile methodology. At the end of each sprint, we tested the prototype with a participant.

During the sprint, we started off with a brainstorming session, sketching the level design and then prototyping the same in Unity.

Objective #1: How to make the game fun?

Rather than having conventional pets, we decided to have a dragon as a pet.

Having a mini game where the kids would toss the food to boards with a random set of numbers with one of the number being the correct carb amount of the food.

Helping the kids, plan a meal of 100 carbs

Objective #2: How to make the game engaging?

Introduced a timer to have a sense of urgency and a Health Bar to get an accurate feedback of their actions.

Have a set of fireworks to have a sense of accomplishment when a kid completes the level.

Objective #3: How to make the game educational and cover all the learning points?

The first level acted as a tutorial for the kids in order to adjust them to the game settings.

Explaining the basic concepts such as target blood sugar level, to the kids.

Making the kids remember the carb amount in a food using practical scenarios.

Conclusion

For conducting usability testing of the game, we tested it by making the kids play the game before we received it with the one that we received afterwards and having them take a survey. We conducted this test with 6 target (or close) users.

A list of questions we asked the kids while conducting usability test.

After compiling the results of the survey, we were able to increase the engagement by 2.5% and the educational value by 5%.

Next steps

We had started with the design of next level. However, there were still some things that if given time we would have liked to do.

Making the menu items in a semi circular layout

Add an accurate visual representation of the quantity of food items. For e.g. 1cup of Milk, 1 cup of juice, 1 bowl of watermelon, 1 tsp. of sugar etc.

Looking back or learnings from the process

a. A game involves many complex interactions and thus it has to be prototyped (developed) in order for the person testing it to get the context right.
b. The ability to exxplain the design changes to a designer which involves changes in their previously employed code is a very important and useful skill.
c. Augmented reality is a very new concept and many people still don’t get the context. Thus making sure that the instructions which corresponds to the augmented reality part of the game are understood by an novice AR user, can go a long way.
d. Hardness of a level in a game needs to be properly balanced. If too hard, the participant gives up but if too easy, it becomes uninteresting. Thus, having a level a little on the harder side makes the user remember the things taught.
e. When aiming for a MVP, try to use and re-use as much of the interactions from the previous level as possible. This ensures consistency and make the player feel comfortable with the game. In terms of prototyping, it makes the task easier.

The Team

Usability evaluation: UM LSA Honors website

• Date: January - April 2017
• Client: UM LSA Honors
• Category: Usability evaluation

Client

The Honors program is a department within the College of Literature, Science and the Arts at the University of Michigan. This department maintains the LSA Honors website, which contains information for prospective and current students, faculty and staff, and alumni.

Context

The Honors program recently shifted its website to a new Content management system. Thus the staff is forced to transfer all the information from the old website to the new website template which has caused problems in the way information is organized and presented.

This problem exacerbated when the number of emails from students unable to find information on the website; to the Honors staff increased. Thus, the staff realized the potential usability issues with the website including confusing navigation and text heaviness on some of the pages.

My role

I collaborated with 4 other students from School of Information and was actively involved in each stage of usability evaluation.
a. Conducted interviews (as an interviewee and a note-taker)
b. Performed comparative analysis, heuristic evaluation and usability (both acting as a moderator and a note-taker)
c. Collaborated in the creation of a survey

Initial goals

As we started, we had the goal of making the LSA Honors website more usable and useful for current students.

Success criteria

Reduced number of emails from current students, asking about the information already listed on the website.

Scoping

Upon recommendation from the client and the current students being the major users of the website, we decided to narrow down our scope and focus only on the current students’ section.

Research Methodology

Research Method#1 : Interaction Mapping
A static representation of the LSA Honors website highlighted all the possible action states and thus any navigation issues (if 2 actions lead to the same place) with the website.

Research Method#2 : Interviews
We conducted interviews with 5 current LSA Honors students to find out about the kind of information they look for and the methods employed by them in order to find it.

Research Method#3 : Comparative analysis
Through this, we wanted to see how other similar websites handle the issues related to information hierarchy, navigation structure etc.

Presentation of information by LSA Sweetland writing center website.

Research Method#4 : Surveys
To find quantitative data about the information seeking behavior and the overall attitude of current students towards the website. Received a total of 28 responses.

In person help was the most frequently utilized method for finding information on the LSA Honors website.

Research Method#5 : Heuristic evaluation
Our goal here was to identify usability issues and areas where the site could be improved. We used heuristics like Visibility of System Status, Consistency and Standards, accessibility etc. to conduct our evaluation.

Using WAVE Accessibility system detects issues such as missing alt text, empty heading and links, problematic alt texts, etc.

Research Method#6 : Usability testing
We conducted usability tests with 5 current students to identify how several features of the website like top-level and side navigation menus, quick links, search bar, accordions, headings etc. are helping the users to find the information they are looking for.

Due to large amounts of text on pages, users used Ctrl+F (browser find functionality) to look for information.

Main findings and recommendations

1) Navigation terminology could be improved: Information about some topics could be found at more than 2 places which makes it hard for the user to remember where to find it. Also, when asked to find out about the Sophomore Honors award, all our usability test participants looked under Honors Awards and Grants page, which is understandable. However, the information is located under the Sophomore students page or the Honors requirements page.

Recommendation
a. More descriptive titles can be used for the pages that help the users in understanding what the page might contain.
For eg.

The Graduation for Honors Majors page talks in great detail about the process of completing an Honors Thesis, which is something that users may not be able to guess from the page title.

2) Unclear information hierarchy on a page, which makes the pages hard to skim and thus relevant information being buried in a heap of text.
a. Many pages contain just a wall of text. b. Pages lack headings and subheadings.

Recommendation
a. Add proper subheadings.
b. Make use of lists, indentation and bolded text to emphasize important information.

LSA Sweetland writing center’s website uses bold texts and headings which makes it really easy to locate information.

3) Accessibility issues - Recently, University of California Berkeley was asked to take off some of its free educational content as it was not accessible to people who were blind, deaf or hard of hearing. Read the complete article here. Owing to that, we checked the website for accessibility standards and found several issues:
a. Alt text attribute not set for many images, thus using the website could be challenge for screen reader users.

Using WAVE Accessibility system detects issues such as missing alt text, empty heading and links, problematic alt texts, etc.

In addition, Heading levels are often skipped, and b tags are often used instead of h headings, which keeps screen reader users from skimming the webpage.

b. Color contrast below the 4.5:1 standard. Sometimes there is low contrast between the different elements on the page.

c) Use of b tags for headings. Screen reader applications rely on heading tags to jump to different parts of the page. Incorrect use of heading tags decreases the skimmability of the webpages for screen reader users.

Using b tags for headings

Recommendations
a. Add meaningful alt text to images. This will make sure that the website complies with the ADA (Americans with disabilities act) and make it more accessible to its diverse range of users.
b. Using proper HTML tags for headings (h2, h3 instead of h4 and b). Adding proper HTML tags like h2, h3 rather than b, would make it easier for screen reader users to skim the webpages.
c. Use color contrast checker to make sure the color contrast meets the standard.

Next steps

a. Research and analyze the more frequently visited pages using Google analytics data and use these findings to inform a redesign of the website’s information hierarchy.
b. Complete a card sorting activity, in which participants organize topics into categories that make more sense to them, to reorganize the website’s information.

Shortcomings in the study

1) Many of our recruited participants either were associated with the LSA Honors staff or were extremely familiar with the Honors website.
2) Even after waiting for 2 weeks, we were only able to get 28 participants to respond to our survey, out of a total of 1900. Thus, the confidence level in the results obtained was very low.
a) Could have offered a raffle to encourage people to take the survey.
b) Employed other ways like approaching faculty to ask students in their class to take the survey.
3) All of our interviewees were freshman students which didn’t give us the complete perspective of the website usage by current students.
a) Offering participants some incentives to participate in our study could have got us a more diverse set of participants.

Looking back

a. The timing of the survey could impact the results a lot. Since our survey was sent over the spring break, we were able to get very less responses on it.
b. Confirming assumptions using the web analytics data is a really good idea, but it should be done earlier in the process. In our case, we got the analytics very late in the process and thus we could not look at it carefully due to time constraints and adapt accordingly.

The Team

Memorabilia

Novel social computing app to share your memories at a particular location, anonymously.

• Date: September - December 2017
• Client: None
• Category: Product design

Context

Memorabilia is a novel social computing application which allows people to share memories at a particular location anonymously.
a. Create a memory at a particular location which can be accessed by anonymous users visiting that location.
b. Take a look at all the memories created at a location, to know about the location history.
c.Create a map of all the memories created by you at different locations over time.

Why is it a problem?

The university of Michigan diag is a very popular place on the campus showcasing a big M and offers a very scenic view of the different campus buildings around it.

Figured out the problem yet?

This is the diag at 4 different years in the past.

But today when someone visits this place, they have no idea about what previously has happened in this place. And thus, they always find themselves wanting to find out more about the history of the place as to what made this place popular.

If you try to google search for the past of a place, the results obtained are not exactly defining of what has happened in the past at a particular location.

Initial goal

Devising and designing a novel social computing system, validating it and then developing and deploying the same on Amazon AWS.

My role

I collaborated with 2 other designers from the School of Information and was actively involved in each stage of the process including research using interviews, competitive analysis, field testing and affinity wall and sketched and designed wireframes in Balsamiq for concept testing. I also took lead in the development stage and guided the other designers on how to go forward with the design in order to develop it.

Objectives

Before we started working, we decided to define some key objectives that could help guide us through the design process. Some of the main objectives were:
a. Allow people to be able to discover random memories to inculcate a sense of serendipity.
b. Encouraging people to know more about a location bypassing time restrictions.
c. Encouraging conversation between random strangers.
d. Making people discover different locations based on memories created.

Success criteria

a. How many of the users come back to using the app?
b. How many users sign up to start using the app?

Research phase

Looked at movie trailers of movies like Harry potter pensieve and The Lake House, for inspiration related to how to depict memories.

Looked at big competitors like instagram, snapchat to see how they support sharing memories based on locations either through geo tagging or through the use of hashtags.

We found our closest competitor in Drop Messages.

Observational interviews with college students (most accessible and form a substantial chunk of users of social media apps). Our questions were chunked into themes including creating memories, storing memories, sharing memories, location memories and interesting memories, so as to give us a overview of how people currently think about memories in general.

From the interview data, we created an affinity wall.

Main findings from the affinity wall:
a. Location is worth a 1000 stories.
b. People want to review selective memories (filters)
c. Personal (unusual,identity) experiences matter
d. Memories are multifaceted (moments, long term, different representations)
e. Sharing is depending on relevance/relation (strangers/friends) and context.

Thus we began brainstorming into potential ideas for sketching and came up with a preliminary set of sketches to lay out the design of the idea.

Sketch round 1: Further brainstorming Validating features

For validating the features, we created wireframes and then took the concept to the field and asked our users questions like interesting features, kind of memories, sharing memories with anonymous users.

Thus based on the concept testing, feedback from other designers and considering the timeline of the project, we came up with a scope to reach the MVP.

Thus we focussed on 3 main screens of the app, that covers and explains the important aspects of the app.

Screen 1: Create a memory

Create a memory at a particular location which can be accessed by anonymous users.

This directly translates from our research finding: Memories are multifaceted (moments, long term, different representations).

Screen 2: Memories at a location

Access memories created at a location by anonymous users.

From research: Location is worth a 1000 stories.

Screen 3: Your memories over time at different locations

Have a look at all the memories created by you throughout your lifetime.

From research: Personal (unusual, identity) experiences matter.

Learnings from the process

a. Got a deeper understanding of social computing systems through the perspective of anonymity and moderation and the concept of social object.
b. Learned how to scope the features for a MVP with constraints and limitations.
c. When working on a new concept, validating the idea before committing to it fully is a good idea.

The Team

Graphic design

Some of my graphic design works. Complete collection can be found here.

• Date: Sep - Dec 2017
• Client: None
• Category: Graphic design

A design trend making use of botanical illustrations.

Redesigning my personal portfolio for web.

Redesigning my personal portfolio for mobile.

UMSI website redesign.