One of the major pain points we had in EHQ Admin was the navigation. Adding/editing a tool or a widget was a pain. As more and more features were built into the app, it just became harder to get to certain common tasks.

Inspiration

I’m a huge fan of Quicksilver and Alfred on OSX. The power it gives the user is unparalleled.

QuickSilver Screenshot

A screenshot of Quicksilver

Alfred App Screenshot

A screenshot of Alfred App

I love github’s find files interface (which incorporated the programmer-intuitive ⌘+T onto its web interface). Made popular by Textmate, the Command/Control + T Go-To-File has been in use by programmers since years. Here’s a screenshot from Sublime Text’s ⌘+T interface: Sublime Text's ⌘+T Interface Screenshot

Sublime Text's ⌘+T Interface Screenshot

Another awesome feature which caught my eye was Atlassian Jira’s Dot ‘.’ and Comma ‘,’ Shortcuts which pops out a search box and common tasks which lets you type a task.

Jira DOT Interface

Jira DOT Interface

Observation and Interview

First thing we did was study user patterns. What are the tools they use in EHQ, How they navigate to a tool/widget and add them. We set up a demo site and asked people to create a website from scratch. Most of them said if there was a shortcut to get to where they wanted to, it would’ve reduced their time to almost half. Having shortcuts listed in the site itself would become a long, un-trackable list of links. Searchable list seemed like a good idea but placing it near a widget would make it just another widget. We wanted something which would be accessible site-wide.

Brainstorming and Prototyping

We did brainstorming on the idea and came up with tons of features to be incorporated. It had the capability for switching between projects, adding, editing deleting stuff, manage settings etc.

One of the first prototype paper sketches:

We proposed a couple of UI options. Admin Task Search

UI For Admin Task Search: This one was discarded as it interrupts the user from changing his mind, and since lightboxes are considered to hinder accessibility.

Then, we came up with this: Admin Task Search

This worked great and we started building the tool. Junil wrote the ruby code and Adhil crafted the JavaScript. Some time later, he made a jQuery plugin out of the tool and added keyboard shortcuts also! Check out the plugin here — https://github.com/liberlabs/actionsearch

See it in action in the video below: