codeforbtv / cvoeo-app

The "Money on My Mind" app helps CVOEO's Reach-Up clients stay on track with their personal finance coaching.
Apache License 2.0
11 stars 4 forks source link

Create on screen "balloon party" with animated GIF #27

Open kmeyersvt opened 5 years ago

kmeyersvt commented 5 years ago

Goal: As a User, I want a mini party thrown in my honor when my Coach has acknowledged that I have met my goal. This will be implemented as a modal screen displaying an animated gif (see below) and text like "You met your goal!"

The tricky part is the trigger for this goal. We would like the client to see this after CVOEO has confirmed a goal is complete. The actual trigger might be a push notification. Or maybe when they open the app for the first time after the goal has been verified by the Coach. Probably only one or the other though. Please discuss this behavior with @doub1ejack or @kmeyersvt before proceeding.

DoD: The Balloon Party is thrown with the text of the milestone achieved for:

The party will consist of an animated GIF provided by Siuan, see mockups here: https://drive.google.com/drive/folders/1V4Q-Kq6dFsdJg6wTDNyIwG-eXW4gpArT

(Relates to #114)

kmeyersvt commented 5 years ago

Assigning this to you to attach the animated GIF.

doub1ejack commented 5 years ago

We should probably include some way to let the user see exactly what we're celebrating too. This could probably be some variation on the "achievement unlocked" pattern. Here's an example from google images:

https://quitnowapp.com/images/L10n/en/android_5.png

kmeyersvt commented 5 years ago

Good point. We need to identify how we want to categorize these or if we want to display the entire goal or if we say 'goal completed' 'money saved' 'class attended' or 'appointment kept'.

siuanm commented 5 years ago

Is there to be one animated gif that is separate from the triggered accomplishment message (like one follows the other) or are there multiple gifs with each message incorporated into a gif?

kmeyersvt commented 5 years ago

I think that one animation is enough. Can you put the animation into a frame that has the goal/category on the top? Like in Micah's example, where the calendar is would be the animation? Or below the wording?

siuanm commented 5 years ago

I will start brainstorming some ideas and see what I can come up with.

nfloersch commented 5 years ago

https://stackoverflow.com/questions/35594783/how-do-i-display-an-animated-gif-in-react-native