Interaction Designs

Below are some simple examples of interactive mockups that show the way that I have been creating testable prototypes recently using Marvel.

Shootout App

“The Shootout” is an annual unsanctioned race at Lake of the Ozarks where people from all over the world bring their boats to see whose can go the fastest in a mile.  There is a radio broadcast on which the announcers do a great job but the radio medium leaves a lot to be desired.  It’s often hard to hear over all the music and fans, there’s no way to rewind if you miss something, and there’s never a lineup of racers announced.

After the 2016 Shootout I read a lot of chatter about how an app would make the fan experience much more engaging.  So, I took a stab at mocking up some of the requirements I heard.

Shootout App Marvel Mockup

Experience Platform – App Structure – Mobile

I put this mockup together to illustrate the high level interaction patterns my team and I have been working on for the Lexmark Enterprise Software Experience Platform.

The mockup allows you to:

  • Select items in the grid to display the reactive toolbar
  • Drill in and out of an item (a document in this case)
  • Open a page
    • Open the overflow menu
      • Drill into an item from the menu (Page Properties)
    • Display the Sub-toolbar (Annotate icon from the open page)

App Structure Marvel Mockup

Invoice Approval Experience App – Mobile

In an effort to exercise the patterns defined above I mocked up an app for viewing and approving invoices.  Currently my favorite way to rapidly get out a shareable prototype is to leverage both Balsamiq and Marvel.  I created a set of Balsamiq assets that includes the most commonly used UI components from the Experience Platform.  I packaged up those assets into a distributable installer (video overview) so that it’s really easy for product owners to run through an install wizard then quickly put together a concept to help facilitate conversation.  For early concepts I typically create a wired up prototype in Balsamiq then once I have it feeling the way I want I export everything to PNGs.  I upload the PNGs to Marvel and wire it up again so that it is more realistic feeling, mobile friendly, and easy to share and user test.

This mockup starts at the Experience Platform Home.

You can:

  • Open the Invoice Approval app to the root of the app with the shortcut
  • Click the widget card to deep link into your assigned tasks
  • Open up your first assigned task
    • View the task’s properties
    • View the first attachment (which would be a receipt in this case)

Invoice Approval Mobile Marvel Mockup

Invoice Approval Experience App – Desktop

Below is a link to the large form factor mockup for the Invoice Approval app.  Embedding the desktop form factor size doesn’t make for a very nice experience, please pardon the inconsistency. 🙂
The mockup covers:

  • Preview the attachments from the grid
  • Approve the tasks from the grid
  • Drill into the object
  • At any screen in the mockup you can open or close the Info Panel (properties icon on the right) and the panel will remember its state.

Invoice Approval Desktop Marvel Mockup

Lakefront at LOTO

This is the prototype that I used for user testing my Lakefront at LOTO Android app before I built it.

Lakefront at LOTO Marvel Mockup