Let’s Make it Easy for the Dev Team!
Singular | 2024
About Singular - a complex B2B SaaS platform in the AdTech industry with a primary focus on the gaming app industry. Specialising in marketing analytics. It offers a solution designed to help businesses optimise their marketing strategies and improve their return on investment (ROI). The platform provides a comprehensive view of marketing performance through advanced analytics and data integration.
Singular's Clients:
What are we Trying to Solve?
One of the biggest challenges developers faced during onboarding was integrating the SDK. The process involved several steps and configuration options, making it complex and often confusing. A key issue was that the SDK documentation was hosted externally, on the Help Centre website, requiring developers to switch between the product and external resources. This disruption frequently led developers to contact the support team for assistance.
The Solution
To simplify SDK integration, we built an SDK Planning Tool that guides engineers through the various configuration options step by step. The tool then provides ready-to-use code snippets that developers can easily copy and paste into their app, streamlining the process and reducing the need for support.
Illustration by: Sasha Ludashkin all rights reserved to © Singular 2024
Meet Alex
Name - Alex, the Developer
Role - Software Engineer, Backend or Full-Stack Developer
Developers, like Alex, face challenges such as complex integrations, fragmented documentation, and unclear error messages, all of which can slow down their work. External documentation adds extra friction.
Developers are also under tight deadlines and prefer to solve issues independently with minimal support. Clear, self-service resources and intuitive tools are key to helping them achieve these goals.
User Research
Before building the SDK Planning Tool, we used FullStory and Mixpanel to analyze developer behavior during SDK integration.
FullStory's session replays revealed where developers were getting stuck, while Mixpanel's analytics showed a high drop-off rate in the setup process. This data highlighted key pain points, including confusion around configuration options and difficulty completing the integration.
User Flow
I created a user flow to outline how a user would navigate through the product, outlines each step of the SDK integration process with detailed, self-serve documentation. This involves mapping out the sequence of tasks developers need to complete, from initial setup to final implementation.
Wireframes
The next step is to create wireframes that visually represent the user flow for self-serve SDK implementation, with step-by-step documentation integrated at each stage.
These wireframes will focus on clear navigation and easy access to guidance, ensuring developers can follow the process smoothly.
Collaboration with the product team and iterative feedback helped refine the wireframes
The Final Design
The final design prioritizes an intuitive, focused experience with clear steps and highlighted code snippets.
Through iterative collaboration with the product team, the design was refined, resulting in a smoother SDK integration tool that enhances user adoption and reduces dependency on support
The Importance of User Delight and Gamification
I truly believe that interactive feedback like small GIF animations enhance user delight (even in a B2B product).
That’s why I added moments of delight throughout the product, to reduce cognitive load, maintain focus, and create a more enjoyable and rewarding process.
Additionally, incorporating gamification - through progress bars, achievements, and rewards - further boosts engagement by motivating users with goals and recognition.
Illustration by: Sasha Ludashkin all rights reserved to © Singular 2024
The Results
60%
Adoption
60% of all signups completed the SDK Planning Tool
+17%
Users who use the SDK Planning Tool are 17% more likely to successfully integrate the Singular SDK into their apps. Additionally, we saw a decrease in support tickets related to SDK implementation!
My Role
As a product designer, I led the UX of the project, based on user research and user behaviour data. Thinking about a step-by-step solution that will guid our users to easy and successful SDK implementation. I collaborated with a Product Manager, brainstorming ideas, from hand-drawing sketches to fully designed experience in Figma. Additionally, I worked closely with the R&D team to ensure our vision was executed as planned.