Visual SQL Statement: Wireframes
Visual SQL Filtering: Wireframes

I worked on an early version of an online chart building application in order to redesign it to better serve their user personas. Not many customers were adopting the early version of this online application. 

I did some user testing and discovered that the users for this application were Business Analysts, but the functionality and the labeling were written and designed for more of a System Administrator type of user. 

A key to the success of this project was in the filtering options available to the user. The filtering on the user's data were essentially SQL statements, but the Business Analyst persona did not necessarily know how to write a SQL statement from scratch. 

A visual representation of a SQL statement was essential, but I also had to show a clear hierarchy as the application allowed for an infinite number of options when composing and editing filters.
The solution also needed to make good use of a drag & drop interface to match the patterns already available in the application, in this example a user is dragging a column header onto the filtering options panel then choosing SQL options.
There are visual options available to add AND/OR options as well as grouping.
There are are also options to edit the filters on a graph, which is a nice option because the user can opt to refresh the graph while the options panel is still open, so they get feedback on-demand.

The response to this and other changes I made to the application has been very positive: the opt-in rate for this application for new customer subscriptions went from around 5% before the release to 30% after the release.

The full prototype is available here. Thanks for looking. 
Visual SQL Statement: Wireframes
0
11
0
Published:

Visual SQL Statement: Wireframes

A visual approach to writing SQL statements, for user who don't necessary know SQL.
0
11
0
Published:

Tools

Adobe XD

Creative Fields

Copyright Info

Attribution, Non-commercial, No Derivatives

Read More