Accolo 2.0 web application restyle
When I became the user experience lead at Accolo the 2.0 web application had been live for over two years. The application has it's quirks and it's full of shameful table layouts, but overall it's a solid application with many useful Ajax interactions.
About a year into the development of the 3.0 application our informational site was redesigned. I had promised our marketing director that I would touch up the app so that it felt more like the new site branding. Touching up turned into caffeine fueled over nighters of obsessive restyling. This was no frivolous adventure either. I wanted to make the application more more usable and lay the foundation for 3.0 in the process. Forms were restyled so that they all looked the same and had the same spacing. Many tables were ripped out, but alas many remained. With my days being spent designing for the new 3.0 application this was no time to be over zealous. Here's how it went...
Fig. 1 - Before - Accolo 2.0 in all it's monochromatic glory
Fig. 2 - After - Accolo 2.0 re-styled, "consistified" and 100% more orange
Many of the usability improvements came from making the user interface more consistent. This meant grouping buttons in the similar locations such as the page header toolbar seen in Fig. 2. There were many locations in the application where we had this primary toolbar pattern but it was never quite the same throughout. Being consistent really helps users learn an application and avoid that dreaded thing we call thinking.
Laying the foundation for Accolo 3.0 was almost entirely about labeling. 3.0 used clearer language and less jargon so I wanted to introduce this to the users. I relabeled the tertiary navigation and reordered the links so they were grouped with related pages (see Fig. 3.) I think it went pretty smoothly because I never received any complaints. Well, none that I knew about.
Fig. 3 - The heavily used candidates page with improved tertiary navigation labeling and grouping
I also took the opportunity to improve upon our inline editing interaction. Inline editing is an Ajax interaction that allows users to edit and save changes to a piece of text. The distinguishing feature of inline editing is that there are no form inputs to serve as visual cues to the user that the data can be manipulated; The editable data appears like normal page text. The main reason for using inline editing is to avoid the weight and increased saccades caused by form inputs.
The 2.0 application used inline editing in several places. It was really quite useful as long as you knew it was there, and therein lied the problem: discoverability. How do you visually indicate a piece of text is inline editable without introducing the same problems that caused you to avoid using a form input in the first place? I'm not sure I totally solved that problem, but Fig. 4-6 step you my solution.
Fig. 4 - Just about every piece of text in those tables is editable
Fig. 5 - I used a prominent form-like hover style, title help text and text cursor to indicate the field was clickable
Fig. 6 - If all goes well the user double clicks and edit mode begins
The re-styling of the 2.0 application was well worth the sleep deprivation. The users gave it lots of positive feedback and I got the opportunity to plant some 3.0 seeds in the ground.