TxTag Redesign

 

Brief

The Project

As part of the General Assembly User Experience Design Program I was assigned a one week project to improve TxTag's online payment process and increase user acquisition and retention.

Activities

UX Design, Research, Information Architecture, Content Management, Visual Design

TOOLS

Pen and Paper, Balsamiq, Sketch, InVision

 
 
 
 

Problem

The current website is not responsive and is not designed for accessibility. It needs to be available to people of varying physical and technological needs. 

It has a dated design aesthetic that reflects a generic "____ Department of Transportation" website and has inconsistent layouts throughout its site. Assistance is provided in PDF format or at the bottom of forms.

Solutions

The website needs to be language accessible to non-English speakers and designed in a manner that is easy to navigate and read for older people with reading and mobility impairments.

Assistance on forms must be redefined and applied at appropriate times. 

 

Final mock up design explained by process below.


 

Research

Heuristic Analysis

  • Aesthetic
    • Distracting information on site
    • Dated design, not designed for accessibility
  • Help and Documentation
    • Assistance is provided at bottom of page, past search button
    • Additional assistance offered in other section of website in PDF format
  • Consistency and Standards
    • Layout style changes throughout various pages
  • Flexibility and Ease of Use
    • Lack of accelerators on home page

Comparative analysis

 

Harris County Toll Road Authority

  • Not designed for language accessibility
  • Extensive contextual help
  • Focus on info about HCTRA not user tasks in navigation
  • Design aesthetic consistent
  • Navigation difficult to follow

E-Z Pass

  • Not responsive
  • Similar aesthetic to TxTag
  • Multiple links lead to same pages

FasTrak

  • Simple/clean/easy to overview design
  • Progress bar and breadcrumbs helpful
  • Less verbiage prior to form
  • Requests username
  • Navigation unclear due to language used
 
 

Proto-PERSONAS and User Stories

Utilizing research and demographic data from the 2012 Regional Toll Network Analysis by the Federal Highways Administration and the Texas Department of Transportation, I developed three proto-personas.

 

Josh

31, East Austin, Yuppie, drives BMW

As a tech-savvy driver, I need a mobile app, so that I can pay my bills on the go.

David

72, S. Austin, retired, Toyota Camry

As an older retiree, I need an accessible site, so that I can easily read and understand bill paying features.

Valeria

36, NE Austin, retail, dated minivan

As a non-English speaker, I need a Spanish site, so that I understand, so that I can pay my bills. 

 
 

RESEARCH TAKEAWAYS

From the research, I learned that while toll roads provide a lot of benefits to the community such as a reduction of congestion, fuel efficiency, saving of time and money and supporting business growth, they also create a lot of hardships for low-income neighborhoods, especially those that don't have access to the internet. Research also showed that while low-income homes may not have direct access to the internet, the majority have cell phones with internet data available. This hardship needs to be addressed with this update, by creating a web app and being language accessible to non-native english speakers.

I also gathered that condensing the menu is important to reduce cognitive load. The information architecture must be logically arranged so that the user can easily find items, instead of trying to remember a system that is lacking sense.

 

 

Plan

Information Architecture

I reviewed the content of the website and redeveloped the site map. I conducted a card sorting exercise to test and confirm the new arrangements. 

User Flow

Based on the way the audience was thinking I developed user flows for each of the personas created earlier in the design process.

Site Map

 

 

Design

Initial sketches

Second iteration Sketches

The second iteration shows content in more detail. I created a sketch for each page on the website and conducted some user testing (discussed below) to test the flow. This phase revealed some inconsistencies in the form and flow. Some users wanted to click through the pages and then sign up, instead of signing up from the home page, therefore needed sign up buttons throughout the site.

First Iteration Digital Wires

The main purpose of the app is to be accessible to a diverse set of users with varying physical and technological needs. It needed to have a visual design that moves away from the generic Department of Transportation format. The grouping in the form needed to be modified and needed to include assistance and confirmation at appropriate times.

User Testing

Over the one week sprint, several usability tests were conducted that revealed the following things:

  • Testers pointed out that they preferred the Payment Center to be called Billing
  • Users did not understand the grouping of the sections on the Sign Up form, which was redefined in the final iteration
  • Feedback supported that the new information architecture and the visual design made the experience more intuitive
  • The payment forms initially included a section where users filled out their payment information, however, after logging in, the information should have been entered already and that a "previous payment method" option should be available. 
 

FINAL HIGH-FIDELITY MOCK UPS

I created two final iterations, one for David, the desktop user and a mobile version for Valeria and Josh, who are more frequently using the mobile app.


Lessons Learned

My greatest takeaway from this project is that forms are hard to design: Logically sequencing or grouping items on a form is difficult.

Testing frequently is crucial.

Additionally, I learned how to design with accessibility in mind. Instead of limiting the design, it was quite liberating and evolved into a visually pleasing product.