Ben Wakefield, Digital Product Designer - Halifax, UK

Enterprise Resourse Planning (ERP)

Working with many Fortune 500 accounts K2 Corporate Mobility required a scaleable web app to manage and grow their global relocation programs. With international offices across the globe, operations run 24/7.

To meet non-disclosure agreements, information maybe obfuscated. Views written are my own.

Corporate relocation

Background

As part of a business review we were instructed to redesign the current system to improve capability across a diverse range of service requirements.

The following case study overviews my design process, methods and system scope.

My Role

I led the design and delivery, balancing best outcomes within the resources and time available. Regularly reviewing service performance to prioritise and deliver new features.

3 hats

Planning & strategy

I advocated a user-centred approach, mapped services and guided the project plan. Advised what functionality was delivered for launch and deployed thereafter.

Service design

Driving the service design we explored and defined the goals of the business. Shaped the design and defined the productivity tools, gained buy-in from stakeholders. Working with service users and customers to understand the end-to-end journeys and touch points.

Prototype & front end

I created visual layouts, style guides, standards based HTML templates and UI assets.

The Challenge

Deliver diverse & complex service requirements, simply and intuitively within schedule and budget.

ERP modules

The Goals

  • Improved assignment management & tracking
  • Real-time reporting for internal / external users
  • Streamline & automate HR workflow
Approach

Keep it LEAN

Prior to instruction, the client had undertaken a lengthy period of customer consultation and internal department interviews.

During the course of the project we revisited research, questioning assumptions and features from the user's perspective.

iterative cycles
Using smaller design and build cycles helped us learn and deploy faster

We planned for small design and build cycles, scheduling regular testing and review periods. Learning as we went enabled us to guide the product development and meet more of the project goals.

By holding cross-functional workshops we developed a better understanding of day-to-day challenges, drawing on everyone's experience to design innovative solutions.

User Research

We identified system Users, building a picture of their activities and type of tasks they regularly performed.

Group Type Requirements
INTERNAL - K2 employees a. Senior Management (Sales / Marketing) i. New Business tools
ii. P&L review
iii. In-depth reporting
b. Account Management i. Assignment Status updates
ii. In-depth reporting
c. Vendor Management i. Vendor Administration
ii. Key Performance Indicators
d. Client Services i. Day-to-day service management
ii. System Administration
iii. Cost registering
e. Finance i. Granular Cost Management
ii. Billing / Remittance control
iii. Financial reporting
EXTERNAL - Accounts f. Human Resources i. Assignment initiation
ii. Assignment tracking
iii. Cost Approval
iv. Documentation provision
v. Cost and Assignment Reporting

For the two key user groups we planned to develop separate system views, each accessed via a single portal and tailored with its own specific workflow and features.

Information Architecture

Techniques were used to structure information within the application. Card sorting exercises helped advise on general information pages and discrete sections, while user stories assisted service mapping and determined appropriate system touch points.

Application site plan
Above: Organising the application
Below: Service mapping
task flow analysis

Design Solution

Experience & Prototype

We mapped out how we could meet user needs, sketching out workflows and evolving ideas rapidly with the team. Using the whiteboard was great way to communicate ideas and quickly rough-out (and evaluate) journeys, interactions and layouts.

whiteboarding ideas
Rapid ideation on the whiteboard

Wireframes

Page layouts were structured into wireframes for review. The contents of each page; tools, widgets, forms etc varied widely in design, however the containing structure generally followed one, of two simple parent frameworks:

  1. Single full-width page for areas such as reporting or administration where maximum screen real estate was needed.
  2. Two-column layout (including a document sidebar on the right hand side) generally used for assignment specific pages.
Two-column wireframe
Two-column assignment wireframe with Document Sidebar

Full-width wireframe
Single column wireframe maximising filters and results area

Templates

Wireframes were quickly coded to HTML / CSS templates, often iterating and designing in-browser, refactoring SASS components as we went. JQuery provided many out-of-the-box components which allowed us to focus resources on other features. I worked closely with our senior developer to realise the designs into working, data driven prototypes ready for user testing.

Style Guide

Aesthetic leads where taken from the client's Brand to create the Application’s colour palette. Reusable assets were documented to help the rapid development of new page templates and prototypes.

Typefaces were kept to a simple san-serif font stack. Condensed heading styles were specified to minimise risk of text overflow.

Style Guide
A Style Guide was built and updated as the project progressed

