UX/UI DESIGN - RESPONSIVE DESIGN 

KFC Digital→ Enhanced the login process for KFC Rewards members

Project Overview

This project aimed to improve the login experience for kfc.com and the KFC app. User pain points were identified, and key features were explored and implemented to ensure an enhanced login experience.

Identify The Problem
The login experience has several significant issues, with the magic link functionality being a primary pain point. This feature consistently received negative feedback from both our internal team and users. Many customers went out of their way to leave app reviews expressing their frustration. The persistent dissatisfaction with the login flow highlighted the critical need for UX improvement.

At The Start Of This Project...

Project Discovery
Meeting with project managers, product owners, marketing, designs, and others we identified the project's business goals, expressed user pain points, and ideated on potential solutions. We also spoke with developers to understand technical limitations that may influence our solutions. The purpose of this meeting was to gain a clear understanding of the problem we are addressing and to establish expectations for our solution. This kickoff meeting was essential for ensuring the team was aligned and the project was set up for success.

Identify The Problem
In the kickoff meeting, we were able to identify several issues with the login experience. The primary point was related to the magic link authentication functionality. This feature consistently received negative feedback from both our internal team and users. Many customers went out of their way to leave app reviews expressing their frustration. The persistent dissatisfaction with the login flow highlighted the critical need for UX improvement.

Research & Data 
To gain a better understanding of the problem, I conducted additional research. Our data revealed a high failure rate associated with magic link authentication and that users were abandoning the login flow at this stage. A competitive analysis was performed on competitor login flows to identify market fundamental principles, techniques, and patterns that could be integrated into our login flow. This ensured that our new solution would meet and exceed user expectations.

User Journey
A user journey diagram was created to map out the screens for the login and sign-up flows. This strategic approach helped us understand the complete user journey for new and returning users, allowing us to better structure and group the content for the overall login experience.

Designing & Prototyping

Wireframing & Prototyping 
Through rapid wireframing and prototyping and presenting the designs to our internal team for feedback, we were able to iterate and determine the key features we wanted to implement into the login experience for this release.

ADA Compliance 
I pay close attention to accessibility practices in my design process. I am committed to designing solutions that are intuitive and have a high accessibility compliance rating.

Testing, Feedback, & Validation
In my design process, I created multiple design options to find the best solution. We had weekly reviews with the UX team and project stakeholders to assess our progress and determine the preferred designs. Feedback received was incorporated into the next iteration of the design to ensure that the work moves closer to approval for future review.

Implementation and Handoff 

As a design gets closer to a final and approved state, there are several tasks to pursue to ensure a smooth delivery and design handoff for development.

Responsive Design
The login and sign-up experience has been redesigned to be fully responsive, focusing on usability, accessibility, and user satisfaction across web screens and mobile devices. Wireframes of the flow were made for App mobile and Web desktop, tablet, and mobile. 

Cross-Team Communication
Cross-team communication was crucial to the success of this project. We touched base with the development team to ensure our designs did not create technical constraints. The design team provided regular feedback, ensuring that best practices within the design system were met. Marketing's input was asked to help refine copy and voice. Legal approval and confirmation were obtained to ensure compliance. All of this ensured that the project could roll out smoothly across teams.

UX Annotations
I dedicate time and attention to writing clear and informative UX annotations to ensure developers understand the designs and intended functionality. The detailed annotations provide content and clarity towards my design decisions and call out key interactions that help bridge the gap between design and development to ensure a smooth implementation process.

Key Features Implemented

These were the key features implemented in the final solution for the login and sign-up flow.

1 - Password-Free
We introduced a password-free system to simplify the login process. Users no longer need to input a password, reducing the effort required to log in.

2 - Unified Login and Sign-Up Screen
We merged the login and sign-up screens into a single interface. Both returning and new users can enter their email addresses on the same screen, eliminating the need to navigate to different pages for login and sign-up. This also reduces the development effort.

3 - OTP Authentication
We replaced the problematic magic link feature with a more reliable and favorable One-Time Password OTP system. Users receive an OTP in their email inbox, which they can enter into the app, providing a quick, easy, and secure login experience.

4 - Login Experience Inside a Modal
After several design iterations, we put the login experience inside a modal. This approach ensures users remain connected to the core experience. After logging in, users can quickly and seamlessly return to their previous tasks.

5 - Progressive Sign-Up Flow
First-time users are guided through a multi-step sign-up process with a stepper indicating their progress. This approach breaks down the information required into manageable steps, making it easier for users to complete the sign-up process without feeling overwhelmed.

6 - Inline Validation
Inline validation has been implemented throughout the login flow to encourage correct input and reduce sign-up or login abandonment. This feature provides feedback on form fields, helping users correct errors quickly.

Project Impact

The efforts to enhance the login and sign-up process have led to a smoother and more user-friendly login experience, encouraging users to authenticate without interrupting them from the core experience. 

→ mjberg.com@gmail.com
→  LinkedIn 
→  View Web Services

Matt Julius Rosenberg

→ A Digital Consultant and Product Designer based in New York.

Matthew Julius Rosenberg  @2023