Work

I tame wild workflows
I mind-meld with machines
I achieve wholeness
I fuse horizons
I build drilling tools
I make tedious work fun
X

Performance Application View prototype

of
The UI of this legacy application had grown stale, which was becoming a sales liability. My mission was open ended--to comprehensively upgrade and update the user experience.

Challenges
  • Application was highly configurable; design had to accommodate hundreds of variations
  • Changes to the codebase were tedious
  • AJAX had not been well leveraged

Actions
  • Completed competitive analysis of strongest competitors
  • Built a project brain trust
  • Managed whiteboarding sessions, wireframing, prototype iteration, stakeholder feedback
  • Conducted user testing and refined designs
  • Worked closely with developers to maximize improvements within technical limits

Results
  • The UX went from a negative to a positive differentiator compared to the competition
BEFORE
This is what the application looked like to begin with. It was mostly made up of long scrolling forms--functionally rich, but hobbled by poor usability. Users complained of getting lost in the process.
  • To humanize the UI and provide a visual cue for managers who are likely to review a number of employees consecutively, I added a large employee thumbnail photo.
  • Since users were complaining about scrolling and losing place, I added sub-navigation, dividing the long, unruly forms into easily traversible sections.
  • Because users complained about getting lost in the process, I added a progress indicator, and various context/completion cues--such as badges.
This summary screen uses chevrons to place the current stage in an overall process. I decided to show the most important summary information in a large font. This also serves as a landing screen and so a logical place for instructions, which I made collapsible. I added customizable video, fully configurable by the client.
I minimized scrolling with the use of cards containing summary information. Each card expands into a modal panel. (See next screen shot.) Based on customer feedback and to ease the transition for users familiar with the old UI, I included a toggle to a much improved scrolling form showing all content per section.
With a click, each card transforms into a modal window presenting part of the original functionality, but now in a clear context. To streamline the use case of a user entering information for several items consecutively, I included Next and Previous buttons. I also designed a local navigation mechanism that doubles as a visual status indicator for the current section.
X

Embedded System and Mobile Touchscreen Controls

of
Integrated Computer Solutions engaged me to help tackle some usability challenges in an industrial controls project--touchscreens for an embedded ultrasonic welding system. In addition to benchtop controls, the client required network capability and mobile access. The software had to support a variety of devices and screen sizes.

Challenges
  • The project was behind schedule
  • Requirements were vague and poorly documented
  • Our staffing was unstable
  • Client's personnel were overextended
On the bright side, some good user research had been done.

Actions
  • Worked with the client to better define requirements
  • Held a disciplined line against scope creep
  • Conducted structured user interviews based on early conceptual designs
  • Collaborated on intense whiteboarding to resolve design issues
  • Took responsibility for the substantial analytics area
  • Successfully pushed strategies for streamlining the overall project
  • Conducted user testing of prototypes and made consequent refinements
Results
  • Project successfully delivered on time and on budget
The analytics area required some interesting visualizations. I designed this interactive graph based on extensive structured interviews and user testing with engineers. (Note: this is a testable prototype. Visual design was done later.)
Users expressed a need to see how certain measurements vary during production. The result was this "trend line" design, showing parameter values for each numbered weld. The results can be swiped in four directions to show earlier welds and more parameters.
Tapping on a trend line expands it vertically, showing more detial, including color-coded warning and error limits, a y-axis scale, the parameter value for the highlighted weld, and high/low/average values. This approach hides information that amounts to visual clutter until the user wants to see it.
X

Global Application Style Guide

of
The talent management company I worked for had grown through acquisition, so each application in the “suite” had it’s own DNA. I led a project to create a company-wide styleguide to unify the look, feel, and behavior of all company products.

Challenges
  • Product and Engineering teams were scattered all over the country
  • Many teams resisted change
  • Other UX team members had made false starts.
  • There was little enthusiasm.

Actions
  • Volunteered to take over project
  • Divided labor among UX team member
  • Held regular meetings to negotiate and settle critical decisions
  • Solicited feedback from all product teams
  • Rolled out final product company-wide

Results
  • The finished style guide allowed the different teams to march toward a truly unified user experience
