Use the escape key or press here to close detail view ⇒

UX Artifacts and Examples

Select any of the examples below to see more details.

Improved Login Form

The original form shown in the background was not RWD, and was in dire need of an update.

My update is shown in the foreground. Click or tap here to see the actual RWD demo. (link will open in a new browser tab or window.)

Notice that it is responsive - its view works in any device: computer, tablet, and smartphone - and it changes to fit while resizing it.

ACN Event

Finished prototype for RWD event web page. (link will open in a new browser tab or window.)

Please note that this is a prototype, and some of the links lead to old content, as the new content was not yet made available to me.

ACN Long Beach Event, 12/2019

The requirements document that was placed on my desk.

A primitive wireframe for laptop and desktop can be seen here.

An early digital wireframe for laptop and desktop can be seen here.

A second iteration digital wireframe for laptop and desktop can be seen here.

An early digital wireframe for smaller tablets and smartphones can be seen here.

An early RWD prototype can be seen here.

A second iteration of this prototype can be seen here.
In this iteration, I added an event countdown, and I made changes to the menu and menu icon, based on user testing.

"Tiles" Interface
After I finished the design of this interface, I created the code for the final prototype of an HR benefits administration app for hundreds of Fortune 500 clients.

The initial proof-of-concept for this interface is here.

Corporate UX Presentation Guide
Similar to a style guide, this UX Presentation Guide outlined the "look-and-feel" for all Conduent software products.

It featured a code library, so developers could select a page feature, and the underlying reusable, modular code that I created for them would be automatically saved into their browser clipboard, enabling them to simply paste the code into their projects.
HTML Formatter
I created this tool at the request of my design team to enable them to create color-coded HTML examples that could be easily pasted into documents they were composing.

The actual tool is here.
Park Family & Cosmetic Dentistry
An upscale Naples, FL dental practice. I helped them grow from a small practice with two doctors and a staff of three, renting a small space to a practice of six doctors, and a staff of thirty people. They now own the building in which they formerly rented office space.

This multi-million dollar practice can be seen at
UX RWD and Micro-Interaction Demonstration

Click or tap here to see this in action. (link will open in a new browser tab or window.)

Compass App Online (Early Prototype)

Click or tap here to see the early version of the interactive prototype. (link will open in a new browser tab or window.)

Please note that this is an early version prototype, and not all functionality is available.

ASG - Allen Software Group
Naples, FL enterprise software design and development company.
ASG - Allen Software Group
A 2008 redesign of the ASG corporate website.

This period was, for some inexplicable reason, characterized by a desire to have websites that were incredibly informationally dense, with small, often low-contrast fonts.

Fortunately, with the advent of smart phones, most of us have moved away from that type of presentation - except for the low-contrast fonts, which are still very common.
A social app for the VA that allows veterans to tell their own story on a timeline.

Below are some of the actual artifacts I created for this project. Click on an image to enlarge. (Clicking a second time will return the image to its original size)

See the actual project documentation I created here. (MS Word Doc, 5.6MB)
78 Square Tech Cooperative
A Madison, WI technology cooperative / think-tank.
Jacksonville, FL sofware company that specialized in recruitment and HR onboarding / offboarding software.

Using RecruitMax software, Wynn Resort in Las Vegas, NV processed over 9,000 employees in 90 days - an onboarding record that still stand today.

Read about it here and here.
Vurv Technologies
Formerly "RecruitMax"

Vurv was acquired in 2008 by Taleo for $128.8 million.
Citibank Wireframe Generator to create ADA compliant wireframes
I created this generator to create interactive wireframes that meet ADA / WCAG requirements.

This tool saved me and my team hundreds of hours of wireframe creation time over the course of the SAWGRASS project.   additionally, the development team utilized this tool to ensure the framework code they created was ADA compliant.

To use: Open the generator, add wireframe features, click the "Generate HTML" button, (bottom of generator) then go to the top of the HTML code screen and click the "Create Page in Browser" button to see the actual wireframe you have just created.

Try it here. (Opens in a new tab or window)
Citibank SAWGRASS Wireframes and Artifacts
Here are a few examples of the wiredframes I created for the SAWGRASS project, which was so successful, it is saving Citibank billions of dollars per year in customer service representative in-call time.

uc35-walk-thru.pdf This is a series of three storyboards for a SAWGRASS use case. (PDF format, about 945 KB download)

uc059-increaseDenied.gif A single storyboard for a simple use case. (GIF image, about 27 KB download)

ProposedChanges-UC216-SB005aNOBALCON.gif A single storyboard change proposal for a use case. (GIF image, about 80 KB download)

Actors-Introduction.doc I created this introduction to be read to usability test participants.   Its purpose was to make it understood that it was the application being tested, not the participant.   I was told by many test participants that it put them at ease, which was its primary purpose. (MS Word format, about 29 KB download)

2009-Florence-KY-Side-by-Side-Feedback-and-Observations.pdf This was one of many observation documents I created while at Citi.   This one was the result of an entire day of "side-by-side" observation sessions I conducted in 2009 at the Florence, KY customer service center. (PDF format, about 1.4 MB download)

What-I-did-at-Citi.doc This is an explanation of what I did on the Human Factors Engineering (UI/UX) team at Citibank. (MS Word format, about 40 KB download)
VA Medication Reconciliation and Allergy Review (MRAR) Clinical App
I designed the UI of this VA in-clinic app that allows caregivers to identify dangerous allergic reactions and medication combinations that may be harmful or even fatal for the veteran patient.

Screenshots may be seen here.

See my progress indicator, upon which the progress indicator (at the top of the individual pages) of this app was based here.

This progress indicator displayed the total number of allergens or medications, and the number of allergens and medications that have been reviewed, (in this case) as a fraction.

This progress indicator can display results as a fraction, or as a percentage.
New York Life AARP Customer Service Portal
I initially coded this to be RWD (Responsive Web Design) so that it would render nicely on tablets and smartphones, as well as laptop and desktop computers.

When I showed my work to my manager, I was told to take out any code that made it RWD.

I was stunned.   I asked, "Why?!"   (The data I had compiled showed that there were more people accessing the portal with smartphones than with desktop computers.)

My manager replied, "Our demographic doesn't use smartphones to access the internet."

This portal is still, to this day, not RWD.   See the actual portal here.

Skuomorphism Example
Skuomorphism is the practice of making something in the digital realm mimic the appearance and action of something in the physical realm.

Click or tap here to see a real-world example of skuomorphism that came up during my time at Xerox.
My AIM (Annuity Information Management) UX Assessment for NYL AARP

My Assessment of New York Life's AIM system details some user problems and solutions. (PDF format, about 173 KB download)

Please note that this portfolio is a work in progress.

I created this entire website by hand using HTML/HTML5, CSS/CSS3, JavaScript, VBscript, and SQL.   I coded it character by character, with absolutely NO external "libraries" or "frameworks."

This portfolio will grow as I have time to include many more examples - including artifacts that will give a better picture of what the end-to-end UX process looks like. (I am VERY busy doing UX work at the moment - Thank you for your patience!)


Go To Top of page | Disclaimer | UXinnova is a Veteran Owned Business