Cloud Elements CDx
Reimagining Content Design for Developer Onboarding
The Challenge
Cloud Elements is a Denver-based cloud API integration platform that allows developers to connect, integrate, and manage multiple APIs. However, while their tools make API integrations clean and easy, their onboarding process is fraught with various difficulties and user frustrations.
Aside from reconfiguring and redesigning the onboarding flow, my main challenge was cleaning up some confusing content in order to increase 30-day trial conversion rates.
Problem 1: Linguistic Obfuscation
One of the critical problems to emerge from the research phase was Cloud Elements' use of unclear and obscure language throughout their onboarding process. Cloud Elements saw itself as a unique solution to DevOps technology, and so they insisted on using company-specific words to explain industry solutions.
The main problem was that this "unique" language obfuscated the purpose of their product -- it added an unnecessary layer of interpretation between the tools and the developer's knowledge background.
As one user put it while moving through the old onboarding process:
"I feel like these pages all say the same thing...but I don't know what they mean. There are paragraphs about "Elements" and "Formulas" everywhere...I've seen them on the past three pages I've clicked on. I feel like I'm not getting any new information here..."
Check out the dashboard image below and note the highlighted area. There is an emphasis put on "Elements", "Instances", "Virtual Data Resources", and "Formulas". While this was an issue that was found all over the Cloud Elements app, it was especially present in the developer dashboard
My research found that these icons are crucial to the usability of the product. Yet, throughout the landing page, there is little explanation for what an 'Element' is, or what it has to do with the other features ("Instances", "Virtual Data Resources", and "Formulas").
This was frustrating for the developers we interviewed, who were left to guess and assume what these signifiers meant. Moreover, explainers or help guides could not be accessed easily.
Seeing that this concerned any immediate and intuitive understanding of Cloud Elements' product, it seemed prudent to iron out the content design here.
Problem 2: A Marketing-Heavy Voice and Style Throughout the Product
My research also found that many linguistic pockets throughout the product onboarding process were off-putting because, as one developer put it, everything seemed "too market-y".
Consider Cloud Elements' home screen, where the user was met with the following:
While API integrations might indeed "suck" for developers, it's probably best to discuss it:
-
More positively;
-
In less-colloquial terms; and
-
According to a voice that echoes an established style guide.
Here is another small example of a marketing-heavy product voice and style, which was found at the end of the sign-up process:
It seemed strange to label a CTA button with this sort of diction. Because it lacks clarity, it could likely create anxiety in the user: "Take me where? Where am I going, and what am I doing? What are you doing with all of the information I just entered above?"
Solution 1: Shape the Product Experience by Combining Clear and Useful Copy with Meaningful CTAs
In the wireframing stage, I tried to combine multiple visual and written signifiers that would allow the developer to understand the various product components.
Note the image below: the sidebar icons still exist but they connect to the "three pillars" of Cloud Elements' product. Not only are Elements, Virtual Data Resources, and Formulas explained in clearer copy, they are connected to CTAs that give the user a better sense of their utility.
Unfortunately, this approach was turned down by the UX lead, who wanted to find a middle ground: keep the original diction while offering quick-and-easy access to help.
With that in mind, I created a "Cloud Elements University" training section, which gave space for help materials right on the dashboard. In the research stage, the latter was identified as a problem to address, so this helped me kill two birds with one stone!
Note the before and after images below:
Solution 2: Craft Copy That is More in Line with Developer Expectations
I tackled the sign-up CTAs and gave them words that is more contextualized to the action at hand.
See the example below: this particular CTA follows a longer form and precedes an email verification page. Because of this, I framed this CTA as one step in a process -- "Click here for the next step in the process..." -- while creating progressive disclosure cues on the page.
Finally, concerning the Cloud Elements marketing page, I suggested a more positive summary of what Cloud Elements can do. And since there was no established style guide, I did my best to synthesize product explanations with something more marketing-friendly.
This suggestion was accepted by my UX Lead and the Marketing department and was later implemented. My copy was put front-and-center!
