Product Design
CLEO INTEGRATION CLOUD - 2018
The most ambitious yet of their suite of B2B products, Cleo Integration Cloud is a cloud-based SaaS Cleo Communications launched in May of 2018. I designed every important aspect of this revolutionary new product's User Experience, from its overall content model to the core interactions on each of its key screens.
My proposed look-and-feel update. Usability tests proved users preferred this design to Cleo’s legacy aesthetic by a 4 to 1 margin.
Product featured in promotional video.
Rock star product gets rock star treatment
You know you’ve done a good job for your employer when they’re boasting about the product you designed in a promotional video and featuring that video on their home-page (as of these words in 2018).
Screenshot from Cleo promo video highlighting this product.
Outtake from Cleo promo video highlighting this product.
UX Design I rendered for this project
What about visual design?
Cleo had a PRE-ESTABLISHED look-and-feel to which all products were to adhere.
In previous projects for Cleo, I worked with the offshore contractor who had established this aesthetic to ensure there were no conflicts between his high-fi comps and my wireframes.
But because this project would comprise a bold new step forward in our product line, I suggested we experiment with evolving the look. And I got a green light for a proof of concept. In a head-to-head test, 80% of participants preferred the new, evolved UI Design I created (left) over the old one.
My position was that the new look was a smarter combination of our existing color palette. That it was a more modern look overall. And that the incorporation of a dismissable info panel (left, in blue), explaining the purpose of certain key views, would help reduce user hesitation — as the complexity of Cleo solutions often veered extreme.
However, at the end of the day, look-and-feel was not high enough on the product manager’s list of priorities. And I had to respect that.
We definitely had bigger fish to fry.
Starting from the bottom up by evangelizing process …
keeping it lean
Above all else, this exciting new product is the result of the thoughtful application of PROCESS at every stage of its design. From my seat on a cross-functional “Discovery Team,” I evangelized “Lean UX,” successfully keeping this project on course and helping to evolve the design culture at Cleo away from “Implementation-Model design” and “Big Design Up Front.”
Excerpted diagram from 'User Story Mapping' (O'Reilly, 2014)
Excerpted diagram from 'Lean UX' (O'Reilly, 2013)
keeping everyone on the same page
I also connected leadership’s high regard for thought leaders like Marty Cagan and Jeff Patton to the absolute necessity of more and better prototyping. The effect was immeasurable. My prototypes did more to keep this project on schedule than any other single factor. I used them to establish and maintain shared understanding across a crossfunctional team. And these prototypes ensured ZERO developer time was wasted along the way.
Information Architecture (IA) …
designing the core concepts
Information Architecture (IA) encompasses the design of a shared information environment’s overall structure.
Not to be confused with data architecture, IA is NOT technical. Some have compared it to chess in the sense that you don’t see the rules, but the game is meaningless without them.
And just as IA is often invisible, evidence of the countless design decisions that go into a product’s IA can be just as elusive: When a Visual Designer creates a mockup, everyone can plainly see the evidence of his work. But when an Information Architect makes a design decision about how a system’s navigation would best serve the user, for example, the artifacts she’ll produce to capture that decision can be arcane and the evidence justifying it spread out over the course of the SDLC.
In short, it ain’t always exciting.
What IS exciting, however, is dominating your market by empowering your users with a product that is more logically organized and easier to grasp than your competition’s.
And a well-written IA Spec is very exciting to the stakeholders who can appreciate them — like the developers coding your solution and the product manager who sees how it will drive business value.
Here we see excerpts from just a few of the numerous IA documents I authored during the research, strategy, design, and implementation stages of the Cleo Integration Cloud project.
All of the IA work I did for this project drove discoverability for our personae, ensuring they could begin using this product for its intended purpose the moment they touched it — without training and without help files.
An effective enterprise product consistently educates the user as to its content model and reinforces it with every interaction.
I had a friendly relationship with the gentleman who wrote Cleo’s training manuals but he was always complaining that I was trying to put him out of business.
Guilty as charged.
Ideation …
From sketch to production
There can be no more satisfying an experience for a UX Designer than watching the spark of an idea you scratched into your sketchbook one night grow and evolve into the user experience at the heart of a major new enterprise offering. Users of Cleo Integration Cloud access its core functionality on this, the Data Flow Details page. In the below sequence of images, we see this view evolve from that sketch to production code.
The core experience of this enterprise product started with this sketch I drew in the spring of 2017.
My next step was building this rough proof-of-concept prototype in Axure for key stakeholders to play with.
Using the feedback I got from the POC, I next built an immersive, ultra-functional Axure prototype, applying the "sketchiness" feature to ensure the stakeholders I tested it with never mistook it for production code.
Screenshot of this view in production.
Interaction Design (IxD)
Axure prototype
If a picture is worth a thousand words, a prototype is worth a million. The work I did for the below enhancement is emblematic of the Interaction Design I delivered for the project overall. This highly-functional Axure prototype enabled every stakeholder to experience the enhancement it modeled before a single line of code was ever written. Including multiple key edge-cases.
follow-up wireframe
This is an excerpt from the followup wireframe of the enhancement shown prototyped in the above video. The wireframe is typical of the dozens I authored for this project.
While prototypes like the one shown above are crucial for promoting CLARITY, a rock-solid followup wireframe drives CERTAINTY by formalizing a finish line for your developers. Which is often especially necessary for offshore teams, when cultural and language barriers become a factor.
Epilogue, 2025
Still going strong after seven years!
Cleo’s Web-site in 2025, showing this product still going strong after 7 years!
As of these words in 2025, some seven years after we launched Version 1 and I left Cleo’s employ, Cleo Integration Cloud still forms the backbone of Cleo’s enterprise software offerings. It’s grown and evolved but I am told by my former colleagues that many of the key views and core workflows I designed SEVEN years ago are still in use!
I can’t imagine a better testament to the staying power of careful, sober, and rigorous UX Design work.
The success of this product is by no means something I myself am solely responsible for — far from it. HOWEVER, for three and a half years, across four separate products, I was absolutely the missing piece on a team of extremely knowledgeable and dedicated product people and engineers.
No product manager can double as the UX Designer for their product (or vice versa!). In over 20 years in enterprise software, I have never seen one person do both jobs effectively. Nor is there a number of developers you can hire that will obviate the need for a dedicated UX Designer.
No project in this portfolio better exemplifies the fact that empowered users are your best customers! Contact me to talk more about it!