all screens.png
 

RESPONSIVE WEB : 28X REDESIGN

SKILLS

Web Design
UI/UX Design
Wireframing
Prototyping
-
Sep 2018

OVERVIEW

I was tasked to create a responsive web redesign for the Pittsburgh Port Authority 28X Airport Flyer Outbound bus shuttle. The content of the original website does not make use of successful hierarchy, has redundant and/or confusing information, and shows evidence of a paper-to-digital information flow without responsive considerations. I used a mobile-first approach and user testing feedback to inform rapid design iterations.

sketches.png

RESEARCH & Initial Sketches

After reading through all the information, I first categorized the information how I felt appropriate in order to tackle the issues of redundancy and clarity. The initial mobile sketches reflect the possible navigational interfaces used to access the categorized information. The primary categories are: Bus Fares, Bus Policies, Bus Schedule, and Customer Service. A pdf map must also be available on the website.

 
 
 
 

MOBILE WIREFRAME

The expanding accordion menus contain rewritten copy in better clarity. Introductory and important fare information was the first item on the page, as well as a link to the Trip Planner, where the user could obtain stop information based on their inputs.

 
wireframe.png
 
 
iteration 2.png
 

MOBILE ITERATIONS

In the next iteration, the design of the landing page became more geared towards a “rushed” user seeking immediate time information. The main issue with this design was that there was no freedom for the user to look at a variety of possible times to arrive at the airport, only the closest-cutting time via the trip planner. This idea was refined through the next iterations, ultimately resulting in a Live Bus Tracker on the home screen, with detailed schedules reserved to the next page.

 
iteration 3.png
 

USER TESTING PROTOCOLs


For each tester, I gave them the following tasks for the most recent iteration. Each tester was instructed to think-out-loud their actions as they navigated the site.

  1. Tell me when the next bus is coming to CMU.

  2. I work in Oakland. Tomorrow I need to get to the airport at 5pm. When should I catch the 28X and from which stop?

  3. Can I use a student ID pass on the 28X?

  4. How much will it cost for a parent and a 3 year old to pay with cash? Will someone handle my luggage?

  5. I lost my bag on the bus! What can I do?

  6. What are all the stops in Oakland around Fifth ave?

 

RESULTS: AREAS OF Improvement


Realtime Tracking Data Display: An indication of the information being ‘live’ would help people understand the time display better.

Expanding Accordion Menus: Two thirds of users expressed that they would prefer something other than the expanding menus on the landing page, in order to access it immediately from the schedule page.

Full Schedule: The user needs to know which stop they are looking at times for, and there needs to be an indication that the list of stops is also tappable.

Font Size: Increase size to make copy more legible.

Fare Information: Include more explicit statements, as people will be skimming. Example: Children 6-11 have no discount if using cash.

 
 

Finalized Mobile prototype

The final screens reflect changes to all the areas of improvement identified through user testing. The information expands are moved to individual pages, accessible through a hamburger menu. The real-time tracker uses minutes-til-arrival instead of time of arrival,  conveying sense of real time with more clarity.

View the interactive prototype here.

 
 
desktop final.png
 

Desktop adaptation

The desktop version of the website has enough room on the home screen to not require additional pages for copy. So, in place of the hamburger menu is two buttons: the route map and the full schedule widget. Help and customer service greyed at the footer to be visible on both pages.

With more space, I decided to bring back the stop search via Google Maps embedding . Entering an address would change the right hand entries to the closest stop to the address, as well as a map view of the stop.  There is also a space to have alerts and notices about changes to the schedule.