1. UI/UX Case Study: Ticket Vending Machines and Mobile Application for New Yorks Metropolitan Tran
2. OverviewThis case study is about UI/UX designs for the largest public transportation agency in the United States, the Metropolitan Transportation Authority (MTA) of New York, who currently is in the process of upgrading its fare payment system. They have named their new project OMNY (One Metro New York). The goal of the project is mainly to enhance the fare payment experience for their customers to make it faster and seamless for them by installing contactless NFC readers at turnstiles so that customers can easily pay their fares by simply tapping their: Credit and debit cards Mobile payment applications (Apple, Chase, Samsung, Google pay, etc). OMNY contactless cards (currently in developent). OMNY Mobile application (currently in developent).I wanted to simplify the customer experience of buying and refilling their OMNY cards via current vending machines, via the OMNY vending machines and mobile application. I also wanted to design the general UI/UX design of the OMNY mobile application and vending machines specially the part of buying fares.Team: Randol Poueriet (This is a personal project, not an assignment from an agency or a contract from the MTA or other transportation entity).3. The Client: New Yorks MTAAbout the client (source wikipedia):The Metropolitan Transportation Authority (MTA) began operations in May1965, Nelson Rockefeller was governor at the time. The MTA is the entity in charge of New Yorks public transportation. It is the largest public transit authority in the United States. It provides ferry, subway service as well as local and express bus services. It has a daily ridership of 8. 6 million people and annual ridership 2. 6 billion. Fare Collection:From MTAs inception until 2003 the agency collected subway and bus fares via a series of small metal tokens. The MTA cycled through several series of tokens though the late of the 20 century. In 1993, MTA started testing the Metrocard, a magnetic stripe card that would replace metal tokens used to pay fares. By 1997, the entire bus and subway system accepted Metrocard and tokens where no longer accepted for fare payment in 2003. That was a 10 year transition.In May 31, 2019 The MTA launched a new fare payment technology to the replace the Metrocard, it is called OMNY (One Metro New York) it is a contactless fare payment system. This technology will allow commuters to pay their fares by tapping their credit, debit cards on a electronic reader at the turn styles. This electronic reader will also accept payments from smart phone devices with payment mobile applications such as Google, Samsung, Apple Pay and others.OMNY will also offer a mobile application and a contactless OMNY card. This OMNY card customers be able to refill it with single and time-based fares. The OMNY mobile application will allow customers to Purchase single and time-based fares, it will also allow customers to view the Service Status of train/Bus routes, it will have many other secondary features.(This case study is about the UI/UX designs for the MTAs OMNY mobile application and vending machines)The OMNY system is designed by San Diego based Cubic Transportation Systems, using technology licensed from Transport for Londons Oyster card.The Subway, buses are known for charging a flat fee regardless of time or distance traveled. However a different fare payment system is used on the LIRR(Long Island Rail Road) and MetroNorth. Both railroads sell tickets based on geographical Zones and time of day, charging Peak or off-Peak fares. (This makes difficult to create an all-in-one mobile application that is minimalist and intuitive to users). 4. Client Task: Design the UI/UX for their OMNY project.The client has reached out requesting a new digital experience for its upcoming state of the art project OMNY(mentioned above). That day I was at the park by myself, I sat on a rock in a small hill at the park to enjoy a beautiful sunset over Manhattan when the client rang my phone, the conversation went like this:Client: Hi Randol, we are looking for someone to design the digital customer experience for our OMNY project, long time no see what are you up to?Me: Hi, yes, long time no see, its always an honor, you know Im not cheap. LolClient: Jajaja we are very aware of that, the city just approved us 50 billion in funds to innovate the subway, half of it could be yours if you deliver ;)Me: Jaja Ok :)After a good 20 minutes negotiating project price and perks we finally agreed on an undisclosed amount of millions and 1 day as Mayor of New York plus more if I delivered the solution they needed. So I started with a User Research.5. User Research and AnalysisAs mentioned above the MTA has an 8.6 million Daily Ridership and 2.6 billion yearly ridership. This is a massive user base, users come from all backgrounds, age, gender, religion, ethnicity, all levels of education. They come from third, second and first world countries. I already know for this project I will be extra prioritizing inclusiveness and consistency.Im a user of New Yorks public transport service myself. I have to give a compliment to the hardware in these ticket vending machines, they are very solid, reliable and fast for being a 1990s technology and long before the arrival of smartphones these machines already had touch sensible displays, these machines were impressive state of the art technology back then, they were a decade ahead of time, they must be German made.The UI/UX design however could be better and easier. These are some of the screens in the vending machines:Via vending machines and tellers at stations customers can Buy and Refill their Metrocards with single fares and time-based fares. Single Fares - these dont expire and you can buy many and use them as you need them.Time-based Fares these expire within 1 week or 1 month respectably, you can use them every 15 minutes at any time during the day until they expire. You can only have one time based fare in a Metrocard. School Metrocards: Kids dont buy Metrocards to go to public school because the school system provides them with free School Metrocards. The school system has them covered with 3-4 rides a day from Monday to Friday. This is just enough to go to school and come back home. They do buy regular Metrocards to go out on weekends with friends and family.In order to have an idea of what we will need for the upcoming OMNY vending machines and mobile applications I observed the current situation with the current vending machines. Many customers are very agile at these vending machines, many struggle at the machine and many avoid using the machine and prefer purchasing their fares via the teller at the station. By the age, clothing and ethnicity of the customers in front of me I can predict my wait time at the line, lol. The struggle of one customer affects all other customers in the wait line. Sometimes one person would spent more then 2 minutes trying to get a Metrocard delaying others in the wait line. Sometimes asking people question does not gets you the answers you need because many times customers dont know what they want or need, its your job to identify their struggle and pain. By simply observing their behavior and body language you can get the answer to your questions before you even ask the questions.How I have noticed users struggling at the vending machine?(1) The journey of submitting an order involves many screen transitioning, this is not a minimalist experience even though each screen displays not more than 4 options to the user. The more screens there are involved in the journey the less likely the user will remember it when he comes back the next day, week or month.(2) The User Experience is inconsistent, most customers are agile only at buying the same item they always buy, however when they need to buy a different item they get a bit lost and take their time to read instructions.(3) To Undo a selection there is screen transition involved and apparently many customers dont land where they expected and prefer to start over from the beginning. (4) Adding value to a Metrocard or purchasing a Metrocard with value added is a headache if dont know your math, the wrong math will leave you with extra dollar or cents as balance in your Metrocard, the right math will buy you exactly the amount of rides you need leaving no extra balance in the Metrocard.(5) If a user leaves the machine mid-order then the next user needs to re-start the process to get what he/she needs.These problems cause congestion at the line. These are the most painful problems at the vending machines to buy Metrocards. If these problems are brought to the new MTAs OMNY mobile application and vending machines the customer experience wont be good or great.UI/UX designs should always be evaluated to ensure they will meet the needs of their will be users and to ensure they offer a pleasant experience. A heuristic evaluation is a usability inspection method that helps to identify usability problems in the user interface UI design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles: The Heuristics.A Great UI/UX designA great customer experience for a product with such a massive user base should always be:(1) Minimalist: Less is actually more then more, simple is luxury. Try to provide the user what he needs in few screens as possible and avoid screen transitions and animations because it may distract or confuse customers. Less is easier for customers to remember.(2) Intuitive: The user should always know what is next. With a simple glance the user should know what he needs to do in order to get what he needs. If your UI/UX design needs instructions then it may not be intuitive enough. A great UI/UX design should explain it self. Users should not have to learn how to use it.(3) Inclusive: Avoid any current or future trend if your user base is an entire city. Keep your work basic and classic. The meaning of the word Inclusive is Made for Everyone. Inclusive means for users of any age, gender, religion ethnicity. For example: A business suit is a very inclusive clothing because there are many jobs you can do with it many, places you can go with it, many meetings you can go to.(4) Transparent: Transparency is very important in UI/UX design especially if there are numbers involved and even more important if there is users money involved. Due amounts, make them always centered if possible and use the largest font size you can for it, this is not only transparency but also respect. The Cost of an item should also be clearly visible, perhaps this should be the first thing the user notice when he glance at the screen.(5) Consistent: in a UI/UX design consistency should be a non-negotiable must be becausevthe human brain understands patterns, colors, and sounds faster then text therefore keeping things consistent is a big plus as it means less cognitive load for the brain. In a UI/UX design colors should be consistent, the journey should be consistent, elements should be consistent, patterns should be consistent, consistency throughout all digital channels, everything you can make consistent make it consistent.6. Project Goals:The assigned task is to create the UI/UX design for all platforms of the MTAs OMNY project, platforms are Mobile devices and vending machines.With users struggling at the MTAs Vending machines there is an obvious job to do here, to Simplify its user experience. Lets enhance the user experience at these vending machines by making it more consistent in every aspect, more inclusive, lets make it more minimalist by reducing the number of screens the user must transition in order to get what he needs and lets also make it more intuitive. The result should also be a UI/UX design that can also be employed in all platforms of the MTAs OMNY project, vending machines and mobile applications for example.For this project, due to the massive and diverse amount users, I will be avoiding any design trend because trends have expiring dates and this type of clients can not often modify their UI/UX designs as doing so will create chaos and confusion to many of their customers, people are not very welcoming to change unless it solves them an obvious problem(s). This type of clients must stick to very basic and classic UI/UX designs that enables their customers to seamlessly get what they need. Also I will try not to surprise users with animations and progressive disclosures unless it is something very very necessary.These are the Goals:(1) Reduce number of screens(2) Minimize the user journey to a single screen, if possible. (3) Reduce cognitive load. (4) Enhance consistency. (5) Dont surprise the user with animations and progressive disclosure, if possible.(6) Ensure Linear Flow User Experience.(7) The user should be able to seamlessly distinguish sections.(8) Make sure users knows what is a button and what is not a button. (9) Customer should always be able to see where the journey of submitting an order begins and ends.(10) The User should always seamlessly be able to buy exactly what he needs, so there are no cents left as balance in the card.(11) The design should be screen friendly to any screen shape or size so that customers find the same digital experience on any platform. (12) Via the mobile application the user should be able to:(a) Also purchase their fares without having to progress through multiple screens.(b) Seamlessly switch between screens to view Map, Buy Fares, and View Service Status.(c) View current balance ( purchased Fares ). (d) View available funds. 7. The Solution:Now that we have identified the users pains and have set the goals to solve them lets take a look at the UI/UX design that solves these pains and explain it.Lets see the proposed UI/UX designs for the MTAs OMNY project.I have made dark a light themes. The dark theme I made it to honor the classic theme in today's vending machines and the light theme I made it for the OMNY project. This light theme was inspired by the MTAs hybrid white/blue buses. I would say these buses are their best looking vehicle. From this concept I made several models, here they are:Lets explain this concept1) First thing to notice is that it is a single faceted design, with a quick glance the user can always see where the journey of submitting an order begins and ends. This eliminates the anxiety caused by not knowing whats next. The journey of submitting an order happens in this one screen. Hey Randol did you forgot about Hicks law? I have a good excuse to disobey this psychological principle and my excuse is that: The time it takes for a user to make 3 selections in one screen is faster and friendlier then the time of making one selection in 3 separate screens. I made it obvious for the user to distinguish to what section each button belongs to by implementing the Gestalt Principles of proximity and similarity to keep the screen user friendly.2) I categorized Sections into layers because Layers are a universally known pattern and I wanted to ensure a linear flow user experience ( Principle: Germanic Cognitive Law ).3) I chose to provide a pre-selected native language to save one step from the user journey. About 95% of users are native of the city and therefore understand the native language. The minority who does not understand the native language will however need to select a desired language in the first layer at the top. I believe favoring majority will have a positive impact in everybody in the long run. 4) No instructions are needed, the design is self explanatory the user simply needs to select the desired option at each row. 97% of customers are not first timers and therefore always guiding them step by step with instructions is not a very pleasant every day experience for them. Removing instructions saves valuable space in the screen it also saves time of users reading them. The human brain understands patterns faster then letters and layers is a universally known pattern and humans are born understanding this pattern. Users come to these machines with one purpose in mind: to purchase their fares and their brain unconsciously will be scanning the screen for any button with a price tag, anything with price tags they will look at it to see if it meets their needs, if they dont understand the Language then they will try to find where they can change the language.5) The user can seamlessly undo a selected option. Because there is no screen transitioning the user simply can select the desired option in the screen (Usability Heuristic #3).6) Since this project is for a transportation entity I thought it would be fun and interesting if the visual design reassembled that of a vehicle.7) Pay attention to this animated GIF notice that the user can always buy exactly what he needs, no more extra cents left in balance on Metrocards. If they need a multiple quantity of the same item they can seamlessly specify it using the increment and decrement buttons that are displayed when the user selects one of the single fare types. Allowing users to seamlessly specify the desired quantity of a selected item is a simpler user experience than requesting them to add random amount of cash to their Metrocards. This is also a more transparent customer service. 8) An advantage of this concept is that If a user leaves the machine mid-order the next user can simply override the selected options with his desired options. Therefore is not necessary at all to restart the journey from the beginning screen.9) The user experience is very consistent visually and logically. It is the same user experience for buying or Refilling any desired item or quantity of desired item.Lets look at the UI/UX design for the mobile application10) The design is screen friendly for any screen size or shape. This makes possible to employ this UI/UX design on any platform. I believe in consistency because consistency plays a primary role in a great customer service, consistency creates trust because it gives customers what they are already expecting and requires them to learn less. Omni-experience, same UI/UX design in all platforms, is one form of consistency. Each of the vending machine models above has a corresponding mobile version. Notice that each item display to the user his remaining rides or time for that previously purchased item. Lets see them:The content within some sections (Layer) is customizable, I wanted to offer the user the freedom of customizing the content in some of the layers to meet his preferences. For example the user can set items to be linear buttons or square buttons, the user can also place the Tapbar at the top or at the bottom, and the user can also change the appearance of the call to action buttons. Lets see the mobile UI/UX designs again, this time with the tap bar placed at the bottom.As mentioned above the MTA has many different transport routes: Bus/Subway, MetroNorth and Long Island Railroad (LIRR). I believe it would convenient to design an All-In-One mobile application that enables commuters to seamlessly purchase desired fares for any desired route, this approach will require commuters to download, install and set up just one MTA mobile application instead of many. In order to ensure mass adoption of the OMNY project the UI/UX design must be consistent, inclusive and intuitive throughout platforms. As mentioned above the goals for the mobile application of the MTAs OMNY project is to enable users to:(a) Seamlessly buy the purchase their fares, view routes on a map and view time arrivals and services status.(b) View available purchased single fares and time-based fares. For example: 5 days remaining of a purchased time-based fare, or 4 rides of a single fare.(c) Send or Request fares or values as a gift from/to friends, family or other.(d) Any other secondary feature such as Save Trips, Recommended Places, etc should be hidden in a Menu button. This UI/UX design is modular meaning that the user has the freedom to change the content of each Layer to meet his preferences. I didnt wanted to limit the user to a particular visual design design, I wanted the user to be able to change the UI a little bit without altering the UX because the UX is what is important.8. Conclusion:This case study was about a UI/UX design for the public largest transportation agency in the United States, the Metropolitan Transportation Authority (MTA) in New York, who is currently in the process of upgrading its fare payment system. They have named their new project OMNY (One Metro New York). The goal of the project is mainly to enhance the fare payment experience for their customers to make it faster and seamless for them by installing contactless NFC readers at turnstiles so that customers can easily pay their fares by simply tapping their: Their credit and debit cards Mobile payment applications OMNY contactless cards (currently in development). OMNY Mobile application (currently in development). I have shown a few of the UI/UX designs I have created for Vending machines and mobile applications and mentioned the problems they solve. These UI/UX designs are part of my project Ultimate Machine UI. The goal of this project is to simplify the user experience in everyday machines and mobile applications. All designs are interactive prototypes, feel free to visit to interact with them.9. Thank you:This is probably one of the longest case studies out there and I know Im not the greatest writer so I want to thank you for making it this far. I hope it was worth it.Follow this project on social media.Thank You,Randol RELATED QUESTION I didn't get Google Glass Explorer Edition. Is trying to learn Glass dev without the hardware a futile effort? No, you can still learn the fundamentals of Glass development without the hardware. There are three main approaches for accomplishing this: 1) Visit the Mirror API documentation, get into the playground, and start hashing up some code. Download the PHP, Java, and Python library, whichever you're most comfortable with. Familiarize yourself with the jargon and converntions (timeline, bundles, menus, etc). Read the support documentation (second link below) to see how the Glass hardware actually functions. Build some apps to this specification. Soon enough, you will find a friend with hardware to t