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.
UX Design, Research, Information Architecture, Content Management, Visual Design
Pen and Paper, Balsamiq, Sketch, InVision
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.
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.
- 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
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
- Not responsive
- Similar aesthetic to TxTag
- Multiple links lead to same pages
- 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.
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.
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.
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.
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.
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.
Based on the way the audience was thinking I developed user flows for each of the personas created earlier in the design process.
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.
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.
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.