Scenario #1
- I've started out basically copying the screen mockup, with a few touches: I've changed the headline to a more welcoming and exciting tone. I liked the copy at the subheader, so I left it as is, and added our digital marketing gorilla near the healine.
- About the box illustration: I get this could be a very literal joke with the brand name, but I figured we should make it clear that this is a message box, and not an empty state. That's why I added the dialogue graphic.
- Where there's a sign up form, there should be a sign in link somewhere. I think the upper right corner is the most intuitive place for this.
- For this drill down, I've decided to insert the error messages under the sign up slots. They should appear after the user types the information.
- On the first screen, for the e-mail slot, I decided to enlist a common error as a tip in the microcopy. For the following slot, I went with a friendly tone. The last one was going to go with "You'll need at least eight characters and at least a number", but I decided to go with a more conversational tone and to avoid the "at least" repetition.
- The second screen is still Scenario 1, but I'm considering the user has inserted valid e-mail and password. I always get frustrated when I try numerous usernames and none is valid, so I think that suggesting a valid username similar to the one the user is trying is a very helpful nudge.
- Once the user types a good-to-go e-mail, username or password, a ✔️ symbol should appear by the right corner of the slot.
- For the third screen, we're still at Scenario 1, but I've considered the user has only typed their e-mail. When GuerillaBox realizes that e-mail is already at their database, this message should appear right away, suggesting the user could either try with another e-mail or simply sign in.
- The last screen shows that happens when the user types valid e-mail, username and password: the ✔️ symbols appear by the right corner of each slot and the Sign up button turns red, indicating the user is ready for the next step.
Scenario #2
- I've decided to go with two screens for this one – the first shows the path the user should go through to get to that pop up. I've included a link with a personalized message that should take to the user's profile page.