Icons

Icons were used to help personalise and communicate assignment messages. Retina quality flags where employed to identify each international office at various assignment touch points. These hi-resolution images also provided an adequate print resolution where required.

Icons
Flag icons used to quickly identify the Assignment Origin Office

For simpler monochrome icons, we decided upon font-based glyphs due to their versatility (using CSS), resolution independence and relative low file size.

For expediency we used a well-supported icon library and created a custom project font using Fontello. These resources made an excellent solution which took full advantage of mature design patterns.


Navigation


Information


Actions


The Style Guide provided an invaluable living document, maintaining consistency and balance throughout the project lifecycle.

Delivering Better Outcomes

Activity Management

To promote accurate assignment data, a company wide event management system had been deployed. The idea was to notify users if critical information was missing or required updating, thus avoiding service bottlenecks and reporting errors.

Task Manager
Activities requiring attention

We discussed the as-is system with frontline staff, identified pain points and focused on how we could make the process simpler and more intuitive.

The Need

We discovered many activities did not assist users meet their day-to-day goals or improve KPIs. This resulted in cognitive overhead, frustration and disengagement.

Hypothesis

If we identify and focus only critical service tasks then data integrity and workflow will improve because users will trust, engage and use the system more.

Discovery

User stories recorded the activity required to progress each service. This research also suggested which of the current tasks could be completely removed.

User Stories
Mapping service activity

Business Analysis revealed how and when each task was triggered, what knowledge was required prior to, provided during and needed to complete.

Prototype

Based on our research, we refocused a batch of 10 most frequenty used service events. To simplify the journey and reduce friction, inline data inputs, info hints and other contextual help were built-in where possible. Non-essential events were disabled within the code base, immediately reducing system "noise".

Target data field
Improved task descriptions and highlighting target fields reduced cognitive load and reduced admin time

Testing

As a control experiment, we piloted the batch and AB tested against like for like events.

Speaking to users provided valuable qualitative information and a good litmus test of how the changes had been received in terms of ease of operation and cognitive effort.

Using web tools, we measured the end-to-end time taken to successfully complete activities which provided clear quantitative results.

Results

Our investigations proved that users found the revised system both simpler to use, plus we observed a marked reduction in execution time on average of 40%. More complex tasks could be completed up to 65% faster with the new usability measures.

These notable gains although relatively modest in terms of timesaving per event, could culminate in hours saved per week.

Deploy

Modified batches were gradually rolled out system wide for both Internal and External user groups.

Learning

Looking at the wider picture, we learned that making small measured improvements could significantly increase system engagement and contributed to wider service KPI goals.

3 month review

Launch is only the start

Reflect, Assess, Improve

As part of the software's continual improvement, we held workshops with department staff to discuss what had worked and where improvements could be made.

From this exercise conclusions quickly surfaced around how assignment data could be better communicated across departments.

Improvements to the current task management system were suggested, making it more intuitive, accessible and transparent across internal and external user groups.

After brainstorming ideas we converged on an interactive Assignment Timeline concept. This would build upon the task management engine and slimmed down task list.

Whiteboarding ideas
Roughing out the Assignment Timeline workspace

The essence was to improve communication of critical service milestones and allow all data to be added inline without leaving the interface. Users could pan into the past or future to get a better understanding of the assignment and its services.

We believed the workspace would not only help day-to-day service management but also reduce knowledge silos across the company and its accounts.

Solution Planning

To establish how viable the idea was, feasibility assessments were conducted with the wider system:

  • How the timeline would dovetail into wider workflow
  • Integration of current task and service information
  • Responsive design requirements
Solution plannning
Assignment timeline solution and integration factors

Use cases were explored with interactive wireframe models. Rapid prototyping encouraged buy-in from stakeholders and allowed us to quickly test ideas, receive feedback and refine experience.

Mobile wireframing
Testing responsive layout ideas via wireframes

High Fidelity Prototype

Once operation and behaviours had been agreed, several high-fidelity models were produced including a desktop prototype.

Top level user interface
Modals allowed users to action tasks in-line

  • Assignment specific services revealed through a visually layered stack
  • Key milestones displayed in context, with interactive information reveals
  • Users able to pan into the past and explore / receive information on future events
Top level user interface
Swap-user UI allowed events to be viewed relavent to each user type

