The original design was completed by its programmer in 2009 and worked well enough to carry the company through millions of sales for 6 years. Administration, HR, CSR’s and the shipping dept. all utilize this web app to do their jobs.
The Failure Rate was fairly high amongst its users. Customer support is outsourced to the Dominican Republic and the setup was not very intuitive. Buttons were very small with no graphical delineation and spacing was tight. This caused a lot of small repetitive errors from the customer support team that was overwhelming the workforce at the stateside office.
After Using it I knew there was a better way. My main priority was to identify the root causes of the user errors and being rid of them as much as I could while interfacing for humans. (PEBCAK)
This system does everything. Everyone in the company uses it from the top down, so a secondary priority was to make sure it worked on all devices and laid out specifically tailored to certain users on certain devices.
This meant making sure I used up all a screens real estate for legibility regardless of the screen size, so I set about making that my goal with a component style setup. To do this I started with a stripped down (grid only) version of Bootstrap to meet the responsive needs and keep it as compliant as possible.
The owners primarily use the system to check daily stats and are always on the go so the opening page gives a breakdown of these for the day or custom date range. These daily stats can be customized in settings to the timeframe they like or changed on the fly for one time use, all from their mobile phones.
To help in maximizing screen space a left and right drawer system was used. For mobile, it was configured to work off of a left/right finger swipe action to keep it intuitive. A first time walkthrough was created to explain the new setup to users with step by step popovers on helpful elements. Easing the process of learning the drawers among other things.
The bulk of design time was spent on creating a logical component style layout to create maximum efficiency with whatever screen was being used. The monitors they use in the Dominican Rupublic are older CRT monitors running a resolution of 1280X1024 so the ticket system and all actions were carefully designed for clarity and ease of use at those sizes in particular. I also consolidated controls and pages down into logically better groupings.