UX Case Study# 3: Responsive Interface Design (Transportation).
Overview.
As a team, we constructed a Topic Map which helped us clarify which mode of transportation we should focus on exclusively. Together, we selected “Trains” as the subject of our research. Our first step was to create a Screener Survey in order to determine who, of the survey takers, would be suitable candidates for our investigation. Of all the survey participants we identified five potential candidates who we then contacted to proceed with the next stage of our research: user interviews. As a team, we built a discussion guide consisting of questions and follow up inquiries. Our next step was implementing the gathered data and synthesizing it within an Affinity Map, including key insights and pain points. With these insights we created our persona, who we’ve named ‘Gretta’. Next, we created a Journey Map, which allows us to visualize the user’s emotional experience. It also outlines system touchpoints, pain points, highlights and opportunities that our Persona experiences from the moment she steps outside her front door in the morning to the time she gets home from work. This method provides us with a clear picture of the process that a person goes through in order to accomplish a goal. Our Journey Map was also embellished with user thoughts and words in order to create a narrative.
Using these tools, we came to the conclusion that the primary reason users prefer the train is because of convenience and pricing. What users need is a more efficient notification system regarding the trains’ schedules and delays. The data would also indicate that passengers prioritize safety and a peaceful environment when they commute by train.
Scope of Work.
Our team was provided the opportunity to investigate the various goals, needs and pain points of users that regularly take advantage of public transportation. We selected one area that pertained to a more specific group of people: Train Passengers.
Hypothesis:
Train passengers want a comfortable environment in which to travel.
Problem Statement.
“How might we maximize user comfort and safety when riding the train for extended periods of time?”
Goal of research.
The objective is to create a responsive website that provides solutions to our target audience, represented by our persona, ‘Gretta’, mentioned below.
Affinity Mapping.
Overview.
After conducting the interviews with each one of our candidates, we synthesized the gathered information into insights. Then, we created an affinity map so we can visualize the data and find trends and patterns within the interviewees.
Takeaways:
- Passengers hate the unpredictable delays.
- Passengers prefer a quiet, peaceful ride with few interruptions.
- Crowds and noisy environments are a deterrent for most passengers.
- People prefer the train because it’s fast, cheap and convenient in comparison to other modes of transport.
- Passengers enjoy listening to music or using social apps on their phone throughout their commute.
Persona.
This is Gretta, our Persona who regularly takes the train from her house in New Jersey to work in NYC and back again. She loathes unpredictable delays and large crowds on the train, especially when they happen to be noisy commuters on board. All she wants is a stress-free commute.
Journey Map.
Overview.
We created a journey map for Gretta (our Persona) so we could visualize step by step the process she goes through in order to complete a task or achieve a goal. It aligns all the steps taken, both inside and outside of a product, to the emotional state of the user.
Takeaways.
- It would be helpful to provide real time information of the number of people at the station, overcrowding data, and train delays.
- Users enjoy having a mobile application to purchase and show tickets.
- Gretta opts for the train because it is affordable, accessible, and quick.
Revised Problem Statement.
Insight.
Train passengers experience frustration in the event that their train is delayed or unanticipated crowds prevent them from boarding as well as unavailable seats.
Problem.
For example for Gretta, despite taking every precaution, such as checking the train schedule regularly, there are no live updates to provide her with context. The result being that Gretta is often frustrated by train delays, overcrowds and lack of available seats.
Goal.
Creating a responsive website or app that provide solutions to our target audience such as updated train information, notifying incidents, updates about seats availability and train alternatives.
Feature Prioritization Matrix.
Overview.
With all the information synthesized form our interviews, we have created a handful of features that we felt would be helpful to train passengers using our service. These features will hopefully provide the user with a means of solving and preventing any issues they may encounter during their ride. Features were then placed on our Prioritization Matrix to measure their attributes against one another.
Takeways:
- We discovered that the feature which provided the most value for effort was ‘Updates From Other Passengers’.
- The tracking feature would be easier to implement than originally thought given that satellites were doing the bulk of our work for us.
- 79% of New Yorkers own a smartphone. 41% are iPhone users and in many other cases QR Code scanners are either faulty or they aren’t built into the phone at all.
Moscow Map.
Overview.
Through this method, we were able to determine how relevant each of our features would be to a member of our target audience, like Gretta by placing these features into four separate quadrants, labeled with various categories such as “Must, Should, Could and Won’t” in order to better prioritize them within our timeline.
Takeaways:
- passengers prioritize a peaceful commute above all other factors when taking the train.
- Passengers want the fastest route for their commutes.
- We discovered that NJ Transit trains, on average, were only late or delayed 6% of the time throughout 2020.
Design Studio Documentation.
Overview.
In order to ideate as many possible mobile layouts and their relevant features as possible, my team and I performed a Design Studio exercise in which we time boxed multiple sketches, compared, contrasted and critiqued each one, sketched for a second round and finally, collaborated within another tool ( Miro ) to create our Mid-Fi Wireframes and the finished product.
Low-Fi Sketches.
Mid Fi Wireframes.
Takeaways:
- Design Studio was extremely helpful and collaborative in designing and refining a feature onto a page through the iterative process.
- Extracting the best ideas from each person and combining them into one entity allows for us, as designers, to break free of our comfort zone and create an innovative product.
- Observing other teammates’ features and hearing the justification for those features during their pitch helped us to learn from each other.
Prototype.
Overview.
After assuring our prototype was properly connected and functioning, for our Round 1 of testings, we proceeded to recruit and interview five participants who were asked to complete three tasks based off of their respective provided scenarios. We could observe there were a significant number of direct failures as well that we can potentially learn from. For Round 2, and from the insights gathered from the first round of testing, we redesigned certain features in our upgraded hi-fidelity prototype. We enhanced the style by adding colors and graphics to give it a more real-life visual. We applied the changes necessary we learned as pain points from the first round of usability testing.
Takeaways:
- Our prototype has proven to deliver an easy and efficient navigation flow for users.
- The wording of our prototype needs to be modified for the better understanding of users.
- We need to enlarge text and boxes so users can have a better view of texts.
- Hi-fidelity prototypes are crucial in understanding the natural user flow and thought process when using a website to complete a task.
- The “real life” details on the website allows for concentrated research and focus on targeted elements on the prototype.
Desktop Web Prototype.
In addition to having designed our mobile web prototype to better reflect the user’s mental model based on user research, our team moved on to the desktop web prototype with an emphasis on consistency. We wanted our audience to link one product to the other immediately and recognize separate functions and features without difficulty.
Desktop Prototype Link:
Scorecard.
We created a Score Card to record and compared the results from both rounds of testing. based on participants results, we classified the categories of “Failed, Indirect Path and Direct Path” with green, red, and yellow dots.
Final Recommendations:
- Address pain points users identified and showed by redesigning and doing another round of usability testing.
- Reconsider the labeling for “Train Info” and “Tickets” on the home page.
- Validate that users understand the difference between “Live Passenger Updates” and “Notify a Ticket Master” in the next round of testing.
- Provide a description and reason for the QR code and the barcode number on the same screen through an icon or help button when trying to notify a ticket master.
- Integrate ways for users to find their own alternative routes on the “Train Information” page.