The dynamics of each assignment can be complex and involve various managers at different points of the job cycle. To facilitate this we enabled stakeholders to manage periods of cover via the user settings.

User admin interface and service checklists
Assignment level timeline including stakeholder view

The following features were modeled to help communicate assignment complexity in a clear and simple manner:

  • User specific assignment views with ability to add new stakeholders to timeline
  • Tasks re-routed in periods of manager absence or holiday leave
  • Assignment Checklists, allowing viewer to quickly see status of each service
User admin interface and service checklists
Adding a stakeholder to the timeline, showing predictive autocomplete options

Results

Post deployment we took feedback and found system engagement and real-time reporting accuracy improved. Knowledge silos and administration time were significantly reduced across departments.

ipad homepage

Specialisation

It was identified from an early stage that the system needed a high level of customisation throughout.

Each assignee move required a vast array of service options, no two assignments were the same. Finding a way to track, manage and report each assignment while maintaining a scalable system was, on the surface, a daunting task.

We deconstructed the problem and looked for areas of commonality, evaluating ideas and designing testable prototypes.

File management

An example of this was the development of the Document Sidebar. This was proposed early on in response to the need for a simple and easy-to-use assignment document filing system.

The interface had to reference all template documents from the parent's Account and also facilitate storage / retrieval / removal of assignment specific documents.

Document Sidebar
Document sidebar showing passport folder open with documents held within

To create the most flexible and intuitive interface, we proposed users simply select the desired destination folder then drag files directly into the browser to save.

NB. To guard against malicious threats, virus scanning initialised each time a file was uploaded. A "browse for file" fallback was used for legacy browsers.

To test our Minimum Viable Product (MVP), a JQuery accordion widget was used to prototype the idea, and subsequently customised to meet specific UI requirements.

The sidebar structure, visibility and classification were managed at Account level and tailored to the client's exact policy requirements. It proved an indispensible tool across all users and became ubiquitous for day-to-day assignment management.

Assignment templates

Another area enabling a high level of scalable customisation were Assignment Templates. These permitted users with sufficient access level to build parent templates using predefined services (setup via nominal codes).

Account admin
High level of account customisation facilitated through modular templates

This enabled us to closely tailor the requirements of the Account's relocation policies. Once created, Account templates were fine-tuned at assignment level to meet the individual service requirements for each assignee.

The highly customised approach created a very powerful framework and allowed for a high level of reporting capability.

Reporting Capability

The Butterfly Effect

Butterfly Effect

To facilitate the reporting detail requested, we had to restructure from the bottom up. More in-depth cost tracking was built in throughout the system from an early stage.

To enable this we started from the elemental nominal codes; ensuring the correct classification framework was in place. From here we created a service taxonomy where descriptions could be layered and finally assign any traceable service activity accordingly.

This crystallised the importance of including all departments when proposing structural change, often a perceived trivial reorganisation from Client Services could have serious reporting implications further down the line.

Nominal codes
From the Start: Nominal Codes - the system building blocks

Nominal codes
To the Finish: Financial Report - powerful, in-depth reporting capability.

Building Better Relationships

Personalised Assignment Literature

Dynamic PDFs were used extensively throughout the system, particularly for billing and personalised Prelim Packs (PDF brochures for Assignees specific relocation information). Using InDesign, I created page templates for various service scenarios which were dynamically populated with Assignee data; reflowing seamlessly regardless of service complexity or volume of Assignment information.

The prelims could be generated on-demand from the document side bar and provided a far more professional looking and standardised result for the customer. The system also created big time savings for Client Services against the process of manually collating an individuals move information.

Prelim

Workflow Tools

Cost Management

Cost management was a critical part of the system; flagging costs throughout the assignment process registered them at defined touch points where users could review and action as needed.

Tools were developed to automate the manual computations used to find the most cost efficient service package via complex supplier combinations. This reduced errors and administrative time.

Cost Manager
Process Automation - reduced human error and saved time.

All assignment costs were then registered and presented (initially via email) for inspection by the Account’s HR department. Clients would be directed to login and asked to approved any costs, which would subsequently be marked for invoicing.

Costs awaiting invoice
Assignnment costs awaiting Client approval

The invoice manager was a key monetary tool recording invoices, costs and credits, which fed through to business critical financial reporting. The potential volume of data which could generate within the assignment dictated a very concise interface.

Invoice Manager
Space at a premium - Invoice Manager

Know your team

