An outline of a project re-design proposed to CLIENT for a business & developer test environment. The completed project was celebrated by the client and presented as part of World Usability Day Seattle 2016.

Project included an accessibility audit, comprehensive UX Study, user testing, and the build of a final prototype.

NOTES TO CONSUMER:

Certain details within this report have been omitted or changed for the purpose of security. The process displays the co-branding of a company product with a similar division belonging to the same parent company.  Due to proprietary restrictions - Not all of this document can be shared in detail. 

Role

Use Case

Developer (Dev)

File/repo bugs. Verify bug fixes. Verify features and check for regressions

Quality Assurance (QA)

Repo bugs, develop fixes for bugs and verify bug fixes. Develop (and verify) features without causing regression

Business Analyst

Verify current behavior. File bugs & verify fixes. Realize feature solutions

Business Unit

Explore OneID as a product and develop CSS overrides. Verify client config & check for regressions

Project Manager

File/repo bugs. Verify bug fixes. Verify features and check for regressions

Solutions Engineer

Develop CSS overrides, verify client configs & check for regressions, Verify L10n strings & assist BU in client config.

The key would be for me to simplify the UI without alienating any specific role.  The test site had to be quick and easy to use. The primary user base would define the priorities of the UI and it's placement within the test site.

I believe we can clean up the existing UI and allow for BU’s to have a branded experience while keeping the purpose of the test site in focus. This document outlines my process as I attempt to do just that.

NOTE: As an improvement to our multi-tiered user role, It should be mentioned that the UI will save to the Last configuration used. This should help to eliminate the need to constantly reset your environment to the use case for your specified role.

Look & Feel:

The first and easiest piece of the transformation involves looking at common design cues & patterns.  Co-branding our style guides (Division 1 & division 2*) in a more meaningful way, will contribute to a cleaner and more professional end product with an overall improved experience. This also helps the user to understand the relationship between the two products.

It is important that the over all site maintain existing styles and patterns inline with our company brand and vision. The challenge for the look and feel is to unify key pieces of the product without causing a "jarring" experience for the end user between the test site’s “landing page”, and the sign in experience.

Content prioritization process:

The existing form fields are where a lot of the UI changes need to happen.  A large chunk of the change involved in the re-design process involves re-prioritizing the form fields and additional content, in a way that is more meaningful to the primary user base. These changes had to be made without alienating any of the other rolls. Whenever an opportunity arose to improve a specific piece of the UI, I made those changes and documented the process*.

*Note: I am currently unable to show the product as a reference point - My apologies for lack of clarification -
In place, I have wire framed a high level product view that Is shown below.

Test Site screen shot

1.) Header, Login, Status, CTA

The product header is lacking any branding styles or identification. The brand is simply bold text, justified right, on a white background. The user status is left justified under the header and is currently using a default bootstrap style guide.

Status Container
Prior to logging in, status is shown as a Bootstrap red warning box.

Once logged in, the status is shown as a Bootstrap green success box with user identifying attributes included and stacked below the status msg:

  • email
  • username
  • Variable (omitted)

Improvement

Across several of the parent company brands, we find login placed within the header and aligned to the right side of the screen. Due to the nature of this product as a test site, it is recommended we use existing patterns common to the various existing divisions within the company. In this way we are able to best represent an actual guest experience. This pattern is also common with the majority of our various business units

(Sample patterns)

The primary sign-in call to action is also be a part of the header and now aligns with existing BU pattern.

The Diagram above shows a header that now is consistent with existing [DIVISION 2] brand guidelines, Header patterns,  and color template.  It draws focus with the existing parent company avatar representing a logged in experience. The avatar also drives the eye to login details and location. It then made sense to include the Logout option which I took out of button format so to minimize focus. Now that we have aligned company patterns with existing product styles, It is suggested that the logout will be more easily discoverable. 

Moving the login process opens more room for the CTA’s. We enlarged all the CTA's so to make targets easier on mobile devices.

 

CTA REVISIONS

The CTA's are dynamic and change based on what level of trust you hold. They are also now grouped in a meaningful way that is based on your current state and/or which program feature you are testing.

2.) Configuration form priority

The first improvement has to do with a re-prioritization of content:
NOTE Actual line-up omitted for security purpose.

Current test site form order

Proposed test site form order.

Label one

Label one - Remains unchanged

Label Two

Label ten

Label Three

label Two

Label Four

label Seven

Label Five

Label Three

Label Six

Level Nine - This is now hidden as part of an advanced setting. This means this particular piece was almost exclusively for site developers

Label Seven

Level Four - This is now hidden as part of an advanced setting. This means this particular piece was almost exclusively for site developers

Label Eight

Level Five - This is now hidden as part of an advanced setting. This means this particular piece was almost exclusively for site developers

Label Nine

Level Six - This is now hidden as part of an advanced setting. This means this particular piece was almost exclusively for site developers

Label Ten

Level Eight - This is now hidden as part of an advanced setting. This means this particular piece was almost exclusively for site developers

Added/removed/Changed:

 Studies suggest labels should read top to bottom instead of left to right.

Studies suggest labels should read top to bottom instead of left to right.

