For my Master’s Project in the HCI program (the final project needed to graduate) I am designing, prototyping, and performing user testing on a smart-watch that tracks medication adherence with older adults. These are some early sketches in the process to work out ideas for designs and functionality. The pen and paper designs are somewhat rough so that I can get the most honest feedback without someone feeling bad about criticizing something on which I must have spent a large amount of time and energy. Check out full scans of these sketches for more detail.
Over the summer of 2012 I worked with the Information and Communications Lab at Georgia Tech Research Institute. Our client, the Georgia Department of Community Health, was planning to roll out a statewide Health Information Exchange for providers to be able to safely share their patients' medical records. The DCH asked us to help them learn about attitudes towards an HIE and Health IT in general so that they could make the appropriate outreach. We talked with over forty individuals throughout the state of Georgia across many roles, including physicians, clinicians, office administrators, CIOs, IT directors, and directors of service area HIEs.
We then synthesized all of the information gained in these interviews and focus groups and used it to generate six personas that we felt were representative of the variety of roles, personalities, and attitudes that we experienced. Each of these personas also has a journey map that describes their role in the process. Here I have provided samples of our final product.
You can also see the full, detailed deliverable as a PDF here.
Persona Overview
Tech-Tolerant Physician Persona
Large Hospital CIO Journey
Clinician Quotes
Professors at Georgia Tech use uses a website called T-Square to inform students of announcements and assignments and to upload resources for their classes. T-Square has poor usability on a laptop or desktop and there was no mobile version, which meant accessing it on a phone is very difficult and tedious. For a Mobile Apps and Services course, my group created T-Cube, a mobile web app designed to improve upon the functionality of T-Square while on the go. This project won second place at the Convergence Innovation Competition in 2012 under the “Campus Community” category.
I mocked up images 1 – 5 using Balsamiq. I used Balsamiq because the designs are detailed enough to communicate my ideas to my teammates but rough enough to still elicit constructive criticism. These images show the progression of designs we considered. Iterations were based on discussions between the front-end developer and me.
Images 6 – 9 show screenshots of the final design that was implemented. The final version was mostly developed by the front-end developer, but I helped some with the HTML, CSS, and overall design.
Group:
Kelsey Francis
Stephan Lee
Christopher Martin
Nitya Noronha
Kevin Terraciano
First Iteration
Our original inspiration was the UI found in some Windows Phone apps, which were generally fairly minimal with pages positioned horizontally. In the first screen you see a list of assignments. The “Feed” page is located to the right, and can be seen barely peeking out on that side. If the user selects one item, a detailed description of the assignment would slide out.
Second Iteration
We quickly decided against the Windows Phone idea, realizing that its navigation concept could be difficult to immediately understand and that it would be difficult to develop elegantly. In this design there is a main feed (a feature that currently does not exist on T-Square) that displays the most recent announcements and assignments from all courses that are due the soonest. You could also look for this information by class. These two screens show the basic organization of the feed.
Third Iteration
Fourth Iteration
The idea of moving left and right through screens was getting confusing, so we decided to have the bar drop down to reveal the menu when the user touched it. In these screens you see the same navigation as the previous design, but when the user selects a course they see the options available for that course. Touching the menu bar (at the bottom now) would cause it to slide back to the top, revealing the main feed again.
Fifth Iteration (phew)
Main Feed
Navigation Menu
Course Home
Course Resources
This was our video entry into the 2012 Convergence Innovation Competition. This project won second place in the Campus Community category.
Run4It is a virtual road race game to help children and young adults learn about exercise and healthy eating habits. This was a group project from the Spring of 2012 in the Human-Computer Interaction class, with programming support by Georgia Tech Research Institute. My group designed the interface and interactions.
This game uses the Microsoft Kinect to detect that a player is jogging in place. The player progresses through the level at whatever speed they are jogging. Each level is built from a real-life route comprised of images from Google Street View. Throughout the course there are water bottles and sodas, as well as healthy and unhealthy snacks. These teach the player the benefit of staying hydrated and making healthy decisions.
Throughout the course of this project my group researched existing systems, conducted a survey about exercise and video games, defined user characteristics, generated personas, performed task analyses, and created critical use cases and usability goals. From this information we created sketches, mockups, and an interactive prototype, which we used to perform user testing.
Group:
Shane Owens
Jonathan Schuett
Kevin Terraciano
Xiao Xiong
Interface Options Sketch
Sketch by Xiao Xiong
This shows the many design options we considered early in the process of designing the game's interface. The sketches were done by Xiao while all group members sat around the table making suggestions. We divided up the options for displaying hydration, power ups, distance traveled, progress through the course, and audible notifications to use for our individual mockup concepts.
Gesture Options Sketch
Sketch by Xiao Xiong
We considered a few different gestures for interacting with menu screens using the Kinect. On a route-selection menu with a globe, the user can swipe their hand sideways to spin the globe. Zooming could be done with a "pinch-to-zoom" gesture that is performed with the arms rather than the fingers. Users tended to like the playfulness of this interaction but it was a bit too complex for finding specific courses.
Filter Menu Sketch
Sketch by Xiao Xiong
This is an early sketch of what would become my filter selection interface for the route selection screen.
Video Tutorial Sketch
Sketch by Xiao Xiong
Three types of tutorials were considered: a practice round (where the user learns to run before the first race), trial-by-fire (where instructions are only given at the start of the user's first race), and a non-interactive video tutorial. I mocked up the video tutorial.
Menu Mockup
There are two main components of this route selection screen. First, the user selects a filter by swiping up and down on the left side of the screen, which adjust which routes are shown. The routes themselves are shown in a cover flow-style display. Swiping left or right on the rest of the page flips through the available options found within the selected filter.
Pie Menu
A pie menu is an alternative method of choosing a filter. We felt that a pie menu was an interesting type of menu for gesture control since, starting from the center, each option is an equal, short distance away.
Video Tutorial
The video tutorial focuses mainly on the gameplay and interface rather than interactions or environment. A voice narrates the tutorial explaining what the user should be doing to complete a run. It is shown the first time the user plays, and can be skipped if the user has somehow already seen it.
Gameplay Mockup
In my mockup of the gameplay, the user has an avatar that is seen in a third person view. (In the other mockups there is a first-person point-of-view.) The hydration meter is double coded: the word "hydration" is shown as well as a picture of a drop of water. There is also the percentage number along with the drop visually filling with water. "Street sign" instructions are shown at the top of the screen showing which gesture to perform. In this picture the user is being told to reach out to the right for the water bottle.
Final Menu Screen 1
Final menu by Xiao Xiong
This is the final, interactive version of our route selection screen. It is heavily based on my mockup with some additional features. Since users liked the cover flow and pie menu options, and since they are interesting to interact with using hand gestures, we kept those elements.
Once the player narrows down their choices by choosing a category and, in this case, city, they may hover their cursor over the "RUN" button next to the course to begin.
Final Menu Screen 2
Final Menu by Xiao Xiong
Once the player reaches to hover their cursor over the pie menu icon (it's good to stretch before exercising, right?) the menu expands, allowing them to choose a category of courses. Hovering over one slice of the pie (or wedge of the apple if we're trying to be health-conscious) will select that category.
Final Gameplay
Final Gameplay Design by GTRI
This is what the player sees on the screen while running in place. By using successive images from Google Street View, it appears as if the player is running through a real-life environment of their choosing. Healthy and unhealthy snacks and drinks are scattered on either side, allowing for the runner to reach out in either direction to grab them. The icons that received the best feedback in user testing were chosen for the in-game interface.
User Testing the Prototype
After the interactive prototype was complete we brought in users to try it out and think aloud while using it. After selecting a specified course and running it we gave them a short interview (with a bottle of water) to find out what they liked and what could be improved. This feedback went in our final report.
Smart Packages is a pair of apps designed for the Georgia Tech community (but easily extensible to other campuses or apartment complexes) to streamline the package delivery system. The current system takes a lot of time, manpower, and paper to distribute a notice that a student's package has arrived.
This is unnecessary.
Our staff app would allow the staff to log incoming packages and send an automatic electronic notice to residents. Residents would immediately be notified (on their app or via email) and could come to the front office to pick up their mail, making the process much quicker and more efficient.
In this group project I helped develop the idea, talk to potential users, design the apps, write the business case, and film and edit the video. This project won first place at the Spring 2012 Convergence Innovation Competition in the Campus Community category.
Group:
Larry Freil
Stephan Lee
Nitya Noronha
Kevin Terraciano
Sung-ihk Yan
This was our video entry into the 2012 Convergence Innovation Competition for our Smart Packages project. This project won first place in the Campus Community category.
Remind Me is a device for the home that reminds users with memory impairments that they have left a dangerous appliance unattended. If the appliance (in the case of the demo, an old iron) is left on and a sensor in the room stops detecting motion, a picture of an iron in a picture-frame, located in a common room, will light up and start playing noises. This reminds the user to check on the iron and turn it off.
In this group project I helped refine the idea, do research, write the business case, and film and edit the video. This project won second place at the Spring 2012 Convergence Innovation Competition in the Health IT category.
Group:
Eric Caspary
Larry Freil
Nitya Noronha
Lauren Schmidt
Kai Tan
Kevin Terraciano
Pratik Zaveri
This was our video entry into the 2012 Convergence Innovation Competition for Remind Me. This project won second place in the Health IT category.
When a device is left on with no movement in the room, the frame lights up and plays music to alert the user.
