Napcat IOS app
OVERVIEW
Picture this: you are a busy New Yorker on your way to work early in the morning, you feel extremely sleepy waiting for the train in the subway station. You download the NapCat App and learned that you can take a nap on the train and wake up right before your stop. After a few quick taps, you are all set. You can now sit back and take a power nap on the train. Napcat will wake you up before you arrive. How awesome is that?
TARGET USERS
New York City Commuters who take the train to and from work.
MY ROLE
I was the UX/UI Designer for this project. I conducted user research, competitive analysis, user testing, created personas, user stories, workflow, UI sketches, wireframes, UI design, and made prototypes.
This was a 6-week project in collaboration with Yang Cong.
PROJECT TIMELINE
THE PROBLEM
How to help passengers wake up just before the train arrives at their station.
Have you ever tried to take a short nap on the train only to wake up and find yourself at the end of the line?
USER RESEARCH
- Quantitative User Survey
We proved our idea that almost everyone (95.8%) from our target audience group (26 participants) had missed their stops on the train.
The three top reasons are: Thinking about something, taking a nap, and reading something. When asked how would they prefer to be reminded to get off the train, almost half people choose to be reminded by phone vibration without disturbing other riders.
What we learned from the survey
- Qualitative User Interviews
USER PERSONA
Persona was created based on the characteristics of the primary user group of NapCat– Commuters, which explains the major goals and frustrations of the user group.
STORYBOARDS
Our storyboard tells the story of how the a potential user uses the app when commuting for work.
COMPETITOR ANALYSIS
We conducted a review of 4 competitors with the goal of identifying the competitive environment and the priority of NapCat features and challenges.
In those 4 competitors, 3 out of 4 are designed for transit use, and all three of them rely on GPS to locate users in order to trigger the alarm.
CHALLENGE
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 this MTA Real-Time Data Feeds to make sure the app can work underground without all time internet access.
Now we can use real-time data for our application.
WORKFLOW
We want users to be able to get reminded about their stops without login process and only within a few taps.
After knowing the users’ behavior and goals, we created a workflow to direct our wireframe. The main workflow is shown as below. All users need to do is to choose a route, the app will detect where they are, when the train moves, and remind them about their stops.
We also want to have the app learn about the users while they are using it, so we designed the step of asking them to save the route after they turn off the alarm for the first time.
WIREFRAME
Based on the workflow, we created low-fidelity prototypes with Sketch and Adobe XD, focusing on the user flow of create the route and get reminded about the stops.
USER TESTING
Then we tested the wireframe. We conducted a pilot test and 6 additional 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 wireframe, after users selected their destination, they can choose either be reminded to get off or save the location as home/work/other.
After further brainstorming, we realized that there are multiple subway lines going to a same stop, and some lines like NQRW and BDFM have overlap routes. Because of this, even with the MTA real-time data feeds,
Simply choosing the destination is not going to help the app complete the algorithm and operate in a no internet environment.
For the final prototype, instead of selecting only destination, selecting a departure point and arrival will help system calculate better. Routes will be preselected for users to choose.
FEEDBACK FROM USER TESTING
Remove Routes on Home Screen
Other than showing a bunch of routes on the homescreen, 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
Simply choosing the destination is not going to help the app complete the algorithm and operate in a no internet environment.
Instead of selecting only destination, selecting a departure point and arrival will help system calculate better.
We removed “add a new route” option.
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.
UI DESIGN
For the visual design, we used a dark style map as the background, created realistic buttons as the main visual style. We also created our mascot - an MTA cat.
Users are able to get reminded about their stops without login process and only within a few taps.
The app will learn about the users while they are using it, so we designed the step of asking them to save the route after they turn off the alarm for the first time.
