FORMATTING TOOL REDESIGN (LERETA)

August 2019

Our team’s objective was to build a product on a new platform for LERETA, a real estate tax servicer. Formatting Tool is one aspect of the overall workflow. We studied an existing software and use those findings to design our version.

(Note: Operational details excluded for confidentiality)

 
“It’s like you read our minds!”
— Usability test user feedback

  • Challenge

    How might we redesign an existing tool and integrate it into the new system?

    Duration: 2 months
    Users: internal processors (employees)

  • My Role

    Design research, sketching, wireframing, and prototyping.

  • Outcome

    Improved and modernized a utility tool while creating a more intuitive flow.

Process

Opportunity uncovered

Our product team was clued in about a beloved tool while gathering information. It turned out to be a standalone software providing users the ability to manage Tax ID formats. The tool’s batching features were good but the workflow surrounding it remained manual. This was an opportunity to improve the experience by examining the workflow holistically.

Getting to know the tool

We collected more details through user demonstrations and interviews. I took note of the users workarounds and aimed to provide solutions for it within the interface.

Using the user’s mental model as a guide

Now that the tool’s objective has been defined, how do we integrate it into our system? In order to do that, we must find out how users approach this task. This approach needs to be reflected in our interface somehow.

Consequent user interviews educated us on the many steps of the current workflow. It showed us how this process was approached by the user. To make our product intuitive, we’ll have to recreate this path.

Early concepts - These early concepts of filtering mechanism were messy but the exploration exercises were necessary.

Final workflow - Employing a Progressive Disclosure technique, this path is clear and simple. It reflects how a user approaches this task. This workflow became the pattern for all tools in our system.

Putting it together

With the users availability, rapid prototyping was employed to test concepts, validate and iterate to designs.

The workflow wireframe shows how a user can customize the content before the tool is evoked.

Applying modern interface

We applied relevant interaction techniques to help users accomplish their tasks. From visual design to front end coding, it was a highly productive collaboration.

Interaction techniques - These are helpful UI examples inspired by the observed user workarounds. 1) Tool tip displays character position. 2) Dynamic dropdown shows input validation and cursor position. 3) Added undo functionality.

  • Lessons

    Insights come from unexpected sources. Our front end manager suggested we employ a tab key navigation, noting the target user’s data entry background. This was an excellent idea, one that was easily overlooked. A highlighted target was my contribution. Collaboration is awesome.