PROBLEM AREA
This UI component XPath Builder and Results, was a part of the larger product Adobe Framemaker 11. The idea was to include the XPath Builder with the Results pod, so that the user can continue working within the pod instead of having to focus on different areas of the screen.
It was a complex workflow taken up by proficient users, who primarily use the keyboard. They also create very complex queries and often search for multiple queries at the same time.
SOLUTION
During this milestone, multiple iterations were created, validated with stakeholders, and redesigned based on the feedback.
Wireframes:
These show the different versions as I discovered nuances of the workflow with successive iterations and validations:
Users needed a list, and queries are long:
Queries are made first, and run on different scope. Users often run multiple queries at a time. Users needed a list, and queries are long:
People generally work/read from top to bottom. Matching the workflow to define the IA. Queries are made first, and run on different scope. Users often run multiple queries at a time. Users needed a list, and queries are long:
Final Design:
This was the final design. I used the typical workflow to define the IA and the layout so the eye would naturally be oriented from query to results and continue using this multiple times in a single session.
Visual specs were done keeping in mind the following:
- Responsive on increasing and decreasing size of the pod
- Localization of strings
- Using elements of Gestalt to present a clutter-free UI
Date of Project: Jan 2011-June 2012
My Role: Primary Interaction Designer
Design Portfolio 