THE PROJECT:

As part of a UX Certification program at Pratt, I was tasked with delivering a solution for managing metro cards; a common pain point among New Yorkers.  The process of managing metro cards can become fairly challenging (especially with more then one card in play), with riders often loosing their money when cards are misplaced, expired or lost.

As a New Yorker, I can sympathize with the “metro card challenge” as I often find myself with 3+ cards, all with various values, some expired or about to be. I have often wished for some sort of a solution for managing my cards so this project was the perfect challenge for me to tackle.

DELIVERABLES:

The project consisted of two central parts, research and design. Each part contained various deliverables, outlined below.

• Research: Research Plan, Overall experience feedback via interviews and Competitive Analysis
• Design: Sketches, Site Map and Wireframes

RESEARCH AND EXPLORATION:

I started by putting together a research plan that would address the pain point that I wanted to tackle; help riders manage their metro cards more efficiently. Interviews and competitive analysis served as a starting point within my project as it addressed the following:

• Sentiment among riders when it comes to using/managing their cards.
• Improvements/pain points that riders would like to see addressed.
• What currently exists elsewhere that helps riders manage their card(s).

After interviewing riders, the following became clear:

• Riders where unsure of what to do when they had a problem with their card; choosing to buy a new card instead.
• Riders tend to hold onto multiple metro cards in order to check their balances at the station.
• Some riders expressed a desire for a self servicing application that would enable them to perform various tasks (ex: check card balance, refill a card, etc.)

Upon completion of interviews, it was time for competitive research. The best examples of how transit systems function were found internationally. Highlights are outlined below

• Hong Kong – Octopus card which can be used in convenience stores, restaurants and other places.
• Seoul – Commuters can use their smartphones to pay for travel at ticket barriers.
• Copenhagen – Fully automated system that uses driverless trains, operating 24 hours a day.

THE DESIGN PROCESS:

Upon completion of both, user interviews and competitive research, it became clear that creating a self servicing application would alleviate many of the pain points that were expressed.

I started with mapping out my idea by jotting down features that riders mentioned and then incorporated those features into a site map.

Site Map served to:

• Map out the app to identify the major elements.
• Understand all screens involved in the card management process in order to assist with the sketching process.
• Identify any actions that may occur on-screen before the next screen is presented.

After I had a clear sense of the end-to-end process, it was time to start sketching. I created sketches for key app screens that were applicable to the card management process.

I began sketching the “Welcome and add a card walkthough” because I thought users would like to have an understanding of where to begin. This later expanded to a sign on process so users could feel more “secure” about the app (and feel confident about storing their credit card info for card reloads).

“Main” and “Secondary” screen sketches (respectively) depict key points in a journey that a user would hit if they choose to manage/get help with their card(s). As I began wireframing, I was able to fully incorporate these screens in order to map out a complete user journey.

Wireframes reflect tasks that a user may want to undertake when managing their metrocard(s). These wireframes are the result of user research, competitive research and general assumptions that I had to make.

Signup

Add Card

Home

Transfer Balance

Report A problem1

Next steps for this project will include creation of an interactive prototype and usability research.  Results will be incorporated into a revised design that will provide the basis for visual design.

THE PROJECT:

In taking a UX course at NYU, I was asked to create an app/website of my choosing for a final project. As such, I decided to create an account servicing application for the Apple watch (just announced to the public). The idea behind the app was to allow users to manage their account(s) online from a single app, targeted at credit, debit and prepaid cards.

DELIVERABLES:

1. Site Map
2. Wireframes
3. User Research
4. Visual Designs

EXPLORATION:

I began with looking at as many news articles as I could get my hands on to familiarize myself with the apple watch. As the product was unreleased, this was the best way to learn about what was to come.

THE DESIGN PROCESS:

I started with creating a list of features which I wanted within the app. These features then fed into a site map. I followed the “beta” design standards (and a lot of speculation) to create wireframes that I thought might work. This proved particularly challenging as I had to “guess” on how certain features of the app would behave on the watch.

With an unreleased product getting a lot of attention, I knew user research was especially critical to the success of my app. I put together a research plan to test overall usability and features that I wanted included in the app. I uncovered the following:

• Users liked the idea of managing their account on a watch, reducing reliance on their phone(s).
• There was confusion as to how to navigate an apple watch app, many were unfamiliar with the gestures.
• Feedback was provided on information hierarchy and what was important to users.

Upon completion of user interviews and release of the watch, I revised my wireframes and sitemap to reflect a more “realistic” product. I started with revising the sitemap first as it served as my guide in creating stronger wireframes.

Revised Site Map served to:

• Map out the app to identify the major elements.
• Understand all screens involved in the account management process in order to understand app navigation/usability.
• Identify any actions that may occur on-screen before the next screen is presented.

After I mapped out my app, I went to work on modifying the wireframes below. These modifications were incorporated into the visual design.

The modifications to the wireframes were a direct result of finalized design standards and user research. Certain parts of the wireframes such as making a payment were de-scoped upon release of the watch. The de-scoping was due to a few factors such as navigation, reliance on the iPhone to pass information to the watch, and response time.

Watch - Wires - Set Cards

Watch - Wires - Acct Overview

Watch - Wires - Payment Flow1

Watch - Wires - Activity + ContactUs

In taking user research and finalized design standards, I was able to create a visual design (below) that users would want to interact with and come back to.

Watch - VD - App Screen + Acct

Watch - VD - Summary 1

Watch - VD Summary-trans

Watch - VD - Contact Us

THE PROJECT:

As part of a design challenge, I was tasked with designing an interface for taxi dispatchers that addresses the need to keep track of and dispatch their vehicles, while monitoring their metrics and performance.

DELIVERABLES:

I decided to create a wireframe and user journey to visually showcase my solution.  As the challenge had a time limit of two to three hours, I was limited in what I could do from a visual perspective.

RESEARCH AND EXPLORATION:

I started with reviewing the brief provided in order to understand who I was designing for (taxi dispatcher) and possible challenges they may face.

After reviewing the brief, I decided to do some “desk” research of my own. I researched information on products that are similar to ones provided within the brief and ones that were related (ex: Uber, Lyft). Uber/Lyft were interesting to look at as they provide a similar service but cut out the middleman (taxi dispatcher) due to automation.

THE DESIGN PROCESS:

Keeping in mind the challenges of the dispatcher (dispatching vehicles while keeping an eye on their KPI’s) I envisioned a “dashboard” view that incorporated features of automated apps like Uber/Lyft (ex: map view, ratings, etc.) while surfacing some key KPI’s that a dispatcher may find important.

Before I could create my “dashboard” I thought it would be important to create a dispatcher journey map that detailed the process of pairing passengers with drivers.

As the “pairing” process is a key process that drives KPI’s I choose to focus on this process within my journey map.  The journey map below served to influence the design of my dashboard.

After I had a clear sense of the pairing journey, it was time to put together a dashboard. The wireframe below reflects both, the journey of pairing passengers with drivers and also some of the key “KPI’s” that I thought were important to a dispatchers success. This wireframe is a result of the brief, “desk” research and general assumptions that I had to make.