One-Time password protection
One-time passwords help further secure a user's account in the login process. Through this addition to the login flow, users can feel more confident in their account security and decrease the risk of being hacked.
Project deliverables
Wireframes
Interaction Designs
Research
Tools used
Timeline
Figma
6 weeks
Sketch
Illustrator
Spec with Redlining
The problem
With an increase in the frequency and complexity of cyber attacks, it is more crucial than ever for companies to include additional precautions within their login processes. For Mede, this need for extra security was a requirement to keep the login flow up to date but also needed for insurance reasons.
The solution
Include a one-time password in a user's flow for accessing their account. By asking for a few additional pieces of information, users can increase their account security and better protect themselves from attacks.
Design process:
Empathize phase
"How might we" questions
-
How might we introduce an extra step to the login flow without noticeably disrupting the user?
-
How might we design this flow to be familiar to others out there?
Research
The majority of my research heavily relied on searching around and interacting with designs out in the wild. Many of the flows already in place throughout products followed a similar flow, but there were some differences in what they had implemented and the requirements put in place for the V1 of our security.
About comparative research:
Given the time and resources for this project, conducting a comparative analysis provided me with the proper insight and knowledge to begin strategizing solutions to the problem and work with PMs to update acceptance criteria.
Define & ideate stage
Comparative analysis
Key analysis insights
Updates to acceptance criteria:
-
Need to partially mask the email on file
-
Have a way for the device to remember users for X amount of days
Out of scope/Next Step Ideas:
-
More methods of code retrieval (other than email)
User flow
Starting the design
01. Number of steps in flow
How might we include a one-time password in the current flow?
Key takeaway:
Introduce one additional step within the new UI to minimize changes to the existing flow. Less change = best results.
It was important to begin this process by establishing how many new steps we'd want to incorporate into the login flow for the one-time password addition.
02. Brand guideline evaluation
Use of brand guidelines
As this process occurs outside of the Platform, there was debate about whether or not I had reason to bend brand guidelines.
Key takeaway:
Since this flow doesn't occur within the product, it's okay to explore some design options outside of the brand guidelines.
03. Button placement & logic
How will a user get help if stuck?
A big part of this design was thinking through the button placement for help and aligning with product managers and security on what steps users could take to fix the issue.
Key takeaway:
With the chances of the 'Help' text being lengthy, it is best to have this happen in a separate modal. Additionally, this layout could be helpful for future iterations where users can take more self-action steps toward fixing the issue.
04. Error messages
How will users be presented with error messages?
Once the general design and flow were in place, I had to identify and design for all the potential errors a user could encounter while moving through this flow and design how they would present on the screen.
Key takeaway:
With the chances of the 'Help' text being lengthy, it is best to have this happen in a separate modal. Additionally, this layout could be helpful for futureThe less change that happens in the modal for errors, the better. Utilize the main login screen for more serious issues, such as a locked account. iterations where users can take more self-action steps toward fixing the issue.
05. Updates to the current login screen
How will the sizes needed for the new OTP modal affect the current login screen sizing?
Overall spacing and sizing for the default login page had to be updated to accommodate the one-time password step.
Takeaways
What initially seemed like a straightforward ticket became something so much more. That said, it was crucial to my design process to break this down into tinier, more digestible steps. I found it helpful to check in with my team and other departments that were involved early and often to ensure that the logic we were putting forward was feasible. Of course, during the sprint, there were minor setbacks, but nothing as drastic as if I hadn't been communicating with the other teams throughout. All in all, there are always next steps, such as including a way for users to do more than contact support when they get stuck, but as far as a version one goes, this flow covers the initial bases.