Corderum Prototype
Guided tour
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.
The making of the Corderum prototype
pushing the boundaries
Pushing the boundaries of interactions from a design tool.Here is a screen capture of all the Figma prototype connections not including the interactive variant components.
Choosing a persona
We decided to start with the persona "Chalie the CIO" as his use cases 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.
Personalized Landing page
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.
Summary of subscriptions
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.
Filter & Scroll Interactions
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.
Marketplace
Purchase & Account Options
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.
Analytics &
User management
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.
elements of this prototype
-
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.