My team went through all company applications and categorized pages according to their layout. Some pages needed modification, but I was able to reduce the types to six. This screen is a summary view and navigation mechanism to access details of each type. Going forward with this approach we achieved consistent page layouts for all company applications.
Creating a page header with consistent look, behaviour, and information architecture was critical to this effort. As this spec image shows, details matter!
Vertical tabs were just one common component of our highly interactive UI. For each component, I provided complete CSS information as well as detailed images.
X

Customer Support System

of
The company I worked for decided to replace several legacy customer support systems with the Salesforce Support Cloud. The Finance department was managing the project and UX was not involved. Everything was on track until the CEO decided they needed to integrate a separate workplace social platform with Salesforce. That’s when the team asked for help from UX.

Challenges
  • Timeframe was tight and fixed
  • Analysts had given us mediocre ratings for customer support, which this project needed to turn around
  • Salesforce was new to all of us
  • Project was high visibility, high stakes, and high risk
  • No dedicated engineering personnel
Actions
  • Met with finance team to get a firm understanding of the situation
  • Brainstormed to generate three possible approaches
  • Successfully advocated for the most ambitious approach, which would create a seamless blend of functionality from both applications
  • Coded the selected solution
  • Conducted remote meetings to keep all players in sync
Results
  • Met all deadlines (internal, beta, and G.A.), received enthusiastic reviews from our customers, and dramatically raised our support from the analyst community.
This is a detail of a dashboard I built using Socialtext, PeopleFluent's enterprise social platform. This provided a channel for communication between customers and the company--and also among customers. Note the Support widget with its links to Salesforce Support Cloud features.
This screen shows a Salesforce Support page embedded within the social platform. I synchronized the content of the two systems using an iFrame and Javascript. I also customized both visual and function elements of the Salesforce UI to support this approach.
X

Budget Views Dashboard Widget

1 of 1
This widget shows both overview and detail of percentage spend against budgets. The dropdown shows different facets, each displaying a filtered list of budgets. Clicking on a row displays budget lines in the same format. Axure did not support the intended functionality, so I built this prototype using HTML, CSS, and Javascript.
X

Catalog Management System

of
This project automated a process that had previously been managed with various tools made for other uses. Users (support personnel) were frustrated with the old process, but generally had no suggestions for a new one.

Challenges
  • There was no Product Managment staff available for the project
  • There were no documented requirements
  • Engineering was expected to produce the feature on schedule nonetheless
Actions
  • Interviewed support employees who had been using the old process
  • Built a brain trust of personnel from QA and Engineering as well as support
  • Got brain trust feedback on prototype iterations to refine strategy and design
Results
  • The resulting design put the necessary elements in a streamlined workflow, which made the process intuitive enough that most customers could manage it for themselves. This saved the support team between 2 and 4 hours every day.
The workflow starts with a standard search-and-results screen.
I had to support use cases that involved a fixed sequence of steps for creating a catalog and also maintenance to existing catalogs. I settled on a tab design which conveyed the fixed sequence but equally represented the facets of an existing catalog that could be maintained at any time. The History tab shows only published versions of a catalog, allowing comparisons and exports.
I used various methods to communicate status and progress--especially important since some processes could take up to a minute. Whenever a user action initiates a process, a progress indicator displays close the the action.
This screen shows the Audit Trail, which includes many operations that do not affect publication (such as validation successes and failures).

Statement

Software is only as good as the user experience it delivers. And user-centered design is the key to a great user experience. Drawing lessons from thought leaders and my own experience, I have developed a process based on fundamental user-centered principles, adaptable to various situations, and proven.

It takes a variety of skills to execute on this process. Of course it takes creativity in the usual sense of the term, i.e. imaginative use of a medium. Even more, it requires creative problem solving which in turn implies a fair amount of analysis. This is especially true in complex content domains.

User-centered design also presupposes skills such as careful listening, proactive communication, organization, flexibility and planning--in a word, collaboration. Some years ago it dawned on me just how critical healthy collaboration is to creating quality software. As a designer, I am usually not the foremost domain expert on a project. So I have learned to seek input and feedback from wherever the expertise may be. In any case, all roads lead back to the user, and design prototypes must be user tested to prove their success.

Before getting involved in software, I had background in visual arts and an admiration for great tools. Aesthetically, I strive for simplicity and elegance, keeping all that is essential, removing all that is not. Along with a user-centric process, this approach produces intuitive experiences allowing users to feel confident in their tools and stay focused on their work. It enhances productivity, promotes attention to higher-level objectives, and ultimately justifies investment in the user experience.

Contact