On a very basic level, avertising is designed to grab people's attention and then deliver an experience.
And games are the most interactive experience that takes people from whatever they where doing in real life and puts the player into a magic circle transporting them to a whole new world where each new power up, level progression, and point system that follows a style guide and compliments content.
My designs give meaningful play leading to in-game conversion of a player to a customer.
In this post, I use a B-to-B platform to show my thought process of improving an existing project list and detail view.
Identifying the KPI (Key Performance Indicator) is essential in a B-to-B platform. In this case and in this view, Portelo focuses on three important questions for project management: who the client is, where the project is in time, and budget.
The existing project management screen shows a list of projects with numerous columns of information. What is the most useful immediate information that managers want to see when they glance at this screen? Right now, everything has an equal weight.
In an effort to make the project management screen more useful, a project progress bar is including in the space provided for the status. This view quickly let's the user know in a visual way what the status is of a project. But what can make this view even more engaging?
By going back to my experience in game design, having the projects laid out in a grid view with each project being its own card with attributes, seems like a good idea to me. But I'd like to know if users think it is a good idea. The card is designed to easily recognize a project by the brand, then tell the viewer how soon and how much points they can get. What happens when a card is chosen?
Here is an existing project detail screen on the left, and an improved design on the right.
All the viewer really needs to know is what to do next. Using Portelo's existing color scheme, the call to action is shown in the upper right which when clicked will lead to the project progressing. The current project progress status is in the upper left with three sections clearly shown below basically showing the who, what and when of the project.
References:
1. Judy Shapiro of EngageSimply and her post on How to Close the B-to_B Ad-Tech Gap
2. Wikipedia's reference of the Magic Circle
