client
Indiana University
role
Product designer
Let’s get in touch!
Context
- IU has applicants from around the world 🌎 that rely on guest accounts to apply for admission
- Guest accounts also support a wide range of educational 📚 programs and services
- Before I was assigned to the project, a vended solution had already been in a pilot 🛫 phase
- The stakeholder 🤝 with the largest user base wanted social login options
Contributions
- Defining and executing the UX research methodologies
- Exploring account and social login best practices
- Examining account management features, including account linking
- Implementing pixel-perfect frontend solution that meets accessibility standards; testing performance and functionality
- Collaborating with university-wide stakeholders to transition to the new service
- Creating documentation for developers, support, and end users
Goals
- Seamless creation processes for email- and social-based accounts
- Streamlined IU branding and utilization of new design system
- Improved account management features, including account linking
- Forward-looking adoption of social login providers
- Strategic alignment with account lifecycle vision
Process
Discover
Perform extensive review of existing application, conduct product research, and create user experience artifacts.
customer feedback
interviews
Data analysis
personas
scenarios
Ideate
Mock up initial designs within vendor constraints and perform usability testing.
UI design
testing
Refine
Present usability findings to vendor, identify product pain points, and create entirely new product.
vendor feedback
Product research
UI design
process design
Implement
Determine all application flows, develop user interfaces, test application performance and functionality, update existing documentation, and collaborate with partners throughout the university to release.
figma
JavaScript
html/css
accessibility
copy writing
functional testing
documentation
Existing application review
Methods
Task analysis
Assessed existing application workflows for creating an account, logging in, and managing name, email, and password.
Customer reviews
Read through and collated application reviews to uncover user pain points.
Stakeholder interviews
Gathered feedback from admissions and support representatives.
Data analysis
Totaled existing user email addresses by domain (i.e., Google, Yahoo, etc.) for the pilot application to provide insight into most popular social services.
1-star reviews for existing guest application
Insights
- Users come from dozens of applications to create an account
- Existing password requirements are complex and burdensome
- Instructions were sometimes needed to complete account setup
- Encountering error messages is both common and frustrating
- The password reset process included copying and entering codes
- Users create more than one account and can't link them
Product research
Methods
Market research
Collected social login statistics for adoption and usage and compare with traditional email registration.
Competitive analysis
Identified strengths/weaknesses of account creation processes at companies with reputable design that support social login.
Task analysis
Assessed vendor application workflows for creating an account, logging in, and managing name, email, and password.
Vendor interviews
Gained insider perspective from vendor's Director of Customer Success regarding social login metrics, best practices, adoption techniques, and user workflows.
Lengthy vendor login screen from task analysis
Insights
- 45% of people create multiple accounts because of forgotten credentials (link)
- All companies researched offered no more than three social login options
- Even for accounts with social login, an email verification process was required
- 85% of social logins powered by Google, according to vendor; 61% by Facebook, according to competitor (link)
Personas & scenarios
Two personas that influenced our understanding and gained our sympathy
Methods
Based on the stakeholder interviews, two personas were created, each with an associated scenario. These provided biographical and device information as well as context and motivation.
These artifacts were referred to throughout the Discovery, Ideate, and Refine processes. Due to the many competing priorities, it was vital for the development team to empathize with the users when cutting features would have alleviated many of the pressures they faced.
Insights
- The scenarios provided helpful contextual clues to explore the account creation process for social login users
- Empathizing with and understanding the users' motivations and constraints in creating an account guided not only how many social login options to offer but also which providers
Build prototype with vendor solution
Since I was initially tasked with working within a vended solution, only the bookends of the user journey were within my design sphere. Aside from plain-text copy in email communications, most everything else within the vended product was pre-determined. The focus, then, was on preparing users before they went off to the vendor's product.
Clunky user experience with vended solution
Prototype usability testing
Method
In-person testing
- 5 participants
- Ages 18-55
- 20-45 minute sessions
- 15 follow-up questions
User scenarios
- Create account (email address or social account)
- Log in with account after creation
- Log in with account from application
Test goals
- Uncover the challenges and pain points of the vendor solution
- Understand attitudes toward login types (email vs. social) and providers
Usability Test Results
Generic account insights
- If users were unsure of what to do next, they went back to the most recent site or email to find their way forward
- Users wanted to go to the login page from the confirmation email
- While some users enjoyed the sliding buttons, others could not find them
- Google was the preferred social provider by all five participants
- If users were unsure of what to do next, they went back to the most recent site or email to find their way forward
Vendor-specific insights
- Users spent around 15 seconds before clicking the vendor's Create Account button
- Users had difficulty both finding and meeting vendor password requirements
- Users did not know where to go or what to do after creating their account
- On a scale of 1 (low) to 10 (high), the process of creating an account with social login received an average rating of 9.5 while that of traditional email received a 5
- Users spent around 15 seconds before clicking the vendor's Create Account button
Provide vendor feedback
Based on the difficulties experienced during the usability tests, I shared my findings with the vendor. They were both impressed that testing was done on their product and surprised by the results.
Recommendations
- Land users creating accounts on creation form instead of login page
- Provide real-time feedback to indicate if the password being entered meets requirements
- Provide Log in button when account creation process has been completed
- Improve email communications by offering links to application and rich text editing capabilities
After taking stock of their priorities, the vendor reached the conclusion that these improvements were unlikely to be implemented in a timely fashion and/or would require a significant amount of development. This resulted in our team reviewing the usability test findings, reassessing our goals, and, ultimately, deciding to build our own solution. With stakeholder and Associate Vice President approval, we charted a new path forward that ensured our users would be well-served with the redesigned product.
After reviewing the usability test findings and reflecting on our goals, we ultimately decided to build our own solution.
Apply usability test findings
Completely redesign product
- Easing password requirements
- Automating the linking of a new account to an existing one
- Providing the ability to have one account with multiple login options
- Offering a login CTA after creating an account
- Creating easy-to-scan, informative emails with links to manage the account
- Simplifying reset password process
- Ensuring user tasks were as efficient as possible
- Easing password requirements
Carefully choose social providers
- The pilot service offered four different service providers: Facebook, Google, Microsoft, and Yahoo. In addition to these, LinkedIn and Instagram were also supported by the vendor.
- After reviewing the market research, usability feedback, and vendor metrics, Google was the clear leader with Facebook in a strong second position. Jim's scenario, although written for a Facebook login, helped us recognize the importance of supporting credentials from other employers. Thus, Microsoft would best support these users.
- The pilot service offered four different service providers: Facebook, Google, Microsoft, and Yahoo. In addition to these, LinkedIn and Instagram were also supported by the vendor.
Preliminary account creation flows
Link to preliminary account creation flows in FigmaProcess
Design
Designed user flows for account creation and account management.
Applied IU design system while creating specialized user interface elements for desktop and mobile view ports.
figma
design system
process design
Code
Applied design to frontend code, writing all HTML and implementing design system and creating custom CSS and JavaScript.
html/css
javascript
design system
Test
Created dozens of scenarios, tested to discover bugs, and explained the issues and solutions to the backend developers.
test scenarios
Functional testing
Document
Wrote all documentation for developers, support, and users.
documentation
Build prototype with vendor solution
After having collected feedback from users and the various service owners who support the application, the necessary improvements and new features were very apparent. I worked with the policy and security offices to significantly reduce the password requirements, outlined the requirements for automated account linking, developed robust communications based on the users' various needs, and simplified all of the unnecessarily burdensome tasks. Overall, the redesigned touch every aspect to improve the experience for our guests.
Account management flows
Link to account management flows in FigmaReflection
At the very outset of the project, I was excited to offer social logins as a quick and convenient alternative to email-based accounts. However, moving all of our services into a vended solution—and one that users found even more challenging in some ways than the existing application—seemed like taking two steps forward and one step back. But the turning point of the entire redesign was the realization of just how poor of an experience the vended solution provided.
Of all the thoughtful consideration that went into this endeavor, it was the usability testing that was more impactful than any other research or analysis.
In the end, this project surprised me in all kinds of ways—from the easing of password requirements through collaboration with the policy and security offices to leadership recognizing the importance of the usability findings that led to developing our own product.
