SMART is a web app that pulls in large amounts of data and allows database analysts to query the data based on custom parameters. It is a custom in-house app built for Capital One analysts to improve data analyzation with a future goal of expanding it for other teams in the company to use.
I was called in to improve usability by redesigning certain features of the app as well as create new UI for features that are to be added in the future. I first created wireframes and prototypes using the Sketch app. Because the project was initially written in AngularJS, I learned this framework in 1.5 months then coded the final approved designs.
One major area that I worked in were submission forms. Initially, all the form fields were statically coded into the html page. With Angular, however, I created dynamic forms fields that can easily be modified/arranged and instantly validated.
As you can see, the “after” form follows best form practices:
- The label sits on top of the field for quicker scanning
- Help text underneath the field instead of inside, which causes text to disappear after user starts typing in it
- Additional “information” icon that reveals a description/more information about the field
- Since the majority of fields are required, only optional fields are marked
In additional to following best form practices, the “after” form has also be redesigned to:
- The different “kinds” of fields are separated into tabs whereas they were all together in one long list before
- The filters on the bottom now has its own tab so that those fields will not be missed before form submission
- Select fields that have 5 for less options have been converted into radio button fields to clearly display options (ex: Date Frequency)
Wireframes for new “Job scheduling” functionality
The ask: users should be able to save the filters they applied to a dataset then schedule a job to run using these filters at their specified times. Users can also go to a page to manage these saved jobs.
Wireframes for new “add column” functionality
The ask: users should be able to create and add a new column to the dataset. It can be used to compare existing columns and can be filtered.
Changes that I have made to the submission forms have been implemented and are available for use. The wireframes I created are approved and will be used for future development.
May – Sept. 2017