CXCloud Mobile Licenses
Managing your Cisco network anywhere, anytime
Designing a new mobile experience through consistent and intuitive interactions. Saving Dev time and effort by utilizing common components and working with the design system team to ensure the desired experience is achieved.
What is CXCloud
CxCloud is a customer account portal that allows customers to see every Cisco product they own from an account level. Customers can view the products, take actions, and gain helpful insights to maximize their use of the products and services they own.
Cisco powers the networks of some of the largest corporations around the world and the demand for faster insights into network problems is growing.
Because mobile phones are always at our fingertips, one of the approaches was to create a mobile app that could deliver insights and notifications directly to our customers phones and allow them to understand the severity of the problem as soon as possible.
Challenge
72% of CXCloud users see value in a mobile view of licensing.
Everything that a customer owns from Cisco is represented in a license. From software to hardware you need a license to operate it.
No two offers are structured the same, so the way licenses are represented is often different. This creates a challenge to display the data in a scannable manner that also provides enough data to allow the customer to quickly find what they are looking for.
Process Overview
Page Inventory
To start I took inventory of all desktop screens and their capabilities to create a flow showing how everything connects. This gave me an understanding of the current IA, and what templates are going to be needed to accurately represent licensing.
Reviewing the research
I looked at research that was done to understand what is desired by the users and what is possible within CX Cloud.
What is currently possible in CX Cloud
Open a case
Troubleshoot (Smart licenses only)
Conduct audit based on usage
What is coming
License Renewal
No ETA / Distant
Block/remove a user’s license capability
Apply new licenses to assets (QR Code)
Upade devices covered by licenses (QR Code)
Trying on different styles
CXCloud desktop has at least 3 different shells with differing variations on each which caused a lack of consistency page to page.
Solution
Licensing Landing Page
From the research I learned that the user is only accessing the licensing page if there is a problem or notification. This leads us to prioritize notifications and quick access to specific licenses that might have an issue.
The user can still access the licenses list view if they want to, but that is secondary to the high-level license information.
Licenses Inventory
For the inventory I made the decision to move away from the table approach you would see in desktop, because the amount of data was difficult to digest on mobile in a table view. I elected to use a card system that got rid of the need for the horizontal scroll while maintaining the grouping needed to understand what you are looking at. While it is not as scrollable for larger inventories, I know that mobile users will be accessing this information looking for specific licenses which they can filter down or search for.
Linking it all together
Once I designed all the initial pages, I then went in and started designing the different states that exist within each page as well as showing how all of the page link together in a flow. This makes it easier for others to understand how it all connects from a visual perspective and helps me figure out if there are holes in the IA
Results
CX Cloud mobile is actively being built, and while this version of licenses represents the most up to date desktop designs, development wasn’t ready to implement the those, so we scaled back the design to basically just be the inventory page without the landing page for a MVP with the goal of pushing towards this version as V3.
