#SWDchallenge: redesigning for mobile

in

This month's #SWDchallenge comes from guest author Andy Cotgreave. Andy is an Evangelist at Tableau and the co-author of  The Big Book of Dashboards. He shares his thoughts on data regularly as a contributor to Information Age, and on his long-running Gravy Anecdote blog. We are fortunate to have him take the time to build this challenge for us this month. You can connect with Andy on LinkedIn or Twitter, or follow his Instagram feed. 

Hi everyone, I’m Andy Cotgreave, and I’m delighted to be hosting the #SWDChallenge this month. 

Most of us are lucky to have large screens or multiple monitors to design on. The temptation to pack loads of information into a display is difficult to resist. But resist we must: mobile is mandatory. As such, your challenge this month is: find a chart or dashboard you originally designed to be consumed on a monitor, and redesign it for mobile. 

In tackling this challenge, think about what your original version was intended to do, and then consider the mobile equivalent of that. Designing for mobile means simplifying. You have to consider the form factor and the minimal screen real estate. 

  • Should you allow scrolling? If so, should that be left/right or up/down? 

  • Should you stick to a single screen? 

  • What if this were going on Instagram? Then you’ve got only a tiny square to be creative with. Can you convey the core message of your dashboard or chart in one limited space?

Here’s a look at a dashboard I remade for this challenge.  This year, I’ve got a goal to walk or run 1,000 miles (that’s 1609km). I’m tracking my activities using Strava, and visualising the results in Tableau. Below is my monitor-sized dashboard. As you can see, I’m at 900km so far, and I’m on target! Phew. 

original-dash.png

In thinking about this challenge, I created three different types of mobile displays. 

#1: A scrolling, mobile dashboard

The one I use the most is my mobile-designed tracker. 

mobile-version-mlc.gif

Straight away you can see the main change: I’ve gone from a landscape view to a phone-width, scrolling view. Some people might argue all dashboards should fit on one screen. I disagree. In this example, I’ve deliberately created the sense of two views: the current year’s data is visible first, and the historical data is found by scrolling. It’s a bit like having two pages, but accessible with just a thumb swipe. 

#2: A multi-image Instagram post (pseudo-scrolling)

In my mind, as soon as I think “mobile,” I quite often think “social” soon after. So that leads to an obvious question: how would I share something like this on social—on Instagram, for example?

My first thought was to create a left-right scrolling experience, to create a sense of story. I created four square snapshots and posted them on Instagram as four photos in the same post (using a technique I first saw used by RJ Andrews).

insta-version-mlc.gif


You can take a look at the Instagram post here.

I’m not sure how much I like this. I think it works, but if my mobile platform is Instagram, is this the best way to show it? I can’t say for sure. In developing mobile solutions for traditionally desktop-based experiences, I’m on as much of a discovery path as you all are.

#3: A single-image Instagram post

Finally, I considered what if you take “mobile” to the ultimate end: a single Instagram page…just one square?

For this version, I would have to focus on creating the Minimum Viable Viz. How much information could I take out while still maintaining the overall message, along with adding some visual impact for good measure?

single-insta.png

To pare things to a minimum, I reduced my dashboard to a single image. I simplified the title and enlarged the labelling. I did choose to maintain the commentary sentence at the bottom. This way, my mobile version is a punchy image (at least, I hope it is!) and continues to have details on demand. 

For those who are interested, I’ve written much more detail on the transition from desktop to scrolling mobile dashboard on my own blog.

Those are my three redesigns. Now, it’s your turn. Good luck with the challenge, and I look forward to seeing what you all come up with! 

the challenge

Select any chart or dashboard you have previously created to be viewed on a monitor, and redesign it to be optimized for mobile. 

DEADLINE: Friday, August 9th by midnight PST

SUBMISSION INSTRUCTIONS: Upload your visual and related commentary via at storytellingwithdata.com/SWDchallengeSUBMIT. (DO NOT EMAIL: we are no longer monitoring the old alias!) Feel free to also share on social media at any point using #SWDchallenge. For inclusion in the summary recap post, submissions must be officially submitted to us  (still a time-intensive process and we aren’t able to scrape Twitter and other social media sites).

Stay tuned for the recap post in the second half of the month, where we’ll share back with you all of the visuals created and shared as part of this challenge. Also check out the #SWDchallenge page for past challenge details and recaps. We’re excited to see what you come up with this month!