User Interface Wireframe
for Tech Hero
The company had developed a comprehensive suite of online management tools for their Franchisees. The components included CRM (Customer Relationship Management) tools, Inventory Management, Ordering, Invoicing, a Payment Gateway and Service Call Management along with collaboration and various reporting tools.
During the initial training, franchisees reported their staff had lots of questions in navigating the system. The CEO wanted a full review with options for redesigning the UI.
The navigation and system functions were re-designed. Separate menus with a login trigger were developed to better define standard user and administration options (which menus were displayed depended on the user login and permissions). Pages, options, and prompts were organized to focus on the tasks to be performed. Access to the various tools was redesigned to be more intuitive.
Home Page Before and After
The original design used drop-down lists for selections and displayed a list of work orders and estimates. It was comprehensive, but not focused on the tasks to be done.
The user had to know in advance which page to use and how to get there in order to complete a task.
The new design added a “to do today” dashboard, reorganized the navigation bar, and added a set of quick access buttons with straightforward labels for common tasks.
Navigation Buttons Comparison
The original design used a combination of navigation buttons for different areas of the system together with embedded links and drop-down lists. Administrator options were accessed from within each section. Permissions-based access was limited to “deny on select.”
The new design used task-based names and added a separate administrator toolbar. The new design made administrator options accessible from a standard toolbar and added a login permissions check.
Home Page Dashboard
A new feature, the Home Page dashboard was designed to integrate a to-do today list with an upcoming appointments preview option.
The dashboard showed today’s appointments, counts for outstanding estimates and invoices with links to each. Planned enhancements included a map for the appointments with a drill-down for travel routes and times.
Customer List Before and After
The original Customer List displayed a list of customers in the left column with a detailed view of the selected customer on the right. Recommended work was visible after a customer had been selected.
The new Customer List showed a list of customers with business contact information displayed by default; no selection was needed. An icon displayed next to any customer for which there was recommended work. On mouse-over, a pop-up panel showed the recommended work and could be selected to make changes to the work.
Customer History Comparison
The user needed to select four different panels to get a full customer history with the original design.
The new design combined all four panels plus it added visibility to work performed and payment history.
Invoice Comparison
The original invoice form was based on the Work Order form. The same model was applied to the new invoice (work order form not shown).
Access to the payment options was via the customer record only. There was no access to record a payment directly on the invoice.
The new invoice form highlighted that the work had been completed by graying out all but the payment information. Navigation was simplified and a “Pay Invoice” button added.
New Invoice – Payment Option
Three options were added to the Invoice functionality: 1) Pay Invoice, 2) Return to Work Order, and 3) Archive. The most important of these was the Payment option. This greatly simplified the task of collecting payment.
Pay Invoice – New Feature
Prompts and an information form were added to simplify recording and accepting payment.
The New Payment form included default settings to allow a cash payment to be accepted, applied, and generate a receipt for the customer in three mouse clicks. (1. Pay Invoice, 2. Apply Payment, 3. Confirm)
Skills:
Usability, Software Design, Process Flow, Process Modeling, User Interface, Wireframes