Project Overview

Tyler Drive is an application for student transportation management made by Tyler Technology. The Inspection Builder is a set of web based configurations that is published to a tablet producing a bus area inspection checklist.

Tyler management wanted the Inspection Builder to conform to Tyler UI using Google Material Design style and update the feature set.

I was the sole designer on the project working remotely with a product owner who was the primary stakeholder.

The persona for this release was the implementation specialist, a Tyler employee who configures the software for the school district.

Design Goal

  • Expand features to save time and improve workflow
  • Transform original UI styling to Google Material Design to align with new Tyler branding


In the existing UI, the implementation specialists can not duplicate or edit existing templates.During research, this shortcoming surfaced as a huge pain point. Every school district could have large sets of inspections with subtle variations. This which would require creating the template multiple times. Also, the only way for the specialist to make a change was to make the question/defect inactive. The ability to edit, copy, delete were the specialist's top priorities. These features would drastically reduce workflow time and repetitive effort.

 Tyler Drive Original
Original template "Home." No ability to copy templates.
 Tyler Drive Original
Original template UI - "Add a Vehicle." This shows the vehicles that will use the checklist. There can be dozens of buses using a template.

Process

1. The stakeholder's presented a product tour of the template set-up process and the result on mobile.

2. I researched complex form editing patterns found in the marketplace.

3. To better understand template construction, I set up my own templates. I broke the UI into small parts to understand the input features and flow.


 

The template is created by manual input, adding groups, questions and defects which form an expanding tree. Items can be moved by clicking the up and down arrows.

 Tyler Drive
To understand how the UI worked, I broke it apart
 sketches
Putting pencil to paper helped map out a busy UI. I mapped out groups, their children and the required functions.

4. Next, I built a high fidelity prototype with Axure implementing Material Design concepts and presented it to the stakeholders to let them know the direction the design was taking.

5. Usability testing - collaborated with lead researcher on script; Conducted usuability study.

6. All totaled I did three full iterations each followed by a round of user testing. These studies were invaluable in learning the right thing to build. There were feedback loops with the stakeholders and other colleagues after each major build.

Challenges

  • Low availability of stakeholders that were engaged elsewhere
  • Limited access to recruitment for research
  • Low number of participants for research
  • Each form input had 1-3 actions that needed to remain available as features

Study Overview

The persona for this release was the implementation specialist. With that in mind, three implementation specialists were recruited. I conducted brief interviews to understand how they use the templates and their experience level.

The study was conducted remotely using Go To Meeting. Working from a script, the participants were given 5 situational tasks of setting up a new template for a tire inspection. The study also included a qualitative ranking of the UI and short conversational feedback.
( Test script pdf)

I learned with the first round of testing the that form building prototype needed to be able to respond to any type of input and not be dependent on keywords as each participant had a unique way of establishing category hierarchy.

What We Were Looking For

  • Can users navigate to the templates in the new design?
  • Do the users understand how to create a template?
  • Is the language clear?
  • Does the flow of the UI work well?
  • Can the user discover the new features?

UX Solution

The new homepage gives the user the ability to edit, copy and delete a template. The design implements familiar iconography and patterns found in Material Design.

template home
New template "Home" UI. Users can copy, edit and delete existing templates
 

Since long forms are cumbersome for the user, I broke down the UI into smaller tasks.

template home
"Configure" now separated from the form body.
add vehicle
New UI for "Add a Vehicle." A separate space in the flow for all the vehicles which will be using the template
 
The "Design" section is where the action happens. The result below reflects I learned in the previous studies:
  • Present default form group immediately. Use clear, accessible inputs
  • A floating toolbar eliminates repetitive controls and is available anywhere the user scrolls down the page
  • Input functions can be discovered on hover - a familiar pattern in Material Design

form defaults
The new template UI. The first default group is automatically presented.
New inspection sections are added with floating toolbar made wider to improve speed.
Input functions are conveniently available, clicking into the input.
 

Outcome

  • Multiple studies informed design choices and allowed for the user to have a voice in the outcome
  • The impact of this work helped stakeholders visualize the next generation of the UI

The project is under review, work in progress.

Next Project: Tyler Atlas

← back