Sportsnet connects fans to their favourite sports events and news through TV, Radio, Website, and Mobile. At the time of writing, the Sportsnet.ca website boasts upwards of 4.5 million monthly unique users.
PROBLEM SPACE
A leftover from the early 2010s, the existing login flow was dated and difficult to use. As a first step to adding personalized content, fantasy sports, and speculative plans for sports betting, I was asked to design a new login flow in addition to a new account settings panel.
OBJECTIVES
The user will be able to follow a simple, elegant flow to log in or sign up using their email or social credentials.
The interface should funnel users towards google and facebook logins while deprioritizing yahoo and twitter (due to low usage).
The new flow should also reduce friction by eliminating or making optional previously mandatory fields like gender and password confirmation fields.
The design should be designed for mobile first.
The existing login.
Research
Given that login flows are commonplace, we surveyed the landscape of websites that we admired and collected solutions based elegance, speed, ease of use, and alignment with our user demographic. Two main login/signup designs were identified, embodied by two widely used websites (Twitch and Amazon). We took the same approach with social login designs.
Wireframing, Exploration
Through whiteboarding and wireframing, an assortment of solutions were explored:
Forked user flow for Sign In / Sign Up (i.e. Amazon)
Tabbed options for Sign In / Sign Up (i.e. Twitch)
Twitter/Yahoo social logins deprioritized through smaller button sizes
Twitter/Yahoo social logins deprioritized via text links
Tweak/remove value proposition
Wireframes showing the login flow.
Solutions
Through multiple rounds of testing, feedback, and from technical limitations that were discovered throughout this process, we arrived at some solutions:
Tabbed options for Sign In / Sign Up (i.e. Twitch)
Twitter/Yahoo social logins deprioritized via text links
Value proposition included to encourage users to sign up
A modular form design that easily transitions between desktop and mobile
