Login page UI

At Cappfinity I been identifying and improving our core features. When dealing with a vast range of products, designing optimal journeys has helped remove friction and reduce steps for our users.

As part of our single sign-on epic, I have worked on sign up pages, email notifications, and app switchers. Here are some examples of our login page that is now shared between all of our products. 

Design improvements

Password rules

Previously the password rules were taking up a lot of space and you were relying on colour to know which ones were missing. Now, the instructions are only visible when entering an incorrect password, and the use of icons supports the information.
 

Branding
The latest design reflects Cappfinity’s recent rebrand. The new login page also accommodates a series of interchangeable product logos, such as the "Cappfinity Screener" as seen in the examples.
 

UX
To improve the flow, I have introduced a hierarchy in the buttons so that they are easier to distinguish.
 

Accessibility
The colour contrast in the text, notifications, and buttons has been amended to respect the WCAG guidelines.

The responsiveness has been improved to work seamlessly on tablet and mobile, without compromising the design.

Before

After

© 2020 by Virginia de Colombani