AppConnect — An Enterprise App Store
Making enterprise contact center software extensible, and easy to deploy.
TL;DR
AppConnect is an enterprise class marketplace of 3rd-party apps made specifically to augment and extend the functionality of Talkdesk classic. There were several simultaneous efforts (marketplace, dev portal, marketing, etc) that required my role to manage several UX designers, each working on separate effort, facilitate with stakeholders and de-risk potential roadblocks, oversee the holistic experience, and participate as an individual contributor.
Background
Company and Market
Talkdesk provides enterprise class, cloud-based software for running contact centers (think support lines, outbound sales, etc). This is an old industry with 90% of the market still running on-premise hardware systems. However, as varied as the companies are that need support centers (pretty much everyone), are as many varied needs for custom features and workflows. This creates one of the classic UX problems of enterprise software; finding the magic balance between customization, ease of use, and scalability.
Project Overview
In an effort to solve part of the customization vs ease of use problem, the company decided the best way to move forward was to build a marketplace of 3rd party apps on top of our platform. The goal was two-fold: scalability through third party development, and address sales gaps through plug-in features. This would make Talkdesk more attractive to potential and existing customers who demanded specific feature sets, which tends to happen in enterprise. And as a business incentive, developers would have access to a new revenue channel that Talkdesk symbiotically would earn a commission from.
Roles
We had two PMs (one for Marketplace through in-app experience, the other for Developer portal) 2–3 UX designers (including myself as lead/manager), one front-end developer, and two engineers.
Throughout many projects at Talkdesk, my role was a combination of hands-on individual contributor, design manager, and ux strategist. On this project I had the help of three extremely talented designers who helped define new design patterns and solve complicated flows. I facilitated by providing art direction, ux feedback, making sure we included the appropriate stakeholders at the right times, as well as keeping the project on a strict iteration/checkpoint cycle.
The Design Challenge
Process and timeline
We were given 3 months to complete the project so that it could be announced and marketed at one of our big annual conferences. Not a lot of time for such an involved project, which meant parallel tracking some of the design work. We decided to design the marketplace listing page and install flow simultaneously since the two didn’t overlap much, but dovetailed nicely.
To begin projects of medium to large scope, we like to start with a “kickoff” meeting which includes representatives from product, design, and engineering. These are high-level meetings where project timelines and goals are discussed but specifications are not yet developed. This gives all parties a chance to discuss and inform the direction of the project from their given perspectives.
This is usually followed up with a design charrette, on which initial user flows are built.
Requirements
The marketplace would need four surfaces:
- The Marketplace
The store itself — where our user personas would browse or search through the directory of available apps - Install flow
A functional UI for installing / provisioning / managing apps - Developer portal
All the necessary materials and services needed work with our API - Marketing pages
Ways for customers and partners to learn about our program
The Marketplace
Competition
Doing a bit of competitive research by looking at examples of other enterprise level marketplaces, we see some common design patterns but varying levels of information density on the homepage vs the listing detail page. Notably, homepage designs focus on app branding over marketplace branding with Heroku being the exception (however the use of negative space brings it back to the apps).
Homepage design
Our goal with the homepage was to make it familiar, easy to visually parse, and sortable by category. With each revision, we fine tuned the ux to fit the real content we would have. How many partners would we be launching with vs planned to sign up in the next six months? Which categories were important to our customers? Etc.
Listing Detail Page
The number one thing we thought all other marketplace listings missed, was the ability to tell a story, quickly. Utilizing some editorial design patterns, we were able to strike a balance between the marketing needs of the partner, and the need of the end user to grasp the application concept quickly. Here you can see we tested out several variations.
In the end we had to craft content guidelines for partners in order to help them provide the right type and quantity of content. Each section adopted the practice of progressive granularity: This is a concept similar to progressive disclosure, but instead of deferring advanced or rarely used features to a secondary screen, here we are deferring more granular levels of content through the use of visual hierarchy. With a quick scroll and glance at the page, one can garner the essentials; app name, title, main screenshot, and primary pricing level. However, upon further inspection, more granular details are easily available.
Install Flow
After browsing the marketplace, the admin or supervisor would click the install button which would take them through a login flow. Once authenticated, we need to determine if the app is already installed. If it is already installed we take the user to the app subscription and provisioning settings panel. Otherwise they continue through the install flow.
Subscription model
One of the key selling points for 3rd-party app partners, is the integrated “one-click” subscription model. Customers can select from a list of subscriptions plans provided by the partner, of which they are given a 30-day free trail.
User provisioning
One of the more challenging interactions on the project was user provisioning. Which of your agents do you want to install the app for? What if you want to install by role? What if you have 10+, 100+, or 1000+ agents? What if you want to install for one specific agent? Each of these problems required specific UI to solve. Search bar, number of selected agents out of all possible agents, ability to filter out unselected agents, ability to select by role, ability to selectively remove from role, etc
Authorization & TOS
Some apps would require certain features and APIs in Talkdesk to be made accessible. Similar in model to OAuth for Google or LinkedIn.
Installed Apps & Mangement
Once installed, the supervisor and agents provisioned will be able to access the apps from the “My Apps” dropdown. Depending on the functionality the launched app will present as either an iframe within the Talkdesk experience, or as a module elsewhere in experience, depending on persona.
Error and Zero States
Developer Portal
The developer portal UX and visual was lead by the talented Francisca V. We worked together along with the Director of Platform to establish core requirements, an MVP, as well as long term vision. This part of the experience was geared developers with clearly defined documentation, as well as an easy to use approval and deploy process. These are not the final designs, but give a good idea of the detail involved in this part of the project
Marketing Page
Finally, a landing page was needed to direct potential partner developers towards to learn more about the marketplace. Visual design and layout here was done by Luis N. Many of the design language decisions we made were difficult as the company had a considerable amount of design debt and to this day lacks the foundation of a solid brand. That said, Im extremely proud of the results and everyone involved from PM to UX to Eng.
