Login & Sign-Up Feature Revamp
Revamping the onboarding experience to seamlessly integrate with Esper’s brand design while streamlining user workflows
End-to-End
Onboarding / Growth
PROJECT TYPE
8 Engineers
1 Product Manager
1 Product Designer
THE TEAM
Brand Design
User Research
Wireframing
Prototyping
MY ROLE
TOOLS
Figma
Jira
3 Months (Q1 2022)
1 Month (Q3 2022)
DURATION
Overview
How might we design a streamlined Esper-branded experience that decreases administrator users’ manual load and provides full autonomy for new users who are signing up for the first time?
One known pain point for Esper’s administrator users occurred when they added new users to their Esper console. Administrators were forced to create passwords for each new user, then pass it along to them during their sign-up process, resulting in excessive effort and cognitive overload for both parties.
Separately, the login and sign-up screens were a royal blue color, deviating significantly from Esper's signature purple brand identity. When given the opportunity to revamp the login and sign-up flow, I changed the visual design of the existing screens to align with Esper’s brand design, in order to provide a seamless brand identity experience.
In January 2022, my team began this redesign. Our primary goals were to address user pain points, facilitate seamless application access, and align the visual designs with Esper's brand. We deployed this redesign in early April 2022, then revisited the project in Q3 2022 when we integrated a new backend system.
The Opportunity
Sign-up and login screens serve as the initial touchpoints for users when engaging with any application. It's essential for this process to be straightforward and frictionless to enhance conversion rates and retain current users. Additionally, the visual design should align with the application's brand identity to provide users with a clear sense of the application they are accessing.
The Solution
My PM and I conducted research on standard login and sign-up flows to design a user-friendly and secure experience. Our primary goal was to allow users autonomy when setting up their accounts while maintaining a strong focus on security. Additionally, to ensure alignment with Esper’s brand design, I collaborated closely with the Marketing team to gain insights into the brand guidelines and create Esper-branded screens.
Identifying Present Issues
The known issue was in the user flow itself, so I mapped out our user’s steps to better understand which steps to improve upon.
The known issue with our current sign-up process was that administrator users needed to create a password for their organization members after adding them to Esper. This causes a few issues:
Administrator users have a manual burden to send organization members their passwords separately.
Relaying a password from one person to another may invoke security risks.
Organization members have an extra step of changing their passwords to something more practical for them to remember after logging in for the first time - this can be solved if they create their own password from the beginning.
Mapping out the existing user flow for both types of users allowed me to better understand which portion of the flow I needed to solve for, along with other areas that I could improve. Below is the existing user flow.
Improving the Flow
After gaining a better understanding of where I could make improvements, I tested my flow by mapping out the new user flow.
Tackling Brand Design
With the goal of aligning my visual design with Esper’s brand design, I turned to the experts in this field to collaborate on my strategy.
Our Marketing team was incredibly helpful with providing Esper’s brand guidelines, along with elements needed to aid my visual design. While our product itself was not perfectly aligned with the Esper brand, our website brand identity was fully flushed out. Esper’s website is also an entry point for all administrator users, so aligning the login and sign-up pages to Esper’s brand design was both a business priority and a decision that would help user’s brand recognition of Esper products. Below is a before (blue) and after (purple) example of our login and sign-up screens.
Final Designs
After a few iterations and check-ins with PM and Engineering, I delivered the final screens for our revamped login and sign-up flow.
The final designs below depict the ideal journey of an administrator, from signing up online to successfully logging into their Esper console for the first time. A similar path is followed by organization members, beginning at “1.2 Verify Account” and ending at “1.5 Account Creation Successful”. In addition to this primary path, I also considered various "unhappy" paths that could occur, such as password recovery, handling expired verification links, and managing already verified accounts. The designs below offer only a glimpse into the extensive design work that was carried out for the various scenarios our team encountered.
Results
Our team tested the revamped flow with 20 internal users, which yielded a 100% task completion rate.
The revamped login and sign-up designs were launched in April 2022, thus achieving our team’s primary project goals within the given timeline. If I were go to back in time, I would test more in detail, as we only had time to test the task completion rate. I would have loved to measure the success rates of unhappy paths as well. We could have also gathered qualitative data from users to see whether the new flow has improved their efficiency and helped address their initial security concerns.
2nd Iteration Challenges
In Q3 2022, our engineering team changed our backend open source tool, resulting in requests for design modifications, though limitations and capabilities for this new tool were not fully flushed out.
To address this challenge, I adapted my approach to work with assumptions. Rather than presenting a single design solution, I embraced the practice of designing multiple solutions. This enabled me to present several options to the engineering team, facilitating discussions about which designs were viable within the constraints imposed by the new tool. By adopting this approach, I helped quicken the decision-making process and make more efficient progress.
Reflections
Some lessions that I’d take for my next project…
Designing feature-specific states has a significant impact on the entire product. Given the absence of a pre-existing design system, I created multiple states for this project. To promote consistency across the product, it was crucial to be transparent and extend the use of these states to other areas. I shared my designs with the rest of the design team, which facilitated awareness and collaboration, ensuring that the design states were acknowledged and could be implemented cohesively across various product features.
Align with your design team, always!
To create a cohesive product experience, I initially focused on the onboarding process. However, I soon realized that other areas needed attention too. As a result, I expanded the scope to include the Esper website sign-up page, email verification, user management, and user profile sections. Taking this comprehensive approach was crucial for delivering a seamless user experience.
Think about products holistically.