🐞 Login Bug Fix

Overview

While supporting Business.NJ.gov, a bug was found in the production site.

  • My Role: Product designer
  • My Responsibilities: I led the design solution and worked with engineers to understand constraints. While also communicating and aligning ideas with the product manager and stakeholders.
  • Timeline: 2 weeks or one full sprint cycle.
  • The Team: 1 product manager, 1 scrum master, 1 content designer, 2 product designers, and 3 engineers. This was a sub-team of the main Business.NJ.gov project.
  • Tools Used: Figma, Figjam, Mural, Azure DevOp

Framing the Challenge

Problem

When trying to log in, the user saw the loading screen flicker and get stuck. This bug affected about 70% of users who had accounts.

Pain point #1

Users could not access their information, which led to anger and anxiety.

Pain point #2

Users think their username and password are incorrect when they are not, leading to confusion and frustration.

Pain point #3

Increased the team's help desk requests, reducing engineering availability for other work.

Hypothesis

Fixing the login bug will lead to a better user experience and may also increase the likelihood of completing onboarding and/or continuing to use the site as an up-and-running business.

Goal

Design a new login flow that resolves the bug, works within current engineering constraints, and is quick to put in place.

Process & Approach

See the Sprint process below:

A flow chart showing the two-week sprint process for designing a feature ticket.

Key contributions

  • Supported the facilitation of the discovery meetings. Personally drafting flow diagrams on the virtual whiteboard, live, during the meeting. This ensured the entire team could brainstorm and contribute ideas.
  • Presented various design solutions to stakeholders and the team. Facilitated discussions and questions, created alignment, and aligned designs to ensure incremental delivery.
  • Created and launched an unmoderated A/B test to get user feedback on the favorite solutions. Allowing us to use quantifiable and qualitative data to inform the final design.
  • Worked in a SAFe Agile environment, working within sprints, a rigid scope, and testing requirements.

Discovery

  • Engineering discovered that the bug resulted from how data was being saved and various page redirects. 
  • After discussing the findings, it was decided that the solution needed to align with the current data structure. This would ease development pressure and ensure a rapid fix.

Design

  • Designed multiple wireframes, interactive prototypes, and user flows. Considering all the discovery discussions while applying best design practices and standards.
  • Partnered with the content designer to add and test production-ready copy.
  • Facilitated 2 design critiques, sharing multiple solutions with stakeholders and the cross-functional team.
    • Working through design questions and interaction patterns. Negotiate the breakdown of new features into iterative pieces while also ensuring the best user experience.
    • Discuss engineering limitations and always ensure clear next steps before leaving the meeting.
    • Transfer takeaways and next steps into Azure DevOps to ensure a single source of truth
  • Created and launched an unmoderated A/B test to get user feedback on the favorite solutions. Gathering both quantifiable and qualitative data to inform the final design.

Final Solution

A new page that checks the email addresses to see if they are in the database.

  • If the email is in the database, they go to the next step.
  • If the email is not in the database, the copy funnels the user toward the correct path. For example, check the spelling of the email entered, sign up instead, or chat with support.
Final desktop mockup for new login screen
Final mobile mockup for new login screen. Showing an error state.
Flow chart of the new log in path.

Implementation

  • Participated in agile ceremonies, supporting the product manager and engineers in creating acceptance criteria. Ensuring design and engineering align at every step.
  • Design reviewer in the quality assurance and testing process. Focusing on visual accuracy and accessibility across devices.

Challenges & Solutions

When trying to log in, the user sees the loading screen flicker and gets stuck in a loading state. This bug affected about 70% of users who had accounts.

Challenge #1

There are many touchpoints where a user can access the login page. This, along with the engineering limitations, made solving tricky.

Solution #1

Be thoughtful and strategic - Consider all the use cases, interactions, and outliers. Consider the engineering constraints. Consider all the iterative options. Only after that did I start designing solutions.

Challenge #2

A new page was created, so the design system was out of date.

Solution #2

Created a new Figma component by working within the ticket scope and processes, ensuring the page could be utilized by all designers

Challenge #3

The bug affected the majority of our users, so the solution needed to be quick. Leaving little time for research and validating the solutions with users.

Solution #3

Lean on common mental models and standard login patterns.  Anticipating that users would be familiar with the solution from other sites.

Perform an unmoderated user test, resulting in feedback from users in less than 24 hours. Compared to traditional user testing, which would take days/weeks to coordinate and schedule.

Outcomes

Deliverables

  1. User flows
  2. Multiple wireframes versions
  3. Virtual whiteboards from the critique
  4. Research readout on usability findings
  5. New design system component

Results & Future

With the release of this fix, there was a significant decrease in help desk requests and a decrease in login page drop-off. In the future, the goal is to strengthen the backend data management to automatically authenticate login details, similar to other sites.

Key Takeaways & Learnings

User Experience Directly Impacts Business Operations

The issue not only frustrated users but also increased support requests. Fixing usability problems can improve both customer satisfaction and internal workflows.

Collaboration is Key

Cross-functional team members worked together to ensure the fix was technically feasible and user-friendly. Regular communication and alignment kept the feature moving.

Prioritizing Speed While Maintaining Quality

Due to the urgency of the fix, leveraging common UX patterns and conducting rapid A/B testing helped validate the solution quickly. Securing a timely release without sacrificing usability.

Working Within Constraints Requires Creativity

Engineering limitations and many access points to login required thoughtful design solutions. Breaking down the problem into smaller, iterative improvements helped balance feasibility and effectiveness.

Clear Documentation and Processes Ensure Long-Term Success

Documenting findings, next steps, and acceptance criteria provided a single source of truth for the team, keeping the team aligned.

Design Systems Need to Be Maintained

By embedding the maintenance of design systems into the processes, you never have design debt. Keeping components up-to-date supports scalability and consistency across the platform and designers.