Login

Introduction

Project Brief

This software had a simple login page with incorrect user/password alert messaging, but without the ability to register a new user or toggle a forgot password email. For compliance reasons, the login page needed to be updated.

Requirements

  • New user registration
  • Password reset
  • User account lock after failed attempts
  • Alert messaging
  • Responsive

Tools

  • FlowMapp
  • Photoshop
  • Adobe XD
  • VS Code

Design

Existing Login

The existing page was a simple login page with no ability to register a new user, reset password, and no lockout security.

Existing Login

User Workflow

Taking into account the project requirements, I created a user workflow using FlowMapp to visualize the UX and potential workflow outcomes.

Login Page User Workflow

Login Color Palette

I wanted to update the colors to draw attention to the login screen and alert messaging. The existing login page used a white on white design with border around the login page, which did provide enough definition. I used existing colors from the company’s style guide, while supplementing it with shades of gray where necessary.

Alert Messaging Color Palette

The company used Bootstrap throughout the software, so I relied on the Bootstrap alert messaging styles to maintain consistency.

High Fidelity Mockups

I created the high fidelity mockups with interaction prototyping in Adobe XD. For this particular project, I also created static HTML/CSS pages so that development could copy/past the specs with minimal barriers between my design and their implementation.

Login - Device Display

Login Page

  • Login
  • Login - User Not recognized
  • Login - Lockout Warning
  • Login - Locked User

New User Registration

  • New User Registration
  • New Username Taken
  • New User Email Taken
  • New User Request Message

Password Reset

  • Password Reset Email Address
  • Password Reset Email Invalid
  • Password Email Message
  • Password Reset
  • Password Success