Changed Features

Label alignment in new design is in a top to bottom reading format. This aligns with existing design patterns and meets best practice standards.
Prioritization of form fields base on user input from the various roles that use test site.
Reset configuration moved in line with header and changed to link to diminish the influence. Proximity to the title “Configuration” suggests the functionality.  No longer competes with the Primary CTA’s on the site.
Set-Config: This CTA changes from secondary color to Primary color When form becomes "dirty" (has changed from default setting through a user interaction). This changes helps to indicate to the user that the form submission is required in order for the configuration to take place.

(Further elaboration on dirty forms: If a user attempts to engage a dirtied form without saving the configuration through the Set-Config call to action. the form fires off a modal alert to inform the user that the current configuration has been changed but not saved... which could cause “unexpected behavior” within the login experience. The alert also allows the user to disable the warning for future scenarios. This feature is to benefit the case of the power users.

Select Clients INPUT field: The new field is an input field with quick search (displays results from the list as you type). With each key stroke the options limit to what is available. The input field also shows the Last three ID’s used. These ID's are immediately available through form focus and remain above the quick search list. This allows users to quickly toggle between clients without having to search for them in a lengthy drop down list each time.

 

Added Features

Advance settings Section: We grouped non essential ui into a collapsible container. This hides potentially confusing UI from our primary users who may not understand the functionality. This also gives us more visual space to work with on desktop and especially on mobile.

Confirmation Message: Confirmation message appears when the “set config” button completes the configuration. The color of the set config turns from Secondary to primary when form is dirtied. When the form is cleared successfully and the configuration is set, a confirmation message appears near the CTA and the CTA returns to secondary color to indicate the status has been accepted.

tool tips  In several cases, User research indicated confusion around how certain UI would affect or change the form fields. For the UI fieldsthat were not readily known, I incorporate took tops to clarify any confusions or uncertainty about these UI components and what they did.

UI tool tips take virtually no room and provide further explanation around any interaction that may not be clearly defined or readily known.

Removed Features

I removed the primary drop down selectors from base.  We actually found a better way to engage the user through intelligent form search. The existing UI was not comprehensive and the list was beyond the recommended number of options to place in a selector.  

3.) Configuration set up and call to action

Baseline navigation CTA's were entirely too confusing. It was not understood how they were to be used in correlation with the rest of the form. This was a pain point we found repeatedly across all of the roles. I did not find a single role that could correctly state what all the UI elements were and/or what they did. 

Improvement

One of the biggest changes made was to the Client selector ID piece of the form. Previously an input form with a  drop down of the most frequented business units and their prospective projects, I made a severe change that allowed a more intuitive approach.

 Diagram :   Modified input form W/ autocomplete & predictive typing –Current state is not selected)

Diagram: Modified input form W/ autocomplete & predictive typing –Current state is not selected)

 Diagram:  Modified input form W/ autocomplete & predictive typing – PREDICTIVE TEXT on focus

Diagram: Modified input form W/ autocomplete & predictive typing – PREDICTIVE TEXT on focus

 Diagram:  Modified input form W/ autocomplete & predictive typing – PREDICTIVE TEXT displayed as user types.

Diagram: Modified input form W/ autocomplete & predictive typing – PREDICTIVE TEXT displayed as user types.

By blending the functionality of an autocomplete Input form with the frequently used ID list that displays on focus, We eliminate the need for the CTA to drive the search functionality as shown in the previous iteration. The recommendation is that we elevate the last (max) three client id’s at the top of the form to be shown on focus for easy user selection.

This allowed us to move the "reset config" call to action, inline with the configuration title:

As we previously discussed. The Set config is a required Call to action that causes the form to submit and the new settings to be engaged.

Previously, the elevated CTA would have competed visually with the true Primary calls to action at the top of the form.  However, Using the style guides from the new [division projcet], I was able to find an alternate CTA style that allowed us to implement a diminished CTA that no longer competed with the primary calls to action. 

 (Reset as link – Default Set Config with no changes to form)

(Reset as link – Default Set Config with no changes to form)

 Set Config has changed color to indicate changes have been made to the form that need to be saved

Set Config has changed color to indicate changes have been made to the form that need to be saved

 Default CTA color returned once changes have been saved. Save message fades in and out w/out required user interaction)

Default CTA color returned once changes have been saved. Save message fades in and out w/out required user interaction)

 Return link to  Default State.

Return link to  Default State.

4.) Sample code display box w/ actual configuration code

The Sample code box at the base of the UI is essentially the output of the current configuration. I moved the UI into the right hand column of a 50/50 page split so to elevate and minimize scrolling requirements. This seemed to increase the perceived emphasis of the control, as it was now inline with the rest of the form. Since the code was not important to most roles, I set the into an accordion that could be minimized by default and only used when needed. This should hopefully eliminate the confusion by any non power user.  In addition, I added a CTA that allowed users to quickly and easily copy the code without accidentally missing something that could cause the code to fail.

Sample Code container

5.) SSL certification and compliance

Further sections of this document needed to be omitted due to proprietary details. As such, this concludes this report sample. 

 

RETURN TO CASE STUDIES