top of page

Login Page

For ETQ, part of Hexagon

Tools Used


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.


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. 


Design Process


Initial Designs

Phase 2: Comparative Research


Final Designs


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.

Login page itself:


Forgot password page:

forgot pw.png

Notification of password reset email:

forgot pw email sent.PNG

Password reset flow:

Caps Lock on notification:

caps lock.PNG

Invalid username/password notification:

incorrect user or pw.PNG

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:

Login Page - landing.png

Forgot password page:

CapsLock on notification:

Flow of the user logging into the system:

Flow of the user resetting their password:

bottom of page