Screenshot After Re-skinning Work
Mental Models performed for UpShot
 


Screenshot Before Re-skinning Work
 

Mental Notes:

The task here was to—in a one month time period—create an updated and more business-like look for this web-based CRM application. And the update had to be accomplished via new art and stylesheets that the engineers could seamlessly "drop-in" to their build; no changes to the structure of the page were allowed, we had to work with the existing framework.

Interaction Design:

In order to enhance usability, we—among other things—minimized visual clutter by decreasing the number of colors used and by unifying the width of the section header tabs. (Additional changes, such as use of alternating row colors were not feasible due to pre-existing design constraints.) We also created a more tangible separation between navigation tabs, action buttons and content. (As shown in the "before" shot to the right, these elements were commingled in the original design.)

Visual Design:

As mentioned above, we were not able to make all the changes desired due to the constraint of being able to change images and stylesheets, but no page code (where useful items such as image size, class calls and table structure were defined). In addition, the Client required us to stick within the 216-color Netscape palette. However, we were still able to make great improvements in the aesthetic appeal of the pages. We imposed a more up-to-date design sense—for example, we eliminated large curved corners where possible—and we implemented a more business-like color scheme. Plus, as hinted at in the animated gif above and the glyphs below, we updated the iconography.

Development:

The "schematics" below show how we cut up the page to understand the existing layout. We did similar work to see what the classes in the multiple stylesheets. After careful analysis we were able to provide images and stylesheets that could overwrite the existing files without impacting performance or requiring engineering changes. This understanding of the existing infrastructure also allowed us to make suggestions for changes that only required modest changes by engineering, yet had a big payoff. (This is how we were able to make all header tabs same width and color without affecting reports that used some of the same styles.)

Schematics Used to Assess Page Structure