Login and Create Account Flow
Summary
Redesign the create account and login pages across desktop, tablet, mobile web, and iOS/Android apps to improve user experience, align with modern design trends, and enhance conversion rates.
Outcomes:
Increased Account Creations: A remarkable 394% year-over-year increase for the period from August 10 to December 31.
Overall Conversions: Continued improvement with a 294% increase year-over-year.
Meet the Team
Product Manager
Designer (myself)
UX Researcher
Front-End Developer
Back End Developer
QA Specialist
Initial Challenges and Goals
Our original goal was straightforward: update the existing designs to align more closely with our current branding, remove some outdated elements like the Amazon login option, and put a stronger emphasis on upselling our GolfPass memberships. We aimed for a subtle refresh rather than a complete overhaul.
Original GolfNow Login
DESIGN PROCESS
DESIGN PROCESS
Iteration 1
For this project, we started by mapping out the login and create account flows in the context of both tee time reservation and non-reservation user journeys.
We began by creating a detailed flow chart to understand the distinct user behaviors and interaction patterns. During the tee time reservation flow, the focus was on providing a seamless and fast experience, as users typically wanted to quickly log in or create an account to complete their booking. We emphasized reducing friction points by allowing guest checkout options while still encouraging account creation with value propositions.
In contrast, the non-reservation flow was more relaxed, enabling users to create accounts for long-term benefits. This flow had a more flexible approach, focusing on engaging users over time rather than urgency. The forgot password flow was also mapped out in detail, as it became a common friction point.
The holistic design approach ensured that all pathways aligned with user expectations, with particular attention to reducing friction, improving usability, and maintaining visual and functional consistency across all platforms.
First Launch on January 31st
In this redesign, one of our main goals was to retain the familiar three-column layout that stakeholders were attached to, as it was a format that users were accustomed to.
While working through the design, we realized that there was not much dedicated to showcasing GolfPass perks, but this was a primary business focus. So we focused on integrating the membership benefits in a prominent, yet persuasive way.
One of the more nuanced aspects of the redesign was the use of color. We strategically increased the use of navy, leveraging the psychological associations of blue with trust, security, and sophistication. This was important because, as users were creating accounts or entering their credentials, we wanted them to feel confident that their data was secure and the process was reliable. The deeper shades of blue also provided a clean, professional aesthetic that balanced the energy of the promotional elements with the calming trust cues for core functionality.
Outcomes:
Increased Account Creations: 196% year-over-year increase for the period from January 31 to August 9.
Overall Conversions: Improved by 294% year-over-year.
Despite these positive metrics, feedback from one of the Senior Vice Presidents in early May was critical, expressing concerns that the new design still didn’t convey a modern enough aesthetic.
Click here to check out the prototype for the first iteration.
First Iteration GolfNow Login
Pivot & Redesign
Mid May
To simplify the overall process, we decided to combine the login and create account options into a single, more streamlined flow. Instead of having two distinct columns—one for logging in and one for creating an account—we leveraged updated technology to auto-detect whether the email a user entered was associated with an existing account. This meant that after the user entered their email, the fields would dynamically adjust based on whether they had an account. If an account was found, the field would prompt them to "Enter Password." If no account was found, it would prompt them to "Create a Password." This adjustment allowed us to clean up the design and focus on simplicity while still offering the same functionality.
By simplifying the login and account creation process, we were able to open up more space on the screen for highlighting GolfPass membership benefits. This ensured that while the primary function (logging in or creating an account) remained easy and intuitive, the secondary focus on GolfPass perks was seamlessly integrated without feeling intrusive.
Design Strategy:
Login Modal: For the desktop experience, we introduced a right-side login modal. This allowed users to keep the context of the current page visible in the background, offering a less disruptive and more fluid interaction. Users could log in or create an account without feeling like they were being removed from their main task, particularly important during the tee time reservation process.
Mobile and Tablet Adjustments: On mobile and tablet devices, we ensured that the layout was optimized for smaller screens, maintaining consistency and usability across all platforms. The dynamic email detection feature worked seamlessly on mobile as well, streamlining the login process in a space-conscious, user-friendly way.
User Testing
Participant Feedback:
First Launched Design: While participants found the process mostly intuitive, some were confused by the size difference between the "Create Account" and "Log In" sections.
New Second Design: Users appreciated the cleaner design, clear call-to-action buttons, and efficient booking process, although a few mentioned minor issues with font size.
June
First Iteration GolfNow Login
Second Iteration GolfNow Login
Data Comparison: First Iteration vs. Second Iteration
After we finalized the updated design, we put both the first iteration and the new second iteration through rigorous testing. Users went through click tests, navigating the login and account creation flows to see if they could complete the process without any issues. At the end, they answered a set of questions evaluating ease of use, attractiveness, and overall satisfaction with the flow. This allowed us to gather actionable insights to improve the experience further.
Success Rate:
First Launched Design: 87% success rate.
New Second Design: Improved to 93%, with fewer errors (7% vs. 13%).
Task Completion Time:
First Launched Design: 1 minute and 54 seconds (mean time).
New Second Design: Sharply reduced to 1 minute and 1 second.
Task Difficulty Rating:
First Launched Design: 6.47 (on a 7-point scale).
New Second Design: Higher ease rating of 6.87, with participants describing the new design as clearer and more intuitive.
These results highlighted the success of our refinements, showing that the new design not only improved efficiency but also provided a more user-friendly and attractive experience. The streamlined look, focus on essential functions, and unobtrusive GolfPass upsell contributed to a smoother, faster, and more satisfying interaction.
Iteration 2
Second Launch on August 10th
After refining our designs based on user testing and feedback, we relaunched the updated flows on August 10. This version embraced a more contemporary aesthetic and enhanced user experience.
Outcomes:
Increased Account Creations: A remarkable 394% year-over-year increase for the period from August 10 to December 31.
Overall Conversions: Continued improvement with a 294% increase year-over-year.
Check it out live on GolfNow.com!
Second Iteration GolfNow Login
Key Takeaways
Key Takeaways
Embrace Feedback: Initial criticism from stakeholders, while challenging, provided a valuable opportunity to reassess and improve our approach.
User-Centric Design: Rigorous user testing and competitor analysis were crucial in developing a design that met modern standards and user expectations.
Continuous Improvement: Iterating on designs and being open to significant changes can lead to substantial gains in user engagement and conversion rates.
Conclusion
The project demonstrated the importance of balancing stakeholder feedback with user research. By pivoting to a fresh, modern design, we not only met but exceeded our goals, showcasing how iterative design and adaptability can drive substantial improvements in user experience and business metrics.