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.
User Workflow
Taking into account the project requirements, I created a user workflow using FlowMapp to visualize the UX and potential workflow outcomes.
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.
