Designing a ride-sharing app for future public transportation

An exploratory design project for a solar-powered automated transit network

Original image is sourced from An illustration provided by Israeli Aircraft Industries (IAI): http://www.vosizneias.com/168874/2014/06/24/tel-aviv-innovative-skytrain-track-to-be-built-in-israel/

Background

PodWay is a mobile application that designated for next generation, sustainable urban transportation solution-automated transit network (ATN system), which is still at conception and modeling stage. The goal of this project is to make sure requesting the ATN pod experience efficient and enjoyable, and encourage more ridership in such eco-transportation solution. Our team (Justin, Nidhi, McCord and me) decided to provide an effective solution that help commuters to optimize their time during the requesting and scheduling the on demand public service.

Challenge

There were two design challenges:

  • How to design a time-saving solution that minimize time and processes to access the requested ATN pod immediately
  • How to design an accessible application for a diverse set of people.

My role

All members in our team played a hand a good portion of this project for four months, however, there were several instances of which I was in charge:

  • User experience designer
  • Conducted survey research and stakeholder interview
  • designed low and high fidelity interactive prototype
  • Conducting usability testing
  • Delivered UI specification
  • Collaborated in creating personas, empathy map and scenarios

Due to limited time constraint, there were a lot of space to be improved in this application based on the feedback from my peers and my instructor. I challenged myself to redesign the application as my personal project and more details would follow up.

Approach

We explored out design solution by using d.school’s design thinking methodology.

Empathize

In order to figure out the real design problems for this project, our research approach was into three folds: conducting a quick interface usability analysis for potential competitive products (including Amtrak, Cyclefinder, Moovit, and Sidecar); interacting with real users by using surveys and one-on-one interview techniques; meeting with stakeholders for understanding ATN system technical constraints and opportunities.

Some typical survey results

There were three takeaways from our research:

  • Poor user experience for the ticket purchasing solutions provided by public transit in the bay area. Most public transit apps had poor navigation, cluttered content layout and complicated process flow, which largely increased users’ cognitive load.
  • Technical limitations for a instant value loading to the transit card online and out of dated vending machine ticketing system made the ridership experience even worse.
  • Most users didn’t satisfied with their current ridership experience due to time-consuming, inconvenient routes and lack of instant ETA( estimated time arrival)notification for transit arrival and for destination.

Define

Through synthesizing user research results, we rapidly crafted four personas and generated empathy map for each of them to get well-rounded sense of commuters goals, behaviors and pain points, which became insightful references later to gear up the application’s main features. While wearing user’s shoes to think user’s needs, we quickly created a storyboard to generate a possible solution to the problem that rose in user’s daily commute. Those deliverables led us to formalize our application requirements: streamline the process of requesting a pod; improve the efficiency of the mobile payment and integrate social function with the application to promote using ATN system. For each requirement, we prioritized the product function and features and focused on fundamental features due to time limit.

Personas
This is a typical scenario that a user wants to try ATN pod
Empathy map

Ideate

In order to optimize the procedure of requesting a pod in the typical daily commute scenario, we created the task flow to visualize the process and iterated the task flow in a couple of sessions to simplify requesting pod experience. The most tricky part is to decide when to ask first-time users to create an account. We allowed users to perform primary tasks instead of persuading them to sign up at first. This way allowed users have basic sense of application before they decide go forward and have the sign up with inherent value.

Taskflow
Information architecture for the application(we iterated it and )

We conducted quick and dirty sketches to reflect the requesting a pod process in different scenarios and rationalize basic function and features on the each screen. Through a couple of rapid experiments with different design patterns, we decided to set Google map with real-time pod inventory and arrival information as the main app view and make call to actions buttons spin on it. While iterating the main task, we came up with an idea to create rewards points based on the frequency of use in Pods to increase user engagement with using Pod for commute. In order to see how each element incorporate with each other in a standard mobile structure, we refined our sketches by using Balsamiq to increasing the level of fidelity for demonstrating our work in the midterm presentation. During the wireframing section, we define the whole process of requesting a pod into three steps: select a pick-up Pod station and customize the trip that included input the destination and choose types of pod and the number of tickets.

Prototype

In order to get feedback about our idea, we created the click-through prototype using Axure based on the wireframe. We spent most of time on prioritizing the requesting a pod experience due to the limit of time, but we still explored one way to demonstrate ride-sharing experience. there are three key insights that needed to be addressed:

  1. In order to demonstrate the app’s value proposition, we enabled users try it at first without registration. Also, We designed a progress bar at the top of app when users start to request a pod. This way helped users anticipated how many steps they could go through before requesting.
  2. The whole requesting process is handy for users.(automated showing most nearby pod station for boarding with route direction information;)
  3. Loading the credit card information is quick and easy by scanning.
