Login Page

For ETQ, part of Hexagon

Tools Used

Figma

This project was undertaken at a former employer - ETQ, part of Hexagon. Any brand names/product names mentioned are property of said company. I am sharing this work for portfolio purposes only.

Problem Background

The product I am working on here is called ETQ Reliance, a quality management software used in a wide variety of industries.

Problem Statement

The goal here is to redesign the login page of the ETQ Reliance product.

Team

My role in this project was UX designer. On the product side, I worked with the Director of Product and collaborated with another UX designer initially. On the engineering side, I discussed technical specifications with our Dev Lead and his team of about 5-8 front-end developers, as well as several QA specialists.

Prototype

Design Process

Ideation

Initial Designs

Phase 2: Comparative Research

Ideation

Final Designs

Prototype

The other designer and I brainstormed as many options as we could think of for a new login page. At this stage, we were tasked with only a visual redesign, not any functional redesign/additions.

On the left are the existing screens, and on the right are the initial redesigns.

Forgot password page:

Notification of password reset email:

Password reset flow:

Caps Lock on notification:

Invalid username/password notification:

The project was paused and reevaluated. The UX team conducted comparative research by surveying existing login pages and looking for common patterns that might work well for our product.

My second round of ideation sketches.

A few screens from my final designs.

Static login page:

Forgot password page:

CapsLock on notification:

Flow of the user logging into the system:

Flow of the user resetting their password:

< Previous

Next >