The goal is to redesign Stagetimer’s login and signup flow to fix a number of usability issues with the current version.

Target Audience: Broadcast and live video professionals, skilled with hardware and at times unacquainted with “typical SaaS login methods”.

Visual Style: Keep it in line with the simple design and color scheme of https://stagetimer.io. Form from function, aka. prioritize clear usability over aesthetics.

Brand / Visual Identity: Stagetimer uses simple friendly and direct language, avoiding corporate or marketing lingo. We want Stagetimer to be a trusted and competent resource. We like bold primary colors, low poly illustrations (they are all AI generated), and the handwritten arrow + label style.

But all of this was designed by me, a developer. Please feel free to improve upon the brand / visual style for these pages as you see fit.

Required Pages

• [ ] Signup page
  • Stagetimer can be used without user account.
  • The benefit of creating an account is to save your rooms and access them later on.
  • Also if you want to use paid features an account is required.
  • Primary method is Email/Password
  • Google and Facebook signup are also available, but less important
  • Checkbox to explicitly accept T&C and Privacy Policy
• [ ] Login page
  • Primary method is Email/Password
  • It should be clear that one has to first create an account before one can log in
  • The same is true for Google and Facebook logins
• [ ] Forgot password page
• [ ] Confirm email page
  • After signup, users must confirm their email by clicking a link sent to them via email
  • The page should also offer an option to users to re-send that email
  • It should also clearly communicate what email address the email is sent to
• [ ] Email confirmed page
  • When a user clicks on the confirmation link, they end up on this page
  • It should communicate clearly that their email was successfully confirmed
  • It should offer a clear button leading users to their dashboard
• [ ] Accept invite page
  • Paying users have the option to invite team members
  • The team member will receive an email with a link
  • When a user click that link, they end up on this page
  • It should communicate clearly the following cases:
    1. The user is logged in and successfully accepted the team invite → primary action is to navigate to the team dashboard
    2. The user is not logged in and has to login first (or create an account if they don’t have one already)
    3. The user is logged in with the wrong user → Please login with the correct user account to accept the invite
    4. The invite link is no longer valid
  • The page should show the name of the team the invite was for. E.g. “IBC 2024’s Team”

<aside> 💡 About teams and invites: Every user is part of one or more teams. Teams can invite users. One invite is for one user. Some users have multiple accounts (usually because they accidentally use the Google login) so they can only accept the invite with the correct account (email addresses must match).

</aside>

Current Flow

Issues

• The login and signup page look identical on first glance, leading to people creating new account accidentally with alternative email addresses. That’s also no surprise, because it uses the same component.
• In an effort to fix this I disabled account creation on the login page, but the error message when trying to login with a nonexistent user account is very unclear.