Design Critique
Prioritizing Real User Scenarios
Before making a choice between designs A and B, it's essential to understand real-world usage scenarios and explore various possibilities. Users frequently handle multiple accounts across different services. To enhance the user experience, a strategic blend of the strengths from both layouts could prove to be the optimal solution.
Critique for Design A:
The current layout presents an excessive amount of information simultaneously (Services, Accounts, Passcode) within the listing. This approach may potentially create challenges in locating the specific passcode, particularly when dealing with multiple accounts under the same service.
To enhance the user experience, consider reorganizing the design by categorizing services at the top level. This reorganization aims to streamline the information displayed in the listing, while also highlighting the visual significance of the passcode.
Critique for Design B:
The current approach of arranging services using icons is intuitive and effectively guides users to access passcodes by tapping. However, the subsequent pop-up modal that appears after tapping may become overwhelming, especially when dealing with multiple accounts. To address this, a switch to a Modal sheet format is recommended.
Additionally, consider relocating the “Add” button to the bottom right corner as a FAB. This modification effectively separates the actions of viewing passcodes and adding devices, contributing to a clearer user flow.
To utilize the remaining icon space, consider implementing blank icons with inner shadows. This design choice not only implies the potential for adding more services but also maintains a visually cohesive layout.
Blending Two Designs:
Step 1: Start with Design B for Clarity
Begin by utilizing Design B to create a straightforward overview of unique service attributes as the app's initial screen. This offers users a clear understanding of their options.
Step 2: Click to Open Modal Sheet layout of Design A
When a user clicks on a specific Service icon, seamlessly switch to the Modal Sheet layout of Design A. This transition provides a detailed display of passcodes for various accounts linked to the selected Service. This method ensures a user-friendly experience while accessing the necessary information.
Design Task
Define the Real Problem
Prior to embarking on the design process, it's crucial to pinpoint the fundamental problem that users encounter when attempting to initiate the 2FA setup.
Competitor Analysis:
Exploring products like Google Authenticator and Microsoft Authenticator uncovers that users must manually access the service's settings to retrieve verification codes for 2FA setup. This poses a challenge in terms of user accessibility.
Engage with developers:
Initiate a dialogue with developers to determine the feasibility of offering direct guidance to the service's 2FA setting pages. Gain insights into why Google and Microsoft have not adopted this approach, if it's a viable option.
User Flow
To ensure a seamless experience for users, make sure first time user can be guide to instruction page and access the passcode immediately after adding account successfully.
Blending 2 Design to Display the Passcode
Leverage the strengths of two layouts to empower users in efficiently managing multiple accounts across various services.
End-to-end flow in wireframes
Carefully consider the functionality of each page and component, guiding users step by step to complete the 2FA verification process.
Final Design
Creating a Solid and Reliable User Experience
Leverage iOS modal sheet functionality to provide users with a smoother experience. The overall design showcases the authenticator's reliability through a green color palette, with orange utilized as a highlight for elements or to indicate time urgency in the time bar.
Prototype Display
Fell free to expand the window to experience functionalities.
It is recommended to "expand the window" and use the "Chrome browser" to experience the prototype.
Thank You!
I greatly appreciate the opportunity provided by the Trend Micro Human Interface Engineering team to participate in this design exercise.
Despite its simplicity, the exercise has allowed me to explore numerous design ideas from a user-centered perspective, enabling me to thoroughly consider the details required during the development of cybersecurity products.
I hope that my submission can contribute to your team, and I look forward to the possibility of advancing to the next stage, where we can discuss design processes in person :)
