FlexCloud

Problem

Users need a portal to configure integrations and other highly technical programs without needing a technical background.


Background

FlexCloud is a rethinking of the way InfoTrax does business with clients. Previously, clients would sign up for any number of products offered by InfoTrax (storefront, commissions engine, etc.) and work with InfoTrax to customize the base products to their needs. This worked well with a modest group of clients, but as the company grew, it became increasingly difficult to offer the same level of service to each client. In order to streamline development and offer more freedom to clients, we developed an SDK that could be implemented by the client with any front end or commissions engine of their choosing and a user facing portal to set up integrations and plug-ins.

An example of Evo, the front end product for direct sales distributors.


Exploratory Research

Our relationship with our clients proved to be a huge boon to our research. Through working with them in customizing the existing Evo product, we were able to see the types of functionality that they would ask for, as well as what types of clients required different capabilities. We worked closely with a few clients while developing the SDK and user portal so that it would be easily accessible. Several people both within the organization and amongst our clients pointed to Box as being a great example for creating software integrations with SDKs. We were able to look at the things Box was doing that we agreed with, but also able to take user feedback and our own qualms into consideration when designing FlexCloud.

The way Box handled initial configuration of apps was cited as being very helpful.

Wireframes

Wireframing was done over a few weeks to quickly iterate on ideas. It was a balancing act to create something that took positive qualities from other products without copying. Through a few rounds of testing with wireframe based prototypes, we decided that we would need to have a separated section to set up third party plug-ins that would interface with our SDK instead of one central flow for all integrations.

A wireframe still showing the idea of choosing between a new 1st or 3rd party integration. The 3rd party plug-ins would be moved later.

Testing

When we had settled on a direction, I made a high fidelity prototype in Axure RP to not only showcase the final design, but to refine the flow. Due to the pandemic, user testing had to be done remotely, but was still instrumental in validating our design. One issue involved the 3rd party plug-in section. When activating a 3rd party plug-in, users would first have to add it to their instance, and once it was added on the back end, they would have to launch the separate plug-in page where they could set up the information correctly. My initial thought was to have a seperate button on the final page that would take them to the plug-in, as it was required that the plug-in be opened in a separate tab. Users wouldn't always be able to configure the plug-in right away, so it made sense to give them a branching path to go back to the main plug-in landing or to launch the plug-in. Through testing, we found that users were confused as to how they would configure the plug-in. They would expect it to appear when they hit a "save" or "next" button. While from a site map point of view, this was not the case, but to make it feel more like the users were expecting, I added a modal that would appear after the plug-in was added on the back end and was ready for configuration.

The initial screen with launch button.
The updated design with pop-up and clear text directing next steps.

High Fidelity Design

After months of iteration and testing, a final design was decided and approved for development and version 1.0 release. Of course after we had signed off on building the design, I had several ideas for improving layouts, so I am thankful for agile software development.

Creating a new integration.

Creating webhooks for the SDK integration.

Showing plug-ins that were in use as well as not activated, but supported plug-ins.

An InfoTrax designed Shopify plug-in.

Outcomes

Using the FlexCloud portal, with only very basic training, anyone can configure and use 1st party integrations and 3rd party plug-ins with their business. They no longer need to rely on consulting with developers at InfoTrax to fully take advantage of the features they are paying for.

Takeaways

Completely rethinking your product strategy is a risky move that should be undertaken likely. With that pressure in mind, this project was a huge learning experience about working with users to development a replacement to that which they were used to. Listening to user needs and their inspirations while still having an opinioated product vision is a tricky balancing act that I'm not sure I get right all the time, but in this instance, I think we delivered something that will not only offer much more freedom to clients while still maintaining the level of functionality and ease of use they expect from our product, but will serve as a stepping stone for the company in increasing their client base.