After observing the real user responses, the crucial flow components that frustrated many users became obvious.
Most (90%) users waited at the bottom of the page and tried to scroll down by default. There was a delay in waiting for an action or potential pop-up instructions, and users would naturally scroll up after a delayed response.
Some (40-50%) users missed the error message box completely & the error entry field the first time. Users would scroll up and down multiple times because the error refreshed page location was stable at the bottom of the page without any notification/action instructions for the user. At this stage of the process, it felt like a guessing game for the users.
Gray button In the error refreshed page the obvious first impression difference was the “Subscribe” button color changing from green to gray. Since gray buttons are universally associated with the button being disabled without any action or instructions, a gray button would confuse them, assuming the page is at a stand-still.
Some users didn’t see the error message. The error message box that notifies users of the exact error was located above all entry fields that would hold the actual error(s). It would be ideal at the original location if the refresh page location started at the top of the page. Users would have to scroll down to the error message box to understand what they did wrong before seeing the actual error field.