This prototype's purpose was to be a guided tour to validate several business use cases. While it is a lot easier to follow with a guided narration there is a lot that you will be able to explore on your own. If you are new to viewing prototypes created in Figma you can click on the sides to get hints of where you can interact. There is plenty of scroll, mouseover, drag, and click interactions. Note not every mouseover has a click destination.
This prototype has been optimized for a 1440 X 1024 viewing and it may take a few seconds to load.
The making of
We decided to start with Chalie the CIO persona as his use cases were would span the most interactions and he would also be a primary purchasing agent for the Corderum services. To set the stage we start with Chalie's profile page. While knowing that this page comes before the log in screen we did this to help the audience understand what screens we would show.
After the log in Charlie lands on his own Workspace landing page that also gives the viewer the first look at an employee view in addition to the company views and the marketplace. From this first page, we can go in many directions. The top toolbar has direct links with mouse-over tooltips to the reporting and analytics, user management, profile, and catalog pages.
The left panel is where Charlie is able to see a summary of all the subscriptions for the entire company, or he is able to drill down to particular roles that he manages. For the prototype, I wired up the top two roles (Leadership and DevOps teams). I also demonstrate the concept of being able to look at subscription usage by a project. *Note there are no clickable examples here.
We also demonstrated some catalog features like being able to scroll vertically, or being able to do quick filtering. For example on Charlie's workspace page, he is able to filter subscriptions by dev environments and also do an additive filter to also include dev tools.
Then we wanted to give our viewers a sample of the marketplace and see a full category filter selection. Our use-case then proceeds to the "Communication" section and then further filter to video collaboration apps like Zoom. When Charlie clicks Zoom we demonstrate three paths, first a purchase path with a dynamic pricing slider, and a second and third set of paths for applications Acme already has accounts with. In each of these paths, we demonstrate how Charlie can either manually input the companies subscription data or ideally use an API key to dynamically populate subscription, usage, and operational data. The second and third paths also demonstrate functionality like being able to view the subscription true-up details as well as see ratings and usage analytics.
To end the demo we take charlie to the user management screens where he is able to drag interact with a tree view and click jump to links of the entire employee structure. And last for the finale of the demo we take the user to the reporting and analytics page where Charlie can see company-level KPI's, vertical scroll scrolling trend bar charts, and industry comparison data.
This demo also makes use of custom light and dark mode style themes, responsive layouts using auto-layout , Google Sheets Sync to populate the majority of data and many new interactive variant components.
Here is a screen capture of all the prototype connections not including the interactive variant components.