Mobile

UX Challenge: 

Helping train commuters nap without missing their stop.

Expanding my skillset during the Pandemic, based on a prompt from uxchallenge.co

The Cozy project was inspired by my desire to work with mobile apps.

Designing for desktop, I'm used to a certain amount of real estate for instructions before I'm at risk of subjecting the user to information overload. In a mobile landscape I knew I'd need to minimize text copy and rely more on iconography and visual affordances to ensure usability. I've wanted to test and expand my skills in this area for a while now.

Since mobile projects aren't available at my day job, I chose a practice exercise from Yachin You's uxchallenge.co

The Transportation App prompt calls for a solution to help tired train commuters catch some shuteye without sleeping through their stop.

I set a 2-week deadline for this project, since it would be done after work and because I wanted to validate my design choices with some approximation of user testing.

First feedback: Personable, not personified.

In early prototypes I wrote in first person perspective, saying things like, "We'll wake you at your stop." 

Over time I suspected (and testing confirmed) that personifying a location-tracking app could unnerve some users, negating efforts to make it feel comfortable. So I swapped out "we" statements for slightly less personal phrasing.

That feeling of reassurance and ease was at the heart of the experience I wanted to create for the users of the Cozy app. 

To get started planning the user flow, I mulled over the experience of asking a friend to make sure you don't miss your stop:

A helpful friend will agree to wake you.

A thoughtful friend might ask how soon before your stop you'd like to be woken. 

An especially thoughtful friend might even remember that preference and offer to wake you again if you ride the train together later.

"I'd sleep a lot better knowing someone was waking me up." 

- Logan T., tester

Using device location to cue alerts

"So how will it know when to wake me up?" almost every user asked before testing. 

It was my first question, too. Although I don't code right now, I do make efforts to empathize with what the developer might have to do or learn to implement the product taking shape. 

Alarms are typically time-based, but since trains don't always run on time, location-based alerts would provide greater benefit to the Cozy user. 

Which location, though-- the phone's, or the train's? 

In a phone-location model, if the user's phone loses signal their alerts may be delivered upon arrival instead of before the designated stop. But a few search results into train-tracking mobile apps revealed hit-or-miss availability, with causes ranging from lack of resources to security concerns. 

Using device location would make the app availalbe to far more users. 

Accounting for the possibility of dropped signal, this meant the app would wake users at their station instead of before. 

There was also a positive trade-off, though, in the capacity for features like detecting proximity to a favorite train route and prompting the user to enable an alert. Users who fall asleep without meaning to might see that pre-boarding reminder as indispensible!

UI Design

I wanted the Cozy experience to feel as easy and comfortable as asking a friend to wake you, so I aimed for minimalism in my design approach: 

I also made sure to include feedback, like pressed button states and an "alert scheduled" card at the top of the home screen, letting the user easily confirm and even make changes to an alert they've just scheduled.

Validating the UX

User testing during social distancing

Knowing I'd need to test over video chat, I asked friends and family to run through a hi-fi prototype-- making sure to choose both train commuters and drivers, city-dwellers and those in the suburbs, and participants with varying levels of comfort with technology.

Prior to the meetings I wrote and rehearsed a test script to ensure I wasn't using the names of screens or buttons, or any terminology that might skew my results one way or another.

During each test I ran the prototype in Figma and gave the user control of my screen with our videos pinned to the side. I scribbled brief notes, trying to maintain eye contact, and asked them to think out loud as much as possible. 

As I'd hoped, visual cues captured users' attention immediately and aided comprehension on a subconscious level, reducing the cognitive load of navigating the app.

For example, when I asked, "Suppose you wanted to see if there was a way to add light or vibration to your alerts, where might you expect to find that," users would instantly mouse over the 'Settings' icon before pausing to say something to the effect of, "Well thinking out loud I'm not sure what exactly it would be called but I'm thinking this gear icon is a Settings menu? Either way I'm pretty sure I'd find those options here." 

Some even clicked the button before finishing their sentence. Their hands and eyes were confident before their brains had formulated the concsious thought.

Apart from one unexpected outcome-- a button originally labeled 'Schedule' led one tester to expect to see a train schedule-- all five users made it through the test tasks quickly, without confusion, and with some degree of enjoyment. Overall, I was thrilled to see that my design process was working the way I intended!


Feel free to click through the user testing prototype!

Future improvements

If I were to take this challenge into part two, I have ideas for a few feature add-ons and improvements:

As for my approach, I think I'd try user testing with a paper prototype next time, prior to creating hi-fi mockups. Maintaining a component library helped a lot time-wise, but even so I believe I could've saved myself some time spent revising the mockups and the prototype.

That said, I learned a lot during this project and look forward to learning more!