Cleo Portal
In 2016 Cleo Communications needed to overhaul their VL Portal solution for the benefit of customers like Target and Ryder. And the User Experience of this SaaS topped the list of needed upgrades. As Cleo’s Senior UX Designer, it was my job to ensure this product would enable users to interact with Cleo’s proprietary on-premise Versalex platform through the Web in a more usable and elegant way. The new version of this product was called Cleo Portal and the the results of my work were highlighted in this segment of a Cleo promotional video.
Outtake from a 2018 Cleo promotional video produced by a third party. Clip starts at the sequence where this product is highlighted.
Production screenshot.
Outtake from Cleo promo video highlighting this project.
UX Design I rendered for this project
What about visual design?
Cleo had a pre-established look-and-feel to which all new products and features had to adhere. I directed Cleo's Visual Designer and Interface Developers in applying that pre-established aesthetic to the sundry screens I spec'd in my wireframes.
So what was my job? Every other dimension of UX Design: Information Architecture. Interaction Design. Usability Testing. Prototypes. Wireframes. Process. Methodology. For more on how these various UX disciplines interrelate, here is an excellent overview. You may additionally find this Venn diagram particularly instructive.
Identifying a unique need for self-evident usability …
When this project kicked off I had to that point only worked on REFINING Cleo’s existing products. But this time we were starting over from scratch. Before I did anything, I began by evangelizing a key distinction in this solution’s purpose as compared to Cleo’s other enterprise offerings: This product was more likely to be used by people who were NOT Cleo customers. People who were customers OF OUR CUSTOMERS. And THESE users did not have access to any of the training material we typically offer. Or to our help desk.
In short, I isolated a persona that was more or less ON THEIR OWN and experiencing our product in a way more akin to a consumer’s experience with a B2C product.
This meant the new version, more than any of our other products, had to be self-evident in its purpose and in its use. And that starting over from the ground up was the perfect opportunity to provide more than just a new paint job.
Delivering accessibility through ADA / 508 compliance …
Building accessibility into your product broadens your user base and helps ensure government contracts aren't denied. I lead the design and implementation of accessibility for Cleo Portal. This five-minute video overviews key highlights from that effort and shows why compliance is critical.
Updating the password experience …
More than any other, the work I did to modernize this product’s password management experience is emblematic of the exhaustive IA work I rendered for this project. And thanks to the rigorous content mapping, revised content models, competitive analyses and prototyping I delivered, the new pattern was established for ALL of Cleo’s enterprise offerings at the time.
In the below video, the developer who coded it demoes the result of my design in production. A quick reminder here that the colors, fonts and iconography shown were the domain of our VISUAL designer (see sidebar above near pie-chart). The role I played in terms of look-and-feel here, was to direct that Visual Designer in the application of his pre-established aesthetic to my wireframes.
Interaction Design (IxD) …
The comprehensive wireframes I authored for this project ensured complex features like this went to code, passed QA the first time, and never needed refactoring.
Excerpt from a wireframe I authored.
Usability …
When I designed the simpler user account experience shown here, certain stakeholders were concerned users wouldn’t know how to log out. To allay these fears, I wrote a test that proved users would still know how to log out.
Excerpt from the rhetorical analysis I authored for this effort.