Featured Work   |    UI/UX   |    Visual   |    About

featured work

Hoodies NYC: For the Urban Explorer

I once posted on Facebook, "Courtesy is contagious. And it depends on you." A friend recognized this as a PSA from the Metropolitan Transit Authority and replied that I spend too much time on the subway. Sadly, this is true. The subway is such a part of the New York experience that it became the source of ideas for a native mobile app (ask me about the one inspired by Skyrim.) Here's the process I undertook, which I've divided into four phases: Information gathering, strategy, design, and testing.


I. Information Gathering

User Research

I interviewed eight people, five men and three women of ages 17–68, ranging from experienced commuters who lived in Tokyo to those who have never been on a subway or to New York before. Current locations included New York City, North Carolina, Florida, Michigan, the San Francisco Bay Area, and Stockholm, Sweden. The interviews were a mix of in-person meetings, remote video chats, and very long mobile text chat sessions (one shown above.)

Insights:
Most travelers would simply ask natives or personnel at stations before consulting a tool.
There are two types of travelers: those who plan their trip and those who just "wing it."
Everyone refers to a map.
People who have never been to New York are concerned about their safety.
Basic knowledge of a city is helpful for the new resident.
The quality of the visual / interface design plays a big role in the user experience.
The hard part about navigating a new city is not necessarily related to the trains.

Quotes:
"The first thing I’d do is ask a local for advice."
"(For Paris) I did research beforehand. Months before the trip I went went online to study the (transit) system."
"The thought of being underground with a bunch of strangers kinda freaks me out."
"Having a 101 onboarding app to a new city would make it less overwhelming.”
"The design is suuuuper important. If it’s all messy and complicated, I lose interest very fast.”


Personas and User Flows

From my interviews I made two personas which represent the people I spoke with—the new New Yorker and the veteran commuter. The new New Yorker persona also encompasses tourists, who all expressed safety concerns during our conversations.

Persona: Lucy

"I would love to see more of New York City but it's all kind of overwhelming."

Persona: Lucy
Aspiring Urban Explorer

Age: 22
Marital Status: Single
Occupation: Account Executive
Location: New York, NY


Lucy is from a small town in Michigan and moved to New York City last month. She lives with roommates in an apartment in the East Village and takes the subway to her office in midtown. She didn’t have public transportion in her hometown...

Here's Lucy's user flow. She's headed to a 9PM concert at the tennis stadiums in Forest Hills, Queens after work. Her office is in Manhattan. Purple boxes indicate areas for opportunity for me as the designer.

User Flow: Lucy

Text of graphic: Inputs venue on Google Maps website > Researches venue's neighborhood for feel and safety > Looks for subway line options and plots route > Walks to the station and boards train > Gets off train and uses nearest exit > Uses Google Maps app to locate herself and plots route to venue > Has 60 minutes before concert; walks around > Enters a café > Geolocates herself and heads to the venue > Finds the venue and attends the concert > Geolocates herself and inputs home address on Google Maps > Heads home


Persona: Lucy

"Time is very important to me. And I hate being late."

Persona: Yasu
Savvy Business Commuter

Age: 43
Marital Status: Married
Occupation: Chief Technology Officer
Location: Newton, MA


Yasu was born and raised in Yokohama, the second most populous city in Japan after Tokyo. He went to business school in England and worked in Germany. He is a confident, experienced, multilingual traveler who isn’t anxious using any transit system....

Here's Yasu's user flow. He has a business meeting and is planning his trip with a laptop in his hotel room.. Dark blue boxes indicate areas for opportunity for me as the designer.

Text of graphic: Logs onto Google Maps on his laptop and enters his start and end points > Opens the Schedule Explorer to review route options and times > Choose a route > Copies the share link and emails it himself > Takes the Google time estimate and adds a 30 minute buffer > Leaves his hotel > Enters the station; buys a MetroCard > Finds the subway platform and boards the train > Looks at the train's subway map to see how many stops are left > Exits the train and heads out the nearest exit > Opens the Google Maps link he had sent himself earlier > Goes to the meeting

User Goals and Problem Statement

For the Lucy persona, the problem is how to enable someone who is overwhelmed and anxious to travel throughout New York City using public transportation.