To help visualise regional teams and identify company personnel, an HR module was developed organising employees by location. To help imply structure, we employed a user hierarchy algorithm to order more senior or longer standing team members within the overall employee lists.

From this page the viewer could drill down into the management structure and obtain contact details for each employee.

Global teams
Engaging global personnel

Communications

As part of the wider communication strategy we designed a simple messaging system where users could message others on an assignment basis. The message would register within the user’s Task Manager, where the note would be acknowledged and action taken.

Messenger
Internal Messenger System, kept assignment communications organised

Data integrity

To ensure data was protected from two or more people editing the same page at once, we researched and devised a page lockout system.

The simplicity of the solution belied the many use case scenarios and extensive testing, which the module required.

Lockout modal
1. Karin interacts with page input field, 2. System locks page from other users, 3. Ben visits page with R/O data, 4. System advises of lockout and next steps

After speaking to users and brainstorming operational requirements we produced several prototypes which were subsequently A/B tested in real life situations. After identifying and resolving user pain points we deployed a practical, low friction solution which ensured against data loss, whilst improving overall user confidence in the system.

Security & System maintenance

Creating an interface which enabled admins to monitor and control the system, was an important step in hardening against brute force attacks. I designed a simple UI which allowed admins to investigate login attempts, highlighting failed and suspicious activity. As part of this strategy password blacklists and IP whitelists were enabled to identify friendly international traffic and provide appropriate levels of authentication.

Security and Maintenance
Security and Maintenance management helped harden the system

As the system was in use 24/7, communicating maintenance time could be problematic across global offices, accounts and time zones. To remedy this and provide a more managed maintenance procedure, I designed a simple downtime process which notified users of a countdown to scheduled maintenance and to logout in advance. This simple feature helped save data, reduced frustrations and improved overall system confidence.

External Users

Account HR Portal

For expediency we based the Account Portal framework on a paired down version of K2’s internal user view.

Client Login concept
Account view dashboard concept

Empowering Users

At certain points in the assignment workflow Account HR was required to actively participate providing authorisation and documentation for assignee moves.

Providing access to HR personnel into the heart of the process, allowed them to initiate new assignments remotely and reduce reliance on phone and email.

New booking screen
New Assignment booking via HR login

Facilitating remote, online initiations expedited the process and supported the goal of assignment activation within a 24 hour window.

Full reporting capability for Services, Financials and Demographics could be assigned and managed within account preferences.

Assignee demographic reporting
Assignee demographic reporting using High Charts

File Sharing

An issue identified early on was the transfer and storage of sensitive documents, which were normally held within email and were difficult to access. This created mail server performance issues and raised PCI questions on how the data was stored.

User admin area and document dropzone
User admin area and document drop zone

To remedy this we created a file sharing area where HR could transfer files (drag and drop) directly to K2 servers. From here they could be catalogued and used at account or assignment level.

This proved not only useful for HR but helped relieve email server resources and made PCI compliance and document management easier.

We utilised this feature in many instances across the system in conjunction with independent virus scanning to harden the system against malware.

Using 3rd party virus scanning software increased file upload times but was effective first-line defense against malicious threats.

Prepare for launch

During development several new features were identified and prioritised for launch.

At times this created intense development cycles and challenging periods of change to meet our September deployment. In true spirit of the project launch, delivery also included the birth of my daughter the same week!

We met the challenge and schedule. Other than some last minute Sunday testing and triple checking the launch went off without issue.

Conclusions

This project reinforced that regular testing and feedback is essential throughout the product development lifecycle. Maintaining clear communication lines between all stakeholders is key to delivering the best outcomes.

During my tenure designing and managing K2's web systems, the company grew from a UK based operation to a global Corporate Mobility provider with offices throughout the US, Europe and APAC region.

The systems we developed allowed the company to securely scale their infrastructure and fulfill their varied relocation programs.

The takeaway

Be brave, listen, discuss and don't cut corners - users won't forgive you.

What the client said

Ben has led the design and development of our company intranet ('Ascent') - working with myself and others within K2 over a ten year period.
The team are a pleasure to work with, taking a logical and pragmatic approach managing timeframes, costs and quality brilliantly. They often go 'above and beyond' to adapt to our ever evolving spec, and interpret highly specialist subjects well.
I would not hesitate to recommend Ben and Eye Design for specialist projects, Ascent is an outstanding piece of technology.

Katherine Bitterli - Group Project Manager

Top