I improved the UI of last week’s behavior tracker app with some animations to improve the affordances and used some mappings and feedbacks to communicate user actions and increase incentives.
On the cost assumptions tab, I wanted to add some functional animations to fill the comprehension gaps and provide feedback. I added a grocery bag icon indicating how much groceries user is purchasing, and a flying bills icon indicating how much money user is spending on purchasing meals from outside. The more money user spends on groceries, the bigger the icon gets, the flying money icon also gets bigger the more user eats outside implying bigger money is flying away so user becomes aware if he’s spending a lot on outside meals. I also wanted to make the animation more delightful by jiggling the icons when the slider is dragged down, but I’m still figuring out how to implement that. On this tab, I added a new input for user to define the goal of how much money user wants to save per week in order to track user’s progress.
On the progress tab, I created a circular progress bar tracking how much the user has completed his goal. I followed this Circular progress bar tutorial to add some circles from CAShapeLayer, customized the attributes, and animated the strokeEnd of tracker bar layer and the pulsing circle with CABasicAnimation, so that the progress tracking feels more dynamic and motivational.
Challenge:
Since I wanted to add more functionalities to my old project files without making changes to them, I duplicated the old project folder and worked on the duplication, however, the changes seemed to affect the old projects as well. I realized it was a bad idea to make copies of projects and keep working on it, therefore I had to figure out how to add a branch on my github repo and merge back to master branch.