Problem

My client, a frontend software engineer, developed BuildBinaryTree.com to help fellow developers generate binary tree test cases efficiently and accurately. He needed help to improve his original version for a better overall user experience. Please note that this tool is not intended to be used on mobile devices, as our target users are mainly software engineers practicing coding algorithm question (e.g. Leetcode.com) on desktop.

Solution

I wanted to design a new interface that’s more responsive, accessible, visually appealing, and intuitive to use for first-time visitors.

Usability Study

A usability study is conducted with three participants, users were asked to critique the tool based on both the functionality and the look. Click HERE to interact with the original BuildBinaryTree.com.

Three actionable insights are identified in accordance with participants’ feedbacks:

• Choose a color combination that’s higher in contrast and passes accessibility standards, as the blue texts and binary tree graph on the white background might not be clear enough to some.

• Increase the overall responsiveness of the page, as different sections are overlapping with one another.

• Rearrange the system message (“Copied Successfully!”) to somewhere closer to the copy button for better indication.

There are some other nice-to have functions mentioned by participants:

• Allow canvas to be zoomed in & out

• Adjust node angle by dragging

• Interact with keyboard only

Cost-Benefit Analysis

A cost-benefit analysis is discussed together with the developer, taking into account each task’s priority and efforts to complete.

Wireframes and Iterations

The first version of wireframe is created incorporating the results from our usability study and cost-benefit analysis:

The design reflects the solutions to solve user pain points in the following ways:

• Moved the how-to-use instruction box to the bottom of the page, and make sure the texts and the box are responsive to different screen sizes.

• Updated the color of the tree and the buttons to the classic black & white for easier readability.

• Created a boarded canvas in the middle for the tree graphs with zooming functions.

• Rephrased the texts for clearer instructions.

• Moved the system messages right below the button.

• Added grey background to the canvas and the text box in sync.

The developer reviewed the above wireframe with me. After further discussion, we finalized a revised version to proceed with:

Final Product

Here’s the most recent version of BuildBinaryTree.com in use, iterated based on my design suggestions.