For this documentation, I will go over the process of how I created an app prototype geared towards helping others quit unhealthy habits, as well as the changes made from the first conceptual sketches all the way to the present prototype I have today.

For the process of research, I had to really take into account what kinds of struggles people dealt with in the world of health. And of course, I found that health issues vary by a huge margin. The process of research would persist all the way until the beginning of the High-fidelity prototype of the project, once I figured out how addressing all of these health problems could be adapted as features inside of the app. In simpler terms, the more I read up on the topic my app was modeled after, the more changes were made to the UI. More specifically: changes that helped rule out what was necessary to include and what wasn't.

These were the first concepts of the app's UI, made up of mostly sketches.

The name of that app would be decided as "HabitHalt."

As you'll notice, (like the testers did) the layout of the UI is basically all over the place. Sure, there were some symbols and visible wording that could make nav sets easier to recognize, but nothing really feels connected in terms of presentation. It is also worth mentioning that the color coded buttons weren't included in the initial presentation of the Low Fidelity model, so I of course had to make edits to certain frames in order to make buttons more identifiable.

Going more in depth as to what features were drawn up, there were "Programs", "Consult", "Surveys", and "Progress", which would be featured in the main menu upon logging into the app.

Programs - allows the user to read manuals related to various topics of health that could assist them in figuring out their road to recovery on their related health problem.

Consult - allows the user to consult an advisor and chat with them, in an effort to help those who require assistance in stopping unhealthy habits.

Surveys - users could take surveys related to their focus of health, which informs them on not only possible solutions or methods to recovery from specific health problems, but how share/shared your issues dealt with them on their own. It allowed the user to get an idea of what steps to take.

Progress - users could keep track of progress towards their road to recovery through a calendar function, with the ability to add labels and reminders, as well as change or select their main health focus, which is the topic relating to the health issue they are trying to either quit or recover from.

When the first testing phase rolled around, I made sure to take note of what the testers liked and disliked. The same applied to the second phase. In the span of both phases, 3 users would test the app and be given a set of tasks to perform. They are listed out on these user flow charts below:

Although the initial tests were successful, users pointed out missing features that would definitely add quality of life to the navigation, like a download button so the "programs" present in the app could be viewable on your phone's select PDF reader or offline. And the ability to continue chats with advisors, as the testers reminded me that listings do not stay the same forever. The testing phase exposed a lot of what was missing and how to make the navigation flow better together.

This is the point in the project where I took all the feedback from the tests and adapted them. The layout was redone to look less complex and more easier to navigate, all while adding in those quality of life features missing from the previous version. Some features, although very tiny, were removed for being unnecessary to the app's purpose.

The final version of this prototype adapts new fonts and colors into the style, as well as a few new (minor) features and tweaks. Labels of certain features were changed. For example, Programs turned into "Guides", as I felt it suits the purpose a lot better. Take the time to browse around if you'd like.

- The fonts "IBM Plex Sans Thai Looped" and "Inter" were adapted into the apps style.

- The main accent colors were initially going to be orange. I had planned this since the presentation of the first sketches. But after some more thinking was done, I settled on using mostly greens along with some greys. Green was decided on because most things that are healthy are seemingly represented with the color green, just like vegetables, and given the purpose of HabitHalt "halting" the unhealthy "habits", I felt it would match very well.

- Added a profile inspection menu, accessible through the navigation bar and home menu.

- Added a Dark Mode in the Settings menu, to give users a mild choice in how they view the content in the app, keeping viewing comfort in mind.

- Added a Home menu that acts as a hub at startup upon logging in. Brings awareness to recent updates to the software, upcoming events related to the field of health, and gives recommendations based on the user's health focus.

- Added more prompts for specific result screens and navigation interactions. (Example: Prompt is brought up in a "Y/N" fashion before consulting an advisor to chat)

- Removed tasks from the Progress section. These "tasks" were planned to be a way to monitor a users progress on quitting an unhealthy habit. But I quickly realized that the calendar feature would be enough for those who use the app to label their progress there.

- Remove symbols on specific feature navigation buttons like "Guides" and "Switch Focus". Previously the icons featured in those sections would be specific to the topic or focus covered. I imagined if the app was real and available to download on the App Store and Google Play Store. It would be more likely than not that more and more guides and focuses would be added over time with newer updates, and in decently sized batches too. To create new icons for every guide and focus added would be more than enough work, so I reduced the button labeling to just labels.

Looking back, there is a lot more I could have added to make the app feel even more alive and connected. But given the quota that needed to be met, time constraints, and other key factors playing into the time I had with this project, it couldn't be done. But I think I am proud of the primary functions and presentation I was able to communicate in this project, and I hope I have impressed some of those who have seen the presentation.