Sign in / Login Flow @ LINE TV

User login mistakes have been a persistent issue. Despite previous efforts to optimize this problem, recent statistics from customer support reports reveal that we still receive a minimum of 6+ cases of login errors per week, equating to almost one user per day.

Notably, 80% of these cases are reported by "VIP paying users" who discover the issue when they can't access videos. Ordinary users may not even notice, implying that the actual number of users making login errors each week could be significantly higher than the reported data.

Existing Process Issues:

Solving the Issue of Users Logging in with the Wrong Account

Project Constraints:

Many third-party account registrations no longer provide access to user email addresses, making it impossible to determine whether different accounts are associated with the same user based on email. Therefore, the primary approach is to improve the process and display judgment mechanisms in the UI to help users identify their accounts when logging in.

Flowchart、UI Flow、Wireframe、Mockup、Prototype

User login with the wrong account has been a longstanding issue. We previously attempted to address this problem by splitting the interface design into "First-time Login" and "Subsequent Login."

We implemented this solution by recording data locally. However, even with these optimizations in place, we found that the problem remained unresolved, especially in cases involving users logging in across multiple devices. Therefore, we decided to focus on improving the entire process to tackle this issue.

We've identified problematic areas in the existing process and highlighted them. While designing the new process, we paid particular attention to these issues. We've come up with a new process specifically targeting this problem. We then used flowcharts to thoroughly review the process to check for any issues or missing screens and steps. The new process primarily involves separating the login and registration processes more clearly.

We followed the flowchart to navigate the process using wireframes. We compared the wireframes with the flowchart to ensure that the process was rational and without any issues. We then brought these wireframes to the Project Scope Meeting to discuss and confirm the process with the Project Manager and engineers. This collaborative approach helps ensure that everyone is aligned on the process and screen designs.

It's always a challenge to decide between "expanding the registration page" and "unifying with an additional layer for registration and login screens." Each approach has its pros and cons.

Expanding one of the login or registration pages can reduce one click for some users, but it may introduce the concern that the switch to the login option is not clear and may not be easily discovered. Furthermore, it requires a decision on whether to expand the registration or login page.

Considering the many new users each week, we also need to account for cross-device users and users who have been logged out. Additionally, the user demographics have been shifting towards older age groups since the merger with LINE TV. Based on these factors, we decided to go with a more conservative and user-friendly UI on the right side. This choice prioritizes user clarity and simplicity, which can benefit users of all ages and backgrounds.

Considering the abundance of illustrations in this project, the alignment of elements was a critical aspect. The engineering team inquired about the alignment before implementing the designs. This prompted us to give special attention to the alignment rules for each screen.

Since this was a cross-platform project, defining these alignment rules was crucial. Without clear rules, we might have encountered issues with screen layout on larger devices or web platforms, resulting in excessive blank spaces or elements running off the screen. By establishing alignment rules, we ensured that the design would translate well across various platforms and devices.

During the launch meeting, the Data Team introduced a requirement to provide a UI Flow. This UI Flow would serve multiple purposes, such as helping the Data Team understand the project's workflow, defining tracking screens and items for their analysis, and aiding engineers in verifying the screen flow. This UI Flow can be a valuable asset to streamline communication and ensure alignment among different teams involved in the project.

Using prototypes to confirm how each screen transitions and to make design decisions is a valuable approach. Prototypes can offer a more interactive and practical representation of your design ideas, making it easier to visualize the user experience and iron out any issues in the workflow. This can significantly contribute to the overall success of the project and help in creating a seamless and user-friendly interface.

Design outputs include iOS, Android smartphones and tablets, PC/Mobile Web.