Health-themed Mobile Application Creation

This page briefly outlines the process that I took to create a simple mobile application about bone health. You can skip to the bottom to watch a video demonstration
of the application!

 

Data Collection

First I compiled the list of tips and facts that I wanted to include.

Concept sketches

Then, I did a rough sketch of what I wanted the application to look like. I took that sketch and created a mockup using Adobe Illustrator. I ended up going for a more analogous color scheme to match the nature of the project.

 This is the fleshed out design in Adobe Illustrator

This is the fleshed out design in Adobe Illustrator

Production

The timeline for this project was around a week, so I opted to use graphic elements such a boxes rather than illustrations.

I created the layout in Android Studio using the appropriate widgets (Image buttons, Buttons, Plain Text Views, and Edit Text Views). Then, I modified the default Android Theme to an analogous color palette.

 This is the first page that the user sees.

This is the first page that the user sees.

 This is the page that appears after clicking the button "Test Yourself."

This is the page that appears after clicking the button "Test Yourself."

Coding

I coded the processes that I was familiar with such as button click functionality. Then, I researched how to code novel functions such as image pop-ups.

One thing that I wanted to include was informative feedback when the user selected an answer. I wanted a hint to display if the selected choice was wrong and a "Correct!" to display  if the selected choice was correct. This required a extra coding using switch statements and toast notifications

 This is what the user sees when they click on a box.

This is what the user sees when they click
on a box.

 When the wrong answer is selected, a notification appears along with a message saying "Hint below."

When the wrong answer is selected, a notification appears along with a message saying "Hint below."

Testing

Throughout the entire process, I ran the application on a Nexus 7 Android tablet to ensure that the application was functioning without errors. I also asked peers and family members to use the app to get feedback on the user experience and to watch how they interacted with the interface. As a result I added simple instructions such as "Click the button below to test yourself" to increase clarity of use.

Lastly, I did a screen recording to show how this application works! This is a simple iMovie with the recording done in Quicktime.

That's it! Thanks for looking! I plan to expand upon this application and eventually provide it for public use.

 

Click the button below to visit my blog! I post information there about new projects and my process along the way!