Your friends at Viget present Inspire, a Design & Interaction Blog

The DC Metro: Thoughts on Design, Behavior, and Escalator Etiquette

I would hardly count my commute on the DC Metro as my favorite part of my day. Metro is notorious for having service problems and delays, sometimes major – often making commuting a trying experience.

While infrastructure is certainly to blame for the Metro’s larger issues, other problems, such as inefficiencies in how Metro riders move through the system, are caused by design. It’s common to see people blocking doorways, walkways, and escalators – not out of rudeness, but out of a lack of feedback from their environment on how to behave.

This is great news for someone like me, though, because I’m a user experience designer and know a thing or two about solving experiential problems like these. Below, I’ve outlined some proposed solutions ranging from practical and inexpensive to conceptual and pricey.


Experiments in Loading - How Long Will You Wait?

Intro

Entering Viget’s summer internship program, I was asked to devise a solo user experience project. Once I came across past Viget UX experiments I knew I wanted to add to this body of research. I quickly honed in on studying the ubiquitous digital experience of the loading animation.

 

Background

Waiting for something to load can be boring, especially on the web. By making a loading screen less generic and more novel, we might be able to make time seem to pass more quickly or even make the wait more pleasant. I set out to see if a novel branded loading experience would in fact make users more willing to wait longer for a page to load than an unbranded generic loader.

The first step I took in devising my test was to create several Viget branded loading animations (pictured below). I wanted to create animations that were comparable to the common generic animation you see populate the web, like the spinning pinwheel or loading bar.

 

 After several iterations and a few critiques I narrowed my test animations down to three branded and three unbranded animations (pictured below).

 

Experiment Design

The experiment (which is still active) was created in Optimal Workshop’s screenshot click test, Chalkmark. Over the course of a week, 106 participants took the test.

The entire test was, in effect, a deception. After agreeing to begin the test, participants were presented with a loading screen ahead of the first task. What users didn't know was that this loading screen was never-ending, and that they were already being tested. The test recorded how long participants would wait before deciding to abort the test or click the link that said "Click here if the test does not load.”

Of course, that usability test never appeared. Participants who clicked anywhere on the screen were routed to a screen that thanked them and informed them that they had just participated in an experiment to test users’ willingness to wait during loading experiences.

During the loading screen, each participant was randomly shown one of six different loading animations.

 

Experiment Results

 

Analysis 

Despite some individual variation, novel loaders as a whole had a higher wait time and lower abandon rate than generic ones. Individually there were no clear ‘winners’, the ‘Branded Orbit’ animation kept users on the page for the longest time, but also had the highest abandon rate among the novel branded experiences. The ‘Loading…’ animation, while having the second highest average wait time, had a significantly higher number of participants abandon the page compared to all the other animations.

Overall, the branded loading experiences as a group held participants' on the loading page for longer, and had lower abandon rates than the non-branded, generic experiences. I’d surmise that this could be due to participants...

  • assessing the experience they are waiting for to be of more value because time was put into crafting a unique loading experience.
  • becoming fixated on the colorful and novel aspects of the branded animations.
  • readily perceiving the generic loaders as being fundamental errors within the site.

 

Conclusion

Of course more data needs to be collected to have a concrete conclusion. If I could expand the experiment I would love to test how long a user would interact with interactive loading experiences like the mockup below.

I hadn't expected to spend my summer testing interaction design patterns, but I'm grateful for the experience. This whole project taught me a lot about the processes involved in testing, and gathering UX data. I entered the project feeling like a designer, but I left feeling more like a scientist.


5 Things I Learned from the Viget Design Team

Beginning mid-June, I started my time as a bright-eyed, bushy-tailed design intern at Viget. Over the course of 10 weeks, I picked the brains of the talented design team here and have learned a few things - very evident through my now brimming Evernote notebook ­titled, “MY VIGET SUMMER”

Though it’s nearly impossible to record everything, I’ve picked out 5 relevant points, summarized here: 


Introducing Fare: E-Z Pass for the Metro

In January, I moved to Paris for a semester abroad. I adored the art, the café filtres, and even the metro. One thing I didn’t love, however, was trying to make the train for morning classes. I always seemed to get stuck rummaging through my bag for my NaviGo pass as the Gare d’Austerlitz-bound train wooshed past below my feet.

When I started my UX internship at Viget, I needed a topic for my 10-week long solo project. My advisor, Samara, urged me to find a problem and ‘UX’ it. The options were endless: I could solve boredom while jogging, pretension in coffee shops, and even waiting at the DMV. But I remembered the countless last-minute searches for my train pass (inevitably at the height of rush hour) — be it my NaviGo, my Charlie Card, or my St. Louis MetroLink pass. Why wasn’t there a multi-city payment app for public transportation?

Well now there is. Meet Fare*, an app that solves the problem of the tiny-yet-cumbersome subway card — like E-Z Pass for trains and buses. (View a clickable prototype on InVision).  

Fare is lightweight, and opts for simplicity above all else. It replaces subway cards, so users just add a credit card to their accounts and scan through the turnstile using Fare’s QR code. The app works city to city, so it’s the same experience, say, on the bus in Boston as it is on the train in Chicago.

Fare was not only a chance to work on my user research, sketching, and animation skills but it was also a valuable learning experience. Here are some lessons I learned along the way.


How to Hold a Remote Design Studio

A design studio is a group brainstorming session where participants sketch, share, and iterate in order to explore various design directions and come up with new ideas.

Usually, design studios are held at the start of a project. In my case, however, my mentor suggested that I hold one during a transitional phase in my summer project. I was shifting mediums from a somewhat static text document to an interactive web app, and wanted to get some fresh perspectives and energy.

My Viget colleagues were eager to help out, and I managed to put together a diverse team spanning design, development, business development, and user experience across our different offices. This added a challenge—running a design studio remotely—but the result was well worth it. I couldn't have asked for a better group.

Today I want to share five things that helped our remote design studio run as well as it would have in-person.