Wireframe concept
Final prototype

Here is the video demo for the prototype.

Test

I conducted an mobile usability testing with 4 users based on following usability Metrics: task success, task time, comprehension/learning and satisfaction. And I designed three test tasks that probably become main tasks users interact with:

1. Requesting an pod;

2. Retrieving a ticket

3. Buying tickets for the family members and friends.

Main findings:

  1. Users are confused by multiple options at the landing page and unsure of what option is to be selected to achieve their simple goal due to chaotic page design and ambiguous visual proposition.
  2. Users who had logged into the account could not find their trip information immediately unless they have to navigate from sidebar menu, and they often feel overwhelmed when navigate different sections from sidebar menu.
  3. Touch controls are not intuitive and the page is also visually cluttered. When users select specific date, they spend most time on adjusting input field.

Redesign

Due to limited time frame, there was so much space for improvement. I challenged myself to launch the redesign process as a personal project. The goal of redesign Podway is to create a more intuitive and accessible interface for boosting a greater efficient pod requesting experience. There are three typical areas that I focused on in the redesign process.

1. Onboarding experience. The original landing screen is visually cluttered and the button that facilitate call to action does not significantly stand out, so that it brings in user confusion and leave a negative first impression to users.

Onboarding screens were redesigned for first-time users (middle) and logged-in users (right) based on the feedback for original screen (left)

Design solution for onboarding experience:

I rearrange and simplify visual elements on the intro screen, making it clear and neat. There were two considerations involved in the redesigned process:

  • Designing a compelling landing screen that encouraged first-time users to try the service. I spent some time on thinking about whether the users need to sign up before they used the application and then I found that a registered account could save and retrieve users’ tickets information and promote some social interaction, most importantly making requesting pod smoothly if the sign up process was really simple and fast. I tried to approach by designing a transparent call-to-action button and providing the number of users using pods to encourage first-time users try on.
  • Designing an effective onboarding experience for logged-in users. Users who requested a pod could be either at home, on the way to the pod station or at the station at any time. When they revisited the application, What they really want to get is the ticket pass and estimated time for pod arrival, which are highlights in the redesigned screen.

2. There are two crucial problems with navigation menu design. Right-justified navigation menu really reduce the speed that users scan the menu and select preferred option; some irrelevant categories in the menu and small space of the side menu make it difficult to scan and manipulate the relevant tasks.

Navigational menu

Design solution for navigational experience:

I simplify the navigation experience by aggregating redundant categories and redefining main categories. One reason I stay with hamburger menu is to yield more space to the main task that users focus on. Navigational menu for this application serves as a pod information reference and a marketing reward program to meet users’ further needs; users could complete the main task without tapping the menu.

3. The customized page is cumbersome and not designed for touch gestures. The biggest problem with the app is the process of requesting a pod, which still follows traditional instructions to purchasing a ticket in a linear way.

Redesigned the process of requesting a pod goes several iterations

Design solution for the process of requesting a pod:

In order to simplify the process of requesting a pod, I integrate basic travel information with map and formalize these information in a clear and logic way. The initial focus of redesign was only on simplicity. Thus, you could see it may look like high dense information pile up on the map view ( the middle screenshot in the initial redesigned version). This was what I initially thought simplicity was, assembling contextual information into one screen to minimize task steps.

As I iterated with more user cases, accessibility became the other focus. Through several iterations, I enlarged font size, made buttons easy to tap for people with poor visibility and increased color contrast between text and background.

Another improved area was interaction between the pod information panel and map view. In other words, when users tap and zoom in and out map view, the form disappear temporarily until users do nothing on the map view; when users tap the form, more details will come up to facilitate customize pod service information. The way that I design customized screen was based on the research promoted by Raymon who wrote an article on this topic, “Making an option a default directs more people choose default across a variety of contexts ”. Thus, instead of filling in travel information by going through several steps, most users can directly head for payment.

Future work

As AI-driven conversational UI and taking action in the iOS notification center are trendy, I will explore some new solutions that reflect that trends in the near future.

PS: I’m looking for a full time position for UX designer/ researcher in the San Francisco Bay area, feel free contact me at annefeng68@gmail.com or visit my Linkedin profile.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.