A few months ago I came across an interesting project management dashboard mockup by a UX designer named Becca Schmidt. I contacted her and asked if I could implement her design using SAP dashboards. I was particularly interested in trying to build it for mobile since it really looked like an iPad app to me. Read on to see how I implemented her mockup displayed below..
In general the design looked crisp and fresh, and certainly more like an application. Since this is going to be an expectation of some customers as we start to build more mobile dashboards, I felt that this would be a great dashboard to implement. While Becca sent me a good resolution version of the dashboard, and offered to supply any of the icons, I decided to build my own in PowerPoint so I could reuse them for future dashboards and presentations.
Here is a quick snapshot of my growing dashboard UI toolkit:
For the implementation of the dashboard, I used offline data so that I could attach the exported HTML version here for display. If you would like to see a demo in the SAP application, then please send me an email to josh (at) data-ink.com. One of the first challenges that I had was the limited screen real estate. Ultimately I decided to cut out the upcoming tasks section and figured that I would implement that later if I had time. This could very well be another screen and should probably open to a larger calendar and possibly a gantt chart. That seemed out of scope for this effort.
Because there weren’t any complicated tables in this example, both the desktop (Flash) and mobile (HTML5) versions came out very similar. I had a few difficulties with icons not appearing correctly at first, but I was able to overcome the issue when I reduced their size and corresponding file sizes. I ultimately decided to use buttons to select employee names, which would not work well if there were more employees add to the list, but ultimately this design is very specific regarding space utilization and wouldn’t be as stylized if it had to allow for much larger data sets. Please feel free to share your thoughts or comments either here or on Twitter (@josh_tapley).
Becca’s original blog post and design can be found here: www.beccaschmidt.net/#portfolio
Here is the Mobile version (Click image to launch) – Click the ‘Change Data’ button to cycle through some sample data sets:
Here is the Desktop version (Click image to launch):