Try Now
Building an experience for Appian’s Plug-in AppMarket
The TryNow feature lets users test plug-ins interactively within Appian’s AppMarket, providing a hands-on experience to explore functionalities in real time. This streamlined approach helps users quickly assess a plug-in's value, ensuring it aligns with their needs before committing to full integration.
Team
Product Designer & Implementation [me]
Tags
b2b, SaaS, automation, enterprise, BOAT, BPM, plugin, growth
Company
Appian
Time Constraint
2 Months
Example: TryNow for GANTT chart
To experience the TryNow for the GANTT chart, you can go to the plug-in component in the AppMarket. The TryNow component only makes sense for those with front-end displays like this chart! So, let’s see what it’s like…
Oh, wow! That was easy. You land directly in the component, already configured and ready for you to explore.
You can click to see the documentation easily without having to download it from the AppMarket. The PDF uses Appian’s PDF embedding component to allow for users to download and interact with the pages.
The TryNow interfaces are embedded and updated dynamically according to URL input parameters that pull data from a cloud database. If you enter the wrong URL, of course, we have a cute little 404 page that has a CTA to bring you right back to our Community.
Scalable & Sustainable Dynamic Component Submission Process
In the initial phase of the TryNow project, I was tasked with creating an interactive experience specifically for the Esri Map component, addressing a unique customer request. The simplest approach was to build a single site with an embedded sample app framework for that one component. However, as I considered the potential scale of supporting multiple plug-ins, I realized that creating individual sites for each plug-in would quickly lead to bloat and inefficiency.
To tackle this, I designed a more scalable solution: a submission process that stores each plug-in's essential data—component key, title, description, and documentation ID—in a centralized database table. A second table stores example interfaces, set up in a many-to-one relationship with the plug-ins. The unique component key serves as the identifier, passed through a URL input parameter, pulling the relevant data dynamically. This enables each example interface to render as a separate tab in the main “Explore” environment, giving users a seamless, efficient experience to interact with multiple plug-ins within a single, streamlined site.
Results & Impact
Enabled Appian sales play during training sessions with two major customers in financial services: 1) a global leader in investment banking and securities; and 2) the world’s largest asset management firm overseeing trillions in assets
Supported product engineers to quickly demonstrate plug-in capabilities to prospective customers when showcasing Appian’s flexible and diverse capabilities
Based on projected resource use and baseline assumptions for implementing "Try Now" capabilities across 50 plug-in components, a dynamic interface approach proves far more efficient than creating separate sites for each plug-in. The dynamic interface results in substantial resource savings of approximately 65% in CPU and 67% in memory compared to the separate-site approach.
Implemented a way to track who clicks on each TryNow component using a simple API that redirects to the TryNow URL, capturing who clicked on the TryNow experience, where they clicked from, and for which component, leading us to see prospective sales opportunities.
The Why: Addressing a Frustration with Plug-In Components
Implementing a plug-in from the Appian AppMarket into your environment is rarely a straightforward task. Imagine you're an Appian developer searching through the AppMarket for a component to meet a specific requirement—like the Gantt chart plug-in for a project management app. You might look at the screenshots, but static images don’t reveal much about how the component will actually function in your application.
To find out, you would need to:
Download the zip file and locate the plug-in JAR or nested zip file.
Upload and deploy through the admin console, which requires admin access. It’s also often unclear whether the downloaded file is a sample app, plug-in, connected system, or if it includes prerequisite components—and the nesting of zip files only adds to the confusion.
Import the sample app (if one’s available) to test the component’s interaction within an interface.
If there’s no sample app, configure a blank interface, add the plug-in, and consult documentation to set parameters.
After all that, you might find that the plug-in doesn’t quite meet your needs, leaving you to remove everything and start over.
Which lead us to… the TryNow feature. With Try Now, you skip all the setup hassle and dive directly into a pre-configured environment where you can interact with the component instantly. In a single click, you can explore its functionality, demo it for a client, or test it against your project requirements without ever leaving your browser. It’s a streamlined experience that saves you time and provides clarity, whether you’re evaluating a plug-in for immediate use or just exploring possibilities.
Iterations
Version 1: Getting the Wrapper Right
When tasked with creating the Esri map component, before thinking about scalability and sustainability, I jumped right into creating mockups of various interfaces for the wrapper component. I wanted to display the component in a way that would allow for consistency and readability across any TryNow sites the user would come across. We voted on the various card/background combinations using the rich text editor component as an example while the Esri map plug-in engineers were still building out the component. These are the designs that were considered.
Version 2: Single Site with Side Bar Nav
In the first version of the TryNow experience for the Esri Map component, I initially created a standalone site with Appian’s out of the box sidebar navigation. However, I quickly recognized that the sidebar consumed valuable real estate without enhancing usability.
Version 3: Scalable and Dynamic UI
To streamline the interface, I replaced the nav with a custom horizontal button configuration, allowing users to easily tab through each component example and access its documentation. This approach improved navigation simplicity while maximizing the display area for the plug-in content, creating a more intuitive and immersive experience for users.
Learnings & What’s Next
I had to start over because the way I approached this ask, at first, was a one-and-done situation. I almost missed the opportunity to make “Try Now” a capability open for all plug-in components with a front-end interface that users can interact with. This would have been a huge miss. And if we wanted to scale it, and create interactive site objects for EACH component, it would have dragged the database memory, introduced latency, and potentially caused app server crashes.
I plan to automate the submission process to streamline the TryNow feature setup. Once a component plug-in is implemented in the “Explore” environment, users shouldn’t need to manually add TryNow links to our tracking database or generate tracking URLs. By leveraging robotic process automation (RPA), I can automate these tasks, ensuring that links are seamlessly submitted to our plug-in team and embedded into the AppMarket page. This approach will save time and reduce manual errors, making the TryNow integration process even smoother for our submitters.