Jackie Jiang – Product Designer
Karl Li – Product Designer
Kevin Reichek – Product Manager
User Research
User Flow
Wireframes
Generating and managing API tokens for clients have always been a hurdle that slows down clients for setting up integrations and launching with Attentive. The existing solution adds more manual and repetitive work to the CS team and requires more time for communication in the process. As the product transitions into a more self-served platform, API token management feature naturally becomes the priority in the roadmap.
Users can successfully create API tokens, set permissions, and establish integrations with external applications independently.
Users can manage API tokens easily and resolve issues when they occur with straightforward instructions.
Clear view of numbers of API token created and their status to facilitate internal management by CS team.
Conducted an exhaustive analysis of companies that the majority of our clients are most familiar with to identify the common practice for managing API tokens.
Consulted with UXR team, we interviewed 8 CS managers who have managed API tokens for their clients. The key insights gained have better informed us the major pain-points with current workflow and the expectations of clients after the self-service transition is realized.
API token is required for every client in order to launch with Attentive
Must have clear feedback for errors and warning at each step to prevent communication cost
In this self-service feature, customer support is exceptionally crucial to resolve issues in a timely manner
A series of short usability testing sessions is conducted with CS managers and their clients using Hi-Fi prototype to adjust the user flow and discover usability issues.
A major usability issue was discovered with the design system pattern and was noted for a one time change
Descriptive language needs to be less technical for the targeted user groups
Radio buttons for data permissions leaves a false impression that the options are single choice
The copy API Token action is the core of this user flow and several designs are proposed to better identify a UX pattern that aligns our goal as well as users' needs.
Worked with UX writers and engineers to ensure the clarity of technical terms to both the client users, as well as technical end users.
The actual functionality of API token could vary based on scenarios. At Attentive, API token serves as a key to authenticate request and to improve the security of third party integrations. The fundamental of the API Token management feature must present enough privacy and raise the awareness of security for users.
One time access to the API token upon generation and allow regeneration
Sufficient warning and support text to alleviate the stress of mistakes
Masked API token that only reveals the last 5 digits for identification purposes
Looking from a B2B perspective, the actual user group could be complicated. Multiple responsible team-members from the client side, agency hired by the client and CS managers on Attentive side could be co-managing the API tokens and the integrations set up.
Clearly identifying the actual responsible contact for changes and errors
Without being visualized, engineer team keeps a clear log of visitors and actions that took place on the page
Only allowing one user a time working within the page to further prevent conflicting or duplicate actions
Considering the future possibility of having an active third party application market place, the importance of API Token management would be gradually accentuated. The design mindset from the beginning should be set to consider the inclusion of more advanced features of API tokens, such as data permissions in the second release.
Having phase 2 design files ready for quick iterations after the release of basic generation capabilities
Using languages like "Create Application" instead of "Generate API tokens"
Allowing basic data permissions and gradually releases more complex permission setting with public API documentation
more API keys were generated per quarter by client users as the process is fully self-served
days quicker to launch a client as communicating back and forth to pass API keys become a chapter in history
more clients are enrolling for future feature testing with Integrations team
This is the first project I led after working on several projects from other divisions. The main and unique challenge of this project lies in the conflicting visions between the company's roadmap and the clients' immediate needs, which validates the value of keeping a consistent and constant communication with CS team who was the key to bridge these two visions together.