Reveal CX redesign | UX/UI DEEP-DIVE


The client's B2B quality assurance application had been built by engineers (with out a UX/UI on the project) who essentially built the database first and then created a view for each table in the database. The user experience was sub par and there was no user flow to speak of. The company and their clients had been "making it work" for a couple of years before I was brought on board. After a two week audit examining every nook and cranny of the program I recommended a complete overhaul of the organizational structure, site map, menu system, language, user flows, user interface, and visual design.

SITE MAP


The primary goal was to organize the menu structure into logical task-based groupings. The secondary goal was to flatten the menu structure as much as possible.



LANGUAGE


During the evaluation phase of the project, I often found myself asking the client "what is 'x'?" and they would reply "oh that's actually 'y' but we call it 'x'".

Eliminating as much jargon and proprietary language as possible removed an additional layer of learning previously required of the user.

    MENU RESTRUCTURING

  • A. DASHBOARD
  • B. USER
    • B1 Search Users (formerly “User List”)
    • B2 Add User
    • B3 Import Users
    • B4 Passwords (new parent page to all password related views)
      • B4a Change my Password (formerly “Change Password”)
      • B4b Change Another User’s Passwords (formerly “Change Other User’s Password)
      • B4c Reset Another User’s Password (formerly “Reset Password”)
      • B4d Bulk Password Change
    • B5 User Jobs (formerly “Create Job”)
    • B6 User Notifications (formerly “Notfication Matrix”)
    • REMOVING > My Account (duplicated in the top right menu bar)
    • REMOVING > Change History (unused & resource intensive)
  • C. PROGRAM
    • C1 Create Program
    • C2 Create Program Groups
    • C3 Create Roles
    • C4 Assign Roles to Users (formerly “Add roles to Users”)
    • C5 Assign Users to Groups (formerly “Add Groups to Users”)
    • REMOVING > Add targets to Forms (unused & unecessary)
  • D. FORMS ADMINISTRATION (formerly “Call Monitoring > Forms”) Administration)
    • D1 Data Fields
    • D2 Business Intelligence (formerly “BI questions”)
    • D3 Feedback (formerly “Feedback Options”)
    • D4 Create a form
    • D5 Import a form (formerly “Upload a Form”)
    • D6 List & Link Forms (formerly “List Forms” and “Link Forms”)
  • E. EVALUATION
    • E1 Evaluation (formerly “Call Monitoring > Evaluation”)
    • E2 Search Transactions (formerly “ Monitoring > Search Transactions > All Search Options”)
  • F. CALIBRATION
    • F1 Create Calibration Session (formerly “Gathering”)
    • F2 Calibration Types
    • F3 Calibrator Groups
    • REMOVING “Create Session”(being incorporated into F1)
    • F4 Calibration Sessions
  • G. REPORTS
  • H. SEARCH (formerly “ Monitoring > Search Transactions > All Search Options)
    • REMOVING “Search by Invalids”
    • REMOVING “Search by Agent”
    • REMOVING “Search by Program”

TABBED PANELS


Now with task-based menu groupings, I opted for a menu flattening tabbed panel for each root menu item. This choice created an interface that allows the user to see the options available and switch rapidly between them when performing multi-step tasks.



USER-INITIATED MODALS


While modals are not best-practice in a mobile context, Reveal CX is a B2B desktop-only application, so I proposed pushing data forms into modals that would only show when called on by the user. From a visual standpoint this cleaned up the interface considerably and tucked action items into clearly marked locations.



USER FLOW


The existing user experience was choppy, user paths through the application were almost non-existent. The next task was to evaluate the different types of users and develop task-based flows that streamlined and daisy-chained each user types tasks in the application.







more coming soon

UI PROTOTYPES


Adding Likert evaluations to the application required developing an interface and process for building weighted surveys who's functionality was best communicated with animations built in Principle.

CSS/HTML REDESIGN


With the existing logo and brand colors as the one tent pole the client insisted upon, my goal was to increase clarity, readability, white-space, and create a more modern sophisticated look. I achieved this by using Google's Source Sans Pro and increasing the base font size by 33%. Large headers, (previously mislabeled or non-existent) were added for user orientation



DASHBOARD DESIGN


This was the "greenfield" part of the project as the previous dashboard only had user notifications. The goal was to give each of the five user types an "at-a-glance" status report and let them know what, if anything, needed their attention.







more coming soon

REPORTING MODULE DESIGN


The client had a directive from their customers to incorporate Likert style surveys as an option into the quality control process in the program.







more coming soon