Log in with MFA
Responsibility: UX/Service design
Company: Piclo
Goals
• Prevent unauthorised users from accessing accounts
• Provide an extra layer of security so users feel their data is safe
Methods
Workshops, user journeys, usability testing, collaboration, template branding
Challenges
Limited options for branding customisation
-
To bolster security for our users, we embarked on incorporating Multi-Factor Authentication (MFA) into Piclo’s login process. This case study details the steps taken to analyze the impact of this enhancement, collaborate with engineers, and ensure the solution aligned with Piclo’s branding.
-
As the UX/Service designer leading the project, I was responsible for overseeing the entire design process, from research and ideation, to prototyping and implementation. My role involved collaboration with stakeholders and developers to ensure that the new navigation system aligned with user needs, project and business goals.
-
Piclo's mission is to decarbonise the world's grids. We develop software solutions that make our energy networks smarter, flexible and more sustainable. Piclo Max, our market access platform, enables flex sellers (such as EV and battery owners) to access all electricity markets from one place.
Max landing page
Log in with MFA
Research and Analysis
Journey Analysis:
Conducted a thorough analysis of all existing user journeys that could be affected by the introduction of MFA like the login, registration, inviting a new member flows.
Identified key touch-points where MFA would intersect with current workflows.
Objective:
With increasing security concerns, it became imperative to enhance our login process by integrating MFA. The challenge was to do this without disrupting existing user journeys and to maintain a seamless user experience.
Mapped and analysed all journeys affected by MFA
Collaboration
Journey Mapping:
Paired with engineers to draft a comprehensive journey map, detailing the integration points of MFA.
Gained insights into both front-end and back-end processes involved in implementing MFA to get a better understanding of the process.
Discovery Sessions:
Held discovery sessions with team members, including product managers, engineers, and other stakeholders.
Reviewed potential solutions and identified any technical restrictions that could impact the implementation.
Journey mapping while pairing with engineers, translated top diagram to a more comprehensive (bottom diagram)
Design and implementation
Solution Review:
Evaluated multiple approaches to integrating MFA, with the team, ensuring minimal disruption to the user experience.
Selected the most viable solution that balanced security with usability.
Branding and Styling:
Stylised the default MFA templates to align with Piclo’s branding.
Ensured a consistent look and feel across all user touchpoints.
Solution review workshop with team
Prioritised work and steps with team
Testing and Validation
Testing Parties:
In collaboration with the Product Manager, we organised several testing sessions to identify and resolve any unknown issues.
Collected feedback from users and stakeholders to refine the process and ensure a smooth rollout.
Usability testing II
Usability testing I
Outcome
Enhanced Security: Successfully integrated MFA, significantly enhancing user account security.
Seamless User Experience: Maintained a smooth user journey by carefully analysing and planning the integration.
Brand Consistency: Ensured that the MFA implementation was in line with Piclo’s brand aesthetics, providing a cohesive user experience.
Reflection
This project underscored the importance of cross-functional collaboration and thorough planning in implementing security features. By involving engineers early in the process and holding regular discovery sessions, we were able to address technical challenges proactively and deliver a secure, user-friendly solution.
