Accolo 3.0 web application
Accolo is a Recruitment Process Outsource (RPO) based in Larkspur, CA. So what does that mean? That means that Accolo works with companies to either augment or become their recruiting department. It's a service based business that relies heavily on it's technology to achieve economies of scale. I served as the lead user experience designer for the Accolo 3.0 application.
When we set out to rebuild the application we knew we wanted to standardize our technologies. As a designer I knew we needed to recreate most of the existing functionality, but this was our chance to improve.
The first thing I wanted to do was improve the information architecture. The previous 2.0 application had an unconventional way of organizing the application. Instead of organizing the application by functional areas it mixed user roles and functional areas together. The exposure of the user role in the navigation was less than ideal and it caused the navigation to be deeper than it needed to be (see Fig 1.)
Fig. 1 - The Accolo 2.0 navigation had three levels of navigation
I wanted to remove this extra depth of navigation in version 3.0. You can see in Fig. 2 that the new primary navigation more or less the mimics the secondary navigation shown in Fig. 1. I also wanted to remove the tertiary navigation from the content area of each page to free up the page real estate for it's primary function. Some other repeating user interface controls were also moved into the right navigation with same goal in mind. The one thing we were not able to for the initial release was the ability to collapse the right navigation so it couldn't be seen. It would have been a nice for the user to be able reduce the page noise caused by the right navigation, but that's what enhancements releases are for.
Fig. 2 - The Accolo 3.0 navigation was reduced to two levels
One of the benefits of sitting in an open office is that you hear and see what people are doing. Of course, not everyone would call this a benefit. If you are a user experience designer it helps to be surrounded by your users because you get to know how your product fits into their daily routine. I noticed that hiring consultants lived in a lot of different places, not just the Accolo application. They were on the phone talking to hiring managers and phone screening candidates. They were in Outlook scheduling interviews and corresponding with candidates. They were hiting the job boards sourcing. Of course, they were in the Accolo application as well. Given the fact that the user's attention was frequently scattered I felt it was important to make navigation as convenient as possible. The user should be able to get to where they want to go quickly.
I have always admired Apple's search-as-navigation approach that is used in OS X Spotlight as well as their website. That user interface seemed like an ideal fit for our application. This inspiration took form as the global search design seen in Fig. 3. After you type three characters or hit ENTER the request is sent, the now ubiqutous Ajax spinner briefly appears, then some search results with important details arrive. The results can be paged, but Google has made me a search dominate user so I would try to refine my search before paging. But that's just me.
Fig. 3 - The global search serves as an alternate form of navigation... Yes, that does say Master of the Userverse
It may be clear by now that efficiency is a common theme in Accolo 3.0. Efficiency is one of the main advantages of Ajax and it has inspired a lot of new design principles common in modern web applications. One of these modern principles is to stay on the page. If the user wants to perform an action on a piece of data on their current page and that action can be completed in say, a small form, don't disrupt their current context by navigating to this small form. Instead, use a modal window to focus their attention on the form and avoid disturbing what they were previously viewing. 3.0 makes heavy use of the modal window pattern shown in Fig. 4. The 2.0 application also had similar functionality, only it used "drawers" instead of modal windows. They were called drawers because activating them would cause them to slide out from an area on the page like a drawer. The problem with the drawer was that it often caused some undesirable scrolling behavior and the user could lose their place on the page. The modal window avoids this problem by masking the rest of the page and making it very clear where the user needs to focus their attention.
Fig. 4 - The modal window focuses a user's attention and leaves their current context undisturbed
To this point I have focused a lot on improvements that benefit our heaviest users, Accolo's hiring consultants and to a lesser extent the hiring managers they serve. However, a critical audience for the Accolo 3.0 application is the job seeker. Job seekers find their way to Accolo's online interview process by seeing one of our postings on a job board, a referral from a friend or directly from Accolo via the referral source engine. When they come to Accolo's application they have probably never seen it. Since each job seeker is essentially a first time user, it means the process needs to be clear about what is expected and not give them any reason to quit before finishing their application. It's mission critical for Accolo to have candidates for their jobs, so the job seeker must be able to complete the application process easily.
The 3.0 job application process was designed to be simple, transparent and convenient. The first place I started was our apply/refer page shown in Fig. 5. This page displays the job description, a few bits of information about the job and two ginormous buttons to indicate what Accolo would like them to do: Apply or refer someone to this job. This is all pretty straight forward, but the outsourcing aspect of Accolo's business can cause some confusion for job seekers. Job seekers would frequently call to make sure they were applying to Company XYZ because the URL didn't look like XYZ's site. To help mitigate this confusion I started by using a neutral black and gray color scheme. The idea was to not interfere with the customer's branding and give their logo more visual weight.
Fig. 5 - A neutral color palette was used for Accolo's online interview process in order to not interfere with customer branding
Next comes the transparency and convenience. As soon as a job seeker applies (see Fig. 6) they will see a sequence bar at the top of the application. The sequence bar let's the user know how many steps they have to complete so they have some idea of what lies ahead. In addition to the latter, consistent message text at the top of the page tells them what they are about to do and why Accolo is in involved. Even as the user enters their information in the form the adjacent message panel tells them why this information is being collected and/or tips on completing the form field. The main goal is to ease user anxiety (job interviews are stressful enough, even online ones) and keep them engaged. If they happen to lose interest the appliation saves state along the way so no data is lost. This is especially helpful when the job seeker gets to the open endeed questions and might want to take a break. The application will also send a reminder email to the job seeker asking them to complete their application.
Fig. 6 - The online interview process in 3.0 uses a sequence bar and consistent help text to set user expectations
These are just some examples of the many improvements that were made in Accolo 3.0. Leveraging a rich JavaScript library like ExtJS enabled us to build what I believe will be a more efficient and ultimately more pleasurable experience. It may seem odd, but I prefer for users of Accolo 3.0 to spend as little time physically interacting with the application as possible. It's far from running on auto-pilot, but it's progress nonetheless.