10x B2B Baas - Case Study

Engagement and retention of an existing audience base

10x is a fintech scale-up founded by Anthony Jenkins, ex-CEO of Barclays with clients such as JPMorgan Chase.

I led the end-to-end design and UX for the 10x Developer Portal. The portal serves as a showcase for all 10x API products, helping clients learn how to integrate the platform, and access release updates.

I also collaborated with different feature teams and our design team to develop a fully functional B2C demo mobile app using React Native for iOS and Android. I also contributed to the design of B2B banking software, Bank Manager.

But I now want to demonstrate the design process I followed and that led to achieving all our KPIs.

My approach

My UX design approach follows a user-centric Design Thinking process grounded in empathy and iteration. I start by conducting research to deeply understand users, and uncover their needs, motivations, and challenges. From there, I define the problem, forming a clear view based on user insights. I then ideate, generating a range of potential solutions to test as hypotheses. By building prototypes, I can quickly validate ideas, iterating based on user feedback. Testing is a continuous process where I engage users through qualitative and quantitative methods, ensuring the final solution is both effective and meaningful. This approach ensures that every design decision is purposeful and rooted in real user needs.

I’ll demonstrate how I used this approach with the 10x Developer Portal.

Building empathy & defining the problem

During the ‘Discovery phase’, I conducted extensive competitor analysis and ran a card-sorting exercise with stakeholders to understand the information architecture. I ran internal usability tests, giving participants specific tasks to complete, while gathering feedback. I interviewed 10x stakeholders, client Product Owners and feature team Product Owners to gather further, comprehensive insights.

We identified several key problems through ethnographic research and persona surveys revealing that the documentation was inconsistent across the different feature teams, with different levels of detail and information gaps. Navigation was clumsy and information architecture inadequate, deployment was manual and time-consuming, and not in line with 10x’s growth ambition. The business case for a complete rebuild and redesign of the developer portal was accepted.

The team

Our team operated as an autonomous, cross-functional unit consisting of a PO, a Product Designer (myself), two Software Engineers, three Tech Writers and a QA. We followed a two-week sprint cycle, incorporating agile ceremonies to manage our workflow. My close collaboration with the PO was essential for planning and strategising effectively. Additionally, I worked in tandem with the Software Engineers and QA to ensure that the design and user experience was implemented correctly. We used a 'Design Review' swim lane on our Jira board to track progress. I led a weekly portal UX strategy meeting and also facilitated weekly Design Reviews where we shared our work. I facilitated frequent collaboration with other teams including Security and Compliance, to unblock tickets and ensure smooth project progression.

Prototype, test, iterate

Based on my research, I created detailed information architecture, user flows and sitemaps, which I continuously shared with my team and stakeholders for feedback. I developed wireframe prototypes that I regularly tested with clients, iterating on the designs based on their input. On the right is one of the user flows that I created for the entire portal. We used Material UI and built a design system in Figma, to which we continually contributed. We also used Storybook for component and documentation management.

Our development process included continuous integration, allowing tech writers to deploy through GitHub pull requests without requiring code deployment. We followed an incremental development approach, dividing the product into fully functional increments that built on previously released functionality.

Sense and respond

Beyond the MVP we continued to sense our user’s needs and responded through prototypes, test and measure. We measured an increase in our Net Promoter Score (NPS) through customer satisfaction surveys and monitored bugs and Zen-desk tickets for insights. We utilised Google Analytics, setting up event triggers to test certain features. We used Clarity from Microsoft to capture user interactions via heat maps and session recordings. I liaised directly with client Product Owners, discovering critical information such as issues with third-party status requests. Regular conversations with customers provided valuable qualitative research, which we compared to what we saw in the data. We also conducted split testing to see which documentation layouts had the best results and integrated a feedback widget to gather on-page feedback about the API documentation and usability of the portal.

Outcomes & supporting metrics

We established an OKR framework and successfully overachieved on our KPIs.

1. Improve the deployment and updating process for all stakeholders

We simplified the deployment process using GitHub and created templates for feature teams, making it part of their definition of done. Implementing a 'No-code' WYSIWYG editor further streamlined this process, reducing the number of steps for tech writers to deploy new documentation from over 20 to fewer than 5.

3. Improve the quality of documentation

We focused on action-oriented documentation and created a UI screen for API sequences and code snippets within the docs. Additionally, we revamped and reworked complex technical diagrams. These efforts led to a reduction in Zendesk tickets from over 90 to fewer than 40.

4. Make information architecture easy to understand and navigate

We enhanced the information architecture to make it more scannable and built-in search functionality and made the portal 100% responsive. These improvements increased our Net Promoter Score (NPS) from 4 to 8.

Summary

As part of a small agile team, we transformed the portal from its humble beginnings to a portal that met our user’s needs, continually testing and iterating to evolve it into a platform that embodies our 10x growth ambition. We completely redesigned and rebuilt the portal to facilitate fast and easy deployment, simplified the documentation updating process for feature teams and tech writers, and restructured the information architecture with built-in search to aid new user onboarding.

Our efforts included creating action-oriented documentation with guided steps, implementing a feedback widget for direct customer insights, and reducing engagement with client teams to make the system more self-serve. These changes halved Zendesk tickets and nearly doubled our NPS score.

This success was driven by interpreting user needs alongside business requirements and continuously analysing data and user feedback to validate our strategy.

Testimonial

“It was amazing to have such a talented designer on our team.”

I worked closely with Carien at 10x on designs for various Developer Portal features. It was amazing to have such a talented designer on our team. Carien was instrumental in designing the look and feel of our portal, based on user interviews and analysis. Carien always works hard to provide multiple options for UX and is extremely responsive to feedback. She also coordinated and ran several user feedback sessions after launching our new portal, and shared and incorporated learning into designs going forward. She also pitched in as a writer for content overviews, connecting with several hard to reach subject matter experts to do so. Besides that, she was and continues to be a great animator for the team, providing much needed team spirit and positivity, all while also working with other teams and projects. I would love to work with Carien again!

- Principal Tech Writer at 10x - Gigi Hanna - 5 Feb 2021