API Onboarding
UX & UI | Onboarding Experience| Canal
Contributions
Lead Product Designer
Responsibilities
User Interviews
Competitor Research
Wire framing
Design / Iterate
User Testing
Duration
1 Week
Company
Canal
UX & UI | Onboarding Experience| Canal
Canal helps streamline brand partnerships with the all-in-one tool for brand partner proposals, commissions, and payments. Canal makes it easier for online retailers and product makers to connect with each other, integrate each other's products in their stores, set commission rates, and payment schedules and arrange shipment to their customers.
Canal's CTO requested that the onboarding flow included the option to add a user's Webhook to connect their API to the Canal platform. This would allow e-commerce stores not on Shopify to use the Canal app - ultimately opening up many more opportunities for Canal to gain customers.
Customers that aren't on Shopify need a way to access our services.
Design a feature that will grant non-Shopify users the ability to connect with Canal's API and start using the software instantly. In addition, make this experience accessible for non-technical users.
Having previously done user research when designing Canal's onboarding experience, I knew there were two main buckets of users: The highly technical user, and the non-technical user. I wanted to understand both user's deeper in the context of the API onboarding so I interview two teammates. Our lead engineer (the highly technical user) and our business ops leader (non-technical user). During these interviews I gathered what their expectations were for onboarding an API, their general understanding, and their frustrations.
After the interviews were conducted, the product manager and I sat with my notes and wrote out a list of user stories. These allowed for a 360 exploration of the problem and how to go about solving for it.
Being able to identify existing patterns was essential for the application of a user experience that was both learnable and recognizable. Webflow was my biggest source of inspiration. The copy that was utilize was simple yet effective. Another source of inspiration was Optemizely - the placement of its CTA's lead to a positive user experience.
Below is the seventh page of the onboarding flow. The user is prompted with adding their API information, however, they also have the ability to skip this section and move onto their next onboarding task. My next steps were to get this in front of both the developer and marketing manager to see if the copy and the user experience made sense to them.
- The copy clearly articulates that the user is able to skip this step if they are unfamiliar and/or uncomfortable adding a webhook
- The actions of adding a Trigger Type and Webhook URL are presented immediately, allowing both end users to take action or skip
- Similar patterns from competitive analysis are applied so that the actions are intuitive for the technical user
While all the components to add a users API information was there, there wasn't enough context explaining what the inputs were used for. I needed to add more instruction and more context to the copy to allow the user to feel informed with proceeding with adding their webhooks. In addition, the user experience was clunky. It wasn't intuitive to both the developer and the marketing manager.
-The technical user wants to know what webhooks are mandatory in order for the API to function
- The user experience isn't intuitive enough for the user to know how to proceed adding another webhook
- The non-technical user wants more clarification around what webhooks are
- The user want to know if they webhook they entered is accurate
Canal is completely functional as an App if the user decides to skips connecting their webhooks. Up until they want to "check-out" of their shopping experience and add their products to their own storefront. So where should we notify them they need to add their webhook in their settings? After discussing with the PM on the project, it was decided to notify them when they select the CTA to "Add to Store", at the very end of the user flow.
I needed to update Canal's settings page so that a user could access the API information incase they wanted to add or update their Webhooks. In addition, Canal also needed a way to alert the user to add their API information in order to proceed with partnering through the app. Canal doesn't have a notification center, so I decided to add a gated modal alerting the user to add their API information in their inventory page.
Being able to spearhead the designs for the API onboarding was a huge moment of growth in my design career. During this project I worked extremely close with the developer team, bridging the gap between the developer world, design world, and the non-technical user. While there are components of the design process I didn't get to exercise due to time and resources, I was able to rise to the challenge of working quickly with very little time to prep. I was able to see the instant impact this feature had on the company, as we were able to sign one of our biggest and most notable clients to date once the feature shipped. In addition, this project taught me a lot when about APIs. Walking away from a project feeling like I've grown personally and professionally is always a huge win in my book.
