Data Submission Workflow on ScoreForm

[rruenroeng]

What's Wrong? Data submission needs to be an intuitive and pleasant experience for end-users. In our apps current status of the application isn't clear. There is a number of things we can design into the application to make this more intuitive for the end-users.

What do I Expect to Happen? After a bunch of back and forth here is where Darren and I landed for the idea behavior of the ScoreForm. Here is the expected behavior

1. Player loads ScoreForm.
2. Player selects an editable field for an exercise. This in turn displays a submit button that's not-pressed and white.
3. Player adjusts their score. This does nothing to the Submit button.
4. Player clicks the submit button. This will press the button or turn it Gray. This will send a Post to the back-end which will in-turn submit a callback when it's complete.
5. The client will receive the call-back with its response. a. If the post was successful, the button will turn green and the text will be replaced with a sweet thumbs up icon. b. If the post returns an error, the text of the submit button will turn into a thumbs down icon and the button will turn red. If the user clicks on the icon, a modal pop-up will return a player-facing error message along with a clear actionable step to take.

Suggested Fix Do code.

Supporting Information

[DarrenZLew]

Submission of data is complete. Just need to show a nicer view to client that submit was successful or not.