For the Yasu persona, the problem is how to streamline the commuting process, from the time he identifies his destination to the moment he’s physically walking to it.

Therefore, the user goals are:

How might we make exploring New York City less daunting and more manageable? How might we make taking the subway less anxiety-inducing for those concerned about their safety? How might we simplify the trip planning process? How might we shave time off one’s commute?


II. Strategy

I downloaded a number of apps and took inventory of their features and noted their user experience. I was impressed by Google Maps, the king of map apps and as close to being everything a traveler could want in a wayfinding app. But to me that is also an area of possible criticism; the interface is working so hard to reign in the power and features that it is pushed to the limit. Could there be a simpler way? As for the other apps, I found them uninviting for the newcomer to New York and I'm an experienced commuter. The following are all home screens—the first thing you see when opening the app after any onboarding.


For the feature inventory below, I looked at both navigation apps as well as location discovery and guidebook apps.

I also did feature prioritization and affinity mapping.



III. Design

Sitemap

An early version of the sitemap. I would later revise this based on speaking with people. For example, I had put in "How fast do you walk" to help people like Yasu more accurately generate trip time estimates but it's so variable (is he carrying something heavy that day? is he wearing formal shoes that slow him down? is the weather bad out?) and adds another step to the process that doesn't absolutely need to be there.

See a readable version here >

Sitemap

Wireframes (and Prototypes, Not Shown)

I'm looking at implementing this app so I won't be posting all my wireframes or the prototype but would be happy to show them to you in person.

Wireframes

IV. User Testing

I realize the insights below are more useful with illustrations. I can show you in person as to how I iterated my design based on the user feedback as well as provide context and detail on the following.

Usability Testing
Insights (Testing for Prototype v1)

MAJOR TAKEAWAYS

The screen with the ride’s subway stops is unclear. (Testers voiced confusion.)

Text is too small. (Tester brought the phone close to his face and squinted.)

The Brooklyn map with all the neighborhoods represented is overwhelming. (A task I gave to users was to locate Park Slope. Testers could not immediately locate it.)

TO KEEP IN MIND

Icons along the bottom are too small. (Voiced)

There was too much copy on each screen during the route planning. (Voiced)

Improvements

Clarify the screen with the ride’s subway stops.

Increase text size.

Get rid of all maps until the user arrives at the destination.

Shorten copy where possible.

Insights (Testing for Prototype v2)

Major Takeaways

The screen with the ride’s subway stops is unclear. (When I asked testers what this screen was about they were silent and appeared stumped.)

People naturally interact with maps. (Observed)

Both maps and text are good for exploring the city but in different usages. (Voiced plus my observation)

The fixed icons along the bottom of the app were all pretty straightforward—except for Help. (Voiced)

Testers found the progressive onboarding helpful. (Voiced)

The design is clear and comfortable to see/use. (Voiced)

Improvements

Clarify the screen with the ride’s subway stops.

Redesign the Help section.

Add nearby places to the map.

Make the tooltips easier to read (on boarding.)

Refine the copy.


Interface and Visual Design

My background is designing visual interfaces and branding so I started to design this app as well. I used Apple's San Francisco font, applied color, employed mobile design patterns, and wanted to make this not look so much like a GPS tool. I named the app "Hoodies NYC" because it's based on neighborhoods and it's a nod to my favorite item of clothing, the hooded sweatshirt. It is my go-to comfort clothing and I wanted this app to feel like that comfortable, trusted friend / New York native you'd consult when getting around New York.

Interface

After surveying the space I think this app could be viable, and revenue ideas include featuring specific venues, forming partnerships with companies like Uber and Lyft, and seeing companies in Real Estate are interested. The next steps for this app are completing interface design, writing or gathering content, and user testing. And lastly, figuring out if I can afford to hire a mobile developer or buying enough coffee for me to learn Swift.

Photographs: laverrue / Flickr.

Next Steps

• Revise the design based on feedback from the last round of user testing
• Complete the interface design
• Build a prototype with the interface design
• User test the protoype
• Work on a strategy for notifications and refine content (make the tone more conversational)


cwd /at/ clementwu.com Featured Work    |    UI/UX   |    Visual   |    About