Delivering an optimized
user experience layered
over core systems

Travis Perkins PLC is a leading retailer and distributor of building materials and equipment in the UK.  Unsatisfied with the UX of the core systems being implementing, Infor Hook & Loop Digital was hired to define and deliver UX optimized solutions that would allow users to bypass the core system interface.

Responsibilities

Project owner and lead designer. I led the requirements gathering, product design and application build.  I collaborated with a business analyst and supporting designer for requirements gathering and productionalizing designs.  Product was handed over to a partner consulting division for testing and implementation.

Tools / Skills

Background & Context

Design Challenge

Process

Defining the Problem

The previous work stream used a traditional user research approach observing and working with end users to identify their challenges and propose solutions specific to their needs.  This led to several concepts and features that were not feasible given the state of the client’s technology and systems.  Since a traditional UX research approach would not work, and we were restricted to working within the confines of the core system, we focused on defining which tasks and processes were most inefficient and users had difficulty with.  This would allow us to identify targeted use cases to propose UX improvements and builds around.  Working together with the functional business owners and software specialists, I asked them to identify the 5 most inefficient but common processes users would engage in the core system.   I then received a demo of the process and documented the steps and programs required to complete them.  This exercise would help me identify what problems to solve for while also getting familiar with the processes and information solutions wound need to account for.  

Defining Potential Builds

I started by ideating thoughts for widgets by making comments on the processes I had documented from my research.  I then started sketching out and designing a series of low-fidelity widgets and dashboards to address the UX and process inefficiencies realized.  While this led to several concepts and potential dashboard configurations, I quickly realized the number of widgets and dashboards was becoming overwhelming, resulting in the user needing to jump between several pages.  So I started experimenting with a new pattern that would encompass the functionality and information of multiple widgets and dashboards in one large widget I called a “workbench.”  This would allow the user to easily navigate information in a consolidated workspace, as opposed to jumping between multiple dashboards and widgets.  The client agreed that this would be a better approach, so I started experimenting more down this path.  This ultimately led to 13 workbench proposals that would address UX issues and process inefficiencies identified.

Prioritizing & Selecting Builds

After presenting high level details on the 13 workbench proposals, I ran a workshop with client stakeholders and core system experts to prioritize which builds to design and develop taking into consideration a 4-month window before the IT program system testing began.  We would not have capacity to develop all of these within the allocated time and resourcing, so we prioritized development based on dev effort and business value.  The Customer Service Workbench and Order Management Workbench were selected first because they yielded the highest business value since they could be used by a variety of roles and use cases.  They also had more API availability which lightened dev work.  Finally we prioritized the Finance Task Manager since it would address a problem the client had with their financial operation.

Product Goals

Scope

UX Goals

Challenges

Development Framework

In order to leverage Infor’s SSO, security, API layer, workflow engine and user management tools, we were required to use a development platform called Mongoose (.Net based platform) that was designed to integrate with Infor’s greater product suite.  The workbenches we built would be deployed in a dashboarding layer called “Homepages” where a user could download and deploy applications from a catalogue.  The workbenches would be hooked up to M3 APIs to acquire data.

Designing the Customer Service Workbench

Building off the workbench pattern defined earlier, I needed to define what specific information and fields to display in the customer service workbench.  Since this tool would primarily be used by sales and service staff, I conducted user interviews to define what information they needed, and how they would want to search and find information.  Users ultimately wanted the ability to search a customer by their name, number or address, and view their order history and order line details, quotes, invoices, returns, deliveries and pricing terms.  This would allow them to easily answer customer questions and facilitate discussion.  I then looked up how this information was being displayed in the core system and began applying that information to wireframes to communicate, test and validate information with the users. Once designs were validated, I applied Infor’s design system to layer in UI elements and productionalize design. In order to save time from my other responsibilities, I delegated design production to a supporting designer.

In this tool, users can look up customer orders, quotes, deliveries, returns, invoices and pricing terms to aid their discussions with customers. Users can look up customers by name, phone number or address and also view key customer details and contacts.  This app is designed to be used by any user who needs to view customer information, whether they are from a sales, service or accounting role.  This tool would save users significant time compared to current applications where information is siloed and requires several steps to navigate between.

Designing the Order Management Workbench

The order management workbench was designed simultaneously as the customer service workbench using the same process and engaging the same users.  Both tools would display similar content except the order management workbench would display orders at a store level instead of a customer level.  This would help sales managers triage order margins and check on the general status of orders in their store.  To use the tool, users would choose a store location and pull up orders for that store and view details around the customer for that order, order lines, returns, deliveries and payment.

In this application, users can look up details related to specific orders, such as customer, deliveries, deposit and payment information.  They can also view the employees involved in transactions.  This tool is specifically useful for managers and accounting staff who need to trace back details to orders during audits.  Users can search for orders by branch location, date range and status.

Designing the Finance Task Manager

The finance task manager would require more design effort because it required a new pattern.  I conducted user interviews with the finance staff to get an understanding of what they wanted, which was essentially a digitized version of their capacity and task planning board.  While some of the work delegation could be automated through a new workflow engine, many tasks lived outside the core system and required manual assignment.  The team ultimately wanted a way to view and assign tasks related to clearing account errors, supplier reconciliation, aged documents, invoice failures and supplier follow ups and be able to track their status.  I designed a series of workflows demonstrating the functionality with wireframes, and used this as a median to acquire user feedback.  After validation, I then worked with a supporting designer to add UI elements so that I could focus efforts on managing development of other tools.

This application is designed for finance team managers who oversee teams of people who do audits, reconciliation and process claimbacks.  This is a high volume operation where managers seek control over the distribution and prioritization of work.  This tool would help them view the number of outstanding tasks, and assign them to the appropriate personnel.  These tasks would then be distributed to employees on task widgets they have set up on their homepage.

Development Planning & Management

We had a little over 4-months with one full-time dev resource to build the products in scope.  We decided to develop the Customer Service Workbench and Order Management Workbench first since they shared a lot of the same dev effort and yielded highest business value.  We developed the Finance Task Manager last.

In order to manage and aid development, I had to split up the design into components indicating what the functional requirements were and the user acceptance criteria.  I then had to indicate which API calls needed to be made to hook the application to a data source.  In some cases new APIs needed to be built to drive data and functionality to the application.  I managed this using spread sheets and using it as a median to inform engineers and track development.

UI Specs

As a final asset to developers, I had a supporting designer produce UI specs to provide guidance on the correct placement and tooling of UI elements.

Impact

Conclusions & Lessons Learned

This project was a fantastic and challenging learning experience in that it was the first project I managed and led on my own end-to-end.  I had a lot of responsibility and worked closely with program leaders to define what to build and execute.  This project also taught me a lot about software implementation, designing around business processes, technology and resourcing constraints, and the overall need to work and coordinate across a wide variety of stakeholders.

This project also yielded clear results.  It solved a problem with the usability of the core systems by significantly shortening the time it would take users to retrieve the information they would need to address a variety of business and customer questions.