One of the most consistent challenges in designing for your customers’ digital experiences is understanding what things they’ll be doing when, which in turn governs what device they’ll be doing those things on. Will it be on the couch with a tablet? On the go with a smart phone? At work on a laptop?
On the Cisco digital team, we do a lot of research and planning on this very topic, and have found that some tasks are very time/device specific (such as looking up appointment information or background information on your phone right before a meeting) while some are more broad and could happen anywhere, such as checking product information or searching. To illustrate this better to our teams internally, we put together a storyboard to illustrate how our customers and partners use multiple devices (desktops, laptops, tablets, smart phones) within the course of their day when interacting with us and each other. Here’s a panel from it:
What this doesn’t show is that there are also “could happen anywhere” cases. These are often the most mundane of things, but important ones. For instance, our login page on Cisco.com receives more than 2,000,000 visits per month. But when we took a look at the mobile part of the login experience, we knew something had to be done!
The most obvious problem with this page above is the teeny tiny type. And then, to use it, you have to stretch and zoom to get the fields big enough to even type into. It was, as we euphemistically say in the tech biz, “suboptimal.”
One solution would have been to create separate login designs for large tablets, small tablets, phones and desktops. Instead, we chose a smarter way, using Responsive Design, which I have blogged about previously: We used one “smart” code base that adapted the display for the size of the current device. The result was very simple and very nice: A clean login page we launched recently that retains its normal behavior on the desktop browser, but shrinks to fit for tablets and smart phones. It’s a simple example of where Responsive Design saves time in deployment because we could write the code once and put it through one development and test cycle, rather than creating three or four different experiences and having to develop and test them all separately.
Responsive design doesn’t solve every problem — and there are many, many experiences on mobile that need to be designed specifically for venue and device. But use responsive design where it helps save time and money, and can provide some consistency in basic behavior.
Thanks to our mobile, design, and IT teams for pushing this out. Enjoy!