First draft of site map- outline of app
Step 1: the grand idea
First draft wireframes
Obesity is a problem in the United States, but a lot of physicians do not talk to their patients about nutrition and lifestyle management, or about their disease.
For my graduate research, I wanted to design an app to see what could be done about this problem. I wanted to see if I could design an app that relays nutrition, exercise, and obesity information in a way a lay audience could understand their condition, and understand what they could do about it.
This project was my introduction to gamification. Yu-kai Chou’s practical approach to gamification is that life is a game, so turning gamifying something as vital as maintaining a healthy lifestyle was an exciting challenge. I am excited to further learn about gamification and improve my abilities in its applications.
The first step I took was having a discussion with healthcare providers and dietitians that interact with this population regularly. From these discussions, I was able to understand what health care providers perceived the problem to be. I created an outline of an app that could encompass almost everything talked about during the discussions.
After deciding what features the app should have, I began to create sketches for the layout of the app, or a low-fidelity wireframe that would go through revisions. The process I went through for improving this app at various stages is called iterative design. It is a process of creating, testing, refining, and testing, until the perfect product is achieved. The scope of my research did not allow time for the “perfect product”, but learning these principals is vital to future research.
Step 2: the impactful design
The step after creating the low fidelity wireframes was revising them and creating more polished, or high fidelity, wireframes in Adobe Illustrator. They were printed out to be used for the paper prototyping process, which included health care providers performing “tasks” to navigate through the paper wireframes as if they were a mobile device.
Illustrator screenshot of high fidelity wireframe creation
First version of icons (pre- usability testing)
In the final app, a MyHome icon was added. The facts icons were both combined into a more universally recognized facts icon.
The first version of icons was confusing for users during usability testing. The icon to the very right was not recognizable as an icon that contained facts. There was also no intuitive home screen button in the icon menu.
Final version of icons
Rounded edges and sized to match a modern mobile device
Paper prototyping printouts
Usability testing was useful for receiving feedback about organizational choices, design decisions, as well as improving functionality based on the specific population’s needs.
Final site map, revised for feasibility and usability
After usability testing, the site map was again revised to reorganize information that was confusing. The blue line in the site map indicate what functionality is also featured on the home screen, that users can go to directly.
Step 3: the tangible visual
After reviewing feedback from usability testing, the app creation process began in Unity 2D, a game engine. Between the paper prototype and the actual app, there were changes made not only from user feedback, but also because of technology and time limitations.
Set-up for usability testing
MyFacts screen showing two exercise and two nutrition facts. One new exercise and nutrition fact each show up for every new day the app is opened. Since this app was opened for two days, there are four facts.
Code for Left) Unlocking different accessories for pets based off of points, Right) Adding, editing, and saving text into the MyGoals tab, as well as increasing points when a goal is “checked” as completed
At the end of the study, I created an app that was built out for and worked smoothly on an Android phone (time and technology limitations did not allow for me to go through the Apple App Store). This app was tested over a course of two weeks, in an experiment that compared information retention through an app vs. through printed handouts. Due to a small sample size, no conclusions could be drawn about the efficacy of the app, but valuable qualitative data surrounding content of a health app, user-centered organization, UI/UX design, and iterative design was gathered.
Nutrition and exercise fact sheet given to the control group. Another fact sheet about obesity facts was also given.
Example hierarchy of Unity2D scene
MyPet Extras screen showing the pet with four choices of accessories. There are only two accessories to begin with, but once the user gets five points, two new accessories are unlocked.