NapCat

NAPCAT

My Role

Visual Designer
UX Researcher

Duration

2 months

The Goal is to Wake Sleepy People on Subway

New York MTA is one of the busiest transportation networks in the world. Over 4 million people ride the New York subway every day. Most subway lines run 24 hours a day. In late nights and early mornings, it’s common to see someone taking a nap on the train after working or getting up too early. It is not an easy thing to keep aware of where the train is while resting especially when you are extremely tired. According to our research result, missing the stop is a very common problem for New York residents.

To resolve this simple but crucial problem, we created Napcat, a mobile app that can remind you that your stop is coming when you are taking a nap on the train/subway in New York.

 

Identifying What Users Think

Target Audience

Our target audience is everyone who takes the New York subway on a regular basis, more specifically, commuters riding the subway to and from work.

Survey & Interview

We sent out a survey to a group of users working in New York at an average age of 30 and got 26 responses. We also asked some users about their experience of riding the subway in person.

 

Here are some major findings from the user research:

User Research Results

Persona

Based on the characteristics summarized from user research, we created the persona which describes major issues and goals of users.

Persona

Storyboard

We also illustrated this storyboard to help better understand the user flow.

 

Summarizing the Problem

How can we help passengers wake up just before the train arrives at their station?

Peeping Similar Apps on the Market

There are already a few apps in the market that provide similar service as Napcat’s. However, all of them are not satisfying in some areas. Also, as simple-function apps, none of them are well designed enough to attract users.

2b052484-34a8-46d4-9eb8-5199bea1593a

TransitNap

You can save your most frequently visited destinations and you can also quick-pick one from a map to get reminded.

SEPTA_Image

NapMonkey

Wake-up calls are designed to be used on ground transportation including buses, trains, light rails across the globe.

246x0w

Power Nap App

The Power Nap App is an alarm clock app with relaxing sounds and a sweet kitty cat 🙂 This doesn’t work with transit.

246x0w (1)

OmniBuzz

It works efficiently in the background, and vibrates and makes noise as soon as you near your destination.

Competitive Analysis

Internet is NOT an Issue

From our user research, we learned that 75% of users don’t have access to internet most of the time on the train. So we did more literature research and found out that we can connect to the MTA Real-Time Data Feeds to make sure the app can work well once it updates the information before users enter the train.

 

Figuring Out the Workflow

After knowing the users’ behavior and goals, we created a workflow to direct our wireframe. The main workflow is shown as below. We want users to be able to get reminded about their stops without login process and only within a few taps. All they need to do is to choose a regular route and the app will detect when the train is moving and remind users about their stops.

Workflow

Wireframing & Iterating

Based on the workflow, we created low-fidelity prototypes with Sketch and Adobe XD, focusing on the user flow of creating the route and get reminded about the stops.

 

First Iteration

Conducting User Test

Then we tested the wireframe with actual users. We conducted a pilot test with 6 users.

We found out that users don’t want to fill out so much information in the beginning to set a new route. One user said, “I feel like there is too much going on at the beginning.” So we modified the wireframes after users selected their destination, they can choose either be reminded to get off or save the location as home/work/other.

 

Second Iteration

Users Like Automation and Minimal Design

By conducting user testings, we collect feedback from users and improve the usability of Napcat based on it. Here are some major findings and our solutions.

 

Remove Routes on Home Screen

Removed Routes from Home Screen

Other than showing a bunch of routes on the home screen, we decided to show buttons. We carefully selected the buttons by asking users.

We ended up having only 2 buttons:

  • Saved – show saved routes.

  • Locate – show yourself at the center of the screen.

 

Select Routes instead of Stops

Select Routes instead of Stops

Simply choosing the destination is not going to help the app complete the algorithm and operate in a non-internet environment.

Instead of selecting the only destination, selecting a departure point and arrival will help the system calculate better.

 

We removed “add a new route” option

Removed “Add a New Route” Option from Saved Screen

To add a new route, users can select stops on the map or use the search bar now. The stops are still editable in the route detail page.

 

Creating Playful UI

For the visual design, we chose a dark mode map as the background, created realistic buttons as the main visual style. When designing, we tried to use gradients to make the interface look vibrant.

Visual Elements

Using Adobe XD to Create Hi-fi Animation

Based on the user feedback and the visual guideline, we created the high-fidelity prototype. Please feel free to play with the interactive prototype below.

Click the image above to play the interactive prototype.

Hi-fi Prototype