Company

Lili

Year

2022

My role

Lead Designer
Prototype

Platform

Mobile app

Overview

The redesign of the Lili login screen addressed issues brought to light through user interviews and app store feedback. Our goal was to enhance the user experience and update the visual design of the user interface.

About Lili

Lili is a B2C company that helps Freelancers and small businesses grow their business by providing tools and services designed to save them time and money, while helping them stay focused on their day to day work and business goals.

Opportunity

Enhancing my super powers the user experience and elevating the visual design of our user interface to
the next level

My perspective

My primary objective was to enhance the experience for our users when logging into our app.
This included aligning with industry standards, simplifying the design, and improving the visual design of the login screen to match the overall aesthetic of our app.
Furthermore, I aimed to simplify and streamline the process of resetting passwords and recovering email addresses, which were previously too complex, lengthy, and unclear, and sometimes could not be resolved within the app, resulting in users having to contact customer support. This led to frustration for users and added workload for our customer support team.
To achieve this, I conducted research which included analyzing competitors and conducting user interviews.

The final design

Forgot Password

The new 'Forgot Password' screen features a redesigned user interface and improved user experience, including the added option to change phone number within the app without the need to contact customer support.

Verification Code

This feature requires users to enter a verification code sent to their registered email or phone number before resetting  their password, providing an extra layer of security to protect against unauthorized access.

4 Digits of SSN

This step in the 'Forgot Password' flow is the second (Out of three) layers of security to protect against unauthorized access.

Invalid Phone Number

The user will see this error message if an invalid phone number is entered.

Last 4 Lili Card Digits

The third and final Security layer to protect against unauthorized access.

New Phone Number

After successfully completing our three-layer security process, the user can now change their phone number.

Success! New Number

After changing their phone number, users will see a confirmation modal indicating that the number was changed successfully.

Phone Number Error

This error message will appear if the phone number entered is invalid or there is a problem with it.

Login Error

This error message will appear if the entered login details are incorrect.

Let's Take Five

This error message will appear if the user repeatedly enters incorrect login details.

Change Phone Number

This 'Change Phone Number' option is new, allowing users to update their phone number within the app, instead of having to call customer support as it was required before the redesign and the UX improvements.

Login

The new design of Lili's login screen features a refreshed user interface that seamlessly blends with the overall aesthetic
of the app.
The user experience has been improved to meet industry standards.

Password Reseted

After resetting their password, users will see a confirmation modal indicating that the password reset was successful.

Enter Your Email

The second step in the 'Change Phone Number' Flow

Password Reset Error

This error message will appear if the user did not complete all of the required steps in the password recovery process.

Sign Up Error

This error message will appear if the user did not complete all of the required steps in the signup process.

Last 4 Lili Card Digits

The third and final Security layer to protect against unauthorized access.

Pick a New Password

After successfully completing our three-layer security process, the user can now reset their password for their Lili account.

Virtual Phone Number

This error message will appear if the user enters an unsupported virtual phone number.

6 Digit Code

This step in the 'Change Phone Number' flow is the second (Out of three) layers of security to protect against unauthorized access.

Next Steps

The project is currently under development.