Yggio Login Page

A redesigned login experience focused on clarity, usability, and consistency

This project began with cross-team collaboration to uncover user needs and system requirements, followed by an iterative design process leading to the final prototype.

My Role

Intern and solo designer at Sensative

Tools

Figma

Duration

Aug 2020

Understanding the User

The first step of this project was to talk to the project managers and the IT team to understand the requirements for the login page and to also get a clear understanding of the main issues that the users might have encountered. After gathering this information, we analyzed the previous Login pages that were used and highlighted the positive and negative parts, the image below illustrates this part of the process.

Comparison of two login screens: on the left, a grayscale login form with a blue 'Log In' button; on the right, a colorful login form with a green 'Log In' button and 'Create an account' option below.

Generating Style Alternatives

Sketching was a substantial part of this project both digitally and on paper. Below you will find different design alternatives.

Desktop Alternatives

Login screen for Yggio with username and password fields, a 'Forgot password?' link, a green 'Log in' button, and a 'Create an account' button.
Login page for Yggio website with signup form, logo of a tree, and a background of a network of connected dots.
Login page for Yggio website with a graphic of a green tree logo, fields for username and password, and buttons for logging in and creating a new account.

Mobile Alternatives

YGGIO login webpage with fields for username and password, a 'Log in' button, and options to reset password or create a new account.
Login screen for Yggio app with a green background, logo featuring a tree, fields for username and password, and options to log in or create an account.
Yggio login page featuring a green header with a tree logo, sign-in fields for username and password, and options to log in or create an account.

Final Prototype

By discussing the pros and cons of each option with my colleagues, we decide which designs were the best for this case, some final changes were also made before making the final prototype. We analyzed what should be changed before making the final prototype by simulating the function of each button on Figma. Below you’ll find the images for the final prototype for mobile and desktop.

Login screen for YGGIO web application with logo, welcome message, and sign-in form on a teal background.
Smartphone displaying the YGGIO app login screen with fields for username and password, a 'Log in' button, and options to create an account or recover a forgotten password.