Overview

Creating AX 7 (the New Dynamics AX) was a multi year project that took a 3500 screen desktop ERP system and converted it into a web based app with a completely modern look and feel.

Microsoft Dynamics AX is software for businesses to manage their operations (commonly known as ERP software). It is used by companies all across the world including North America, Europe and Asia.

New: AX7: a sleek web based UI.

Building AX7 (known officially at the New Dynamics AX) was a multi year project with a team distributed across Bellevue WA, Fargo ND, and Copenhagen Denmark.

The old version — AX 6: a multi screen desktop UI

Problem

The challenge was to take AX 6 (above) and replace it with an HMTL / CSS / JavaScript client with the server in the (Azure) cloud. We also had to do it in such a way that customers could stop using AX 6 one day and start using AX 7 the next with their data intact and minimal retraining.

Audience

AX’s users are mid sized companies who use AX to manage business tasks. They are regular employees (not IT specialists). They use the computer to track their work like recording sales orders, tracking retail purchases and filing expenses. For them, being able to get their work done quickly is very important. They need speed and accuracy.

Constraints

We had to make sure that when users were switched from AX6 to AX7, things would work seamlessly with minimal training.

Team / Role

The UX team was 15 designers and researchers in the three locations (Copenhagen, Fargo, Bellevue). My roles included :

• Design director for the project. I set the direction (web, modern, responsive, great fit and finish, clean UI, lots of cards and visualizations).
• I helped design the new page types, the navigation and page hierarchy, and new control types, like cards and tiles.
• I set standards for visual design, icons and color palettes
• I evangelized the design with execs, PMs and developers at all three locations, and presented to lots of customers.

Process

We followed a user centered design process, beginning with research, then ideation, then locking down the design, and finally iterating through the development cycle.

Research

When we asked existing users what they wanted from their ERP system, one message resonated strongly with us. They said “help me get ready for my day.” This became a goal for the New Dynamics AX: we set out to build a product that would help our users get ready for their day, and so we created a dashboard where they could see what they needed to work on.

Ideation

Major accomplishments

• Desktop UI to web UI: We created a pure HTML app that runs in modern browsers. It is responsive and works great on from an iPad to a large display.
• Multi page app to single page app: Customers complained that AX6 had too many windows. For AX7, we moved to a single page app with sliders instead of popups. This made navigation much easier by giving the user just one screen to focus on.
• Reduced icons: In AX6 we had 3000+ icons, which is bad usability and bad software engineering. In AX7 we had just over 200 icons. We did this by removing icons from places they weren’t needed, simplifying which icons would be used, and reworking the command structure.
• Underlying grid: AX7 has an underlying grid and ships with two grid densities. Users can switch densities on the preferences page, and all the controls grow or shrink. The app also reflows as the browser screen changes size.
• Beg, borrow, steal: Creating a visual language is expensive. So we used the Metro Design Language.
• Logical colors to allow color palette switching: We used a logical color palette which allows the user to switch themes. It also enables branding for customers for whom branding is very important.

New Page Types: Dashboard and Workspace

Workspace for Managing a production floor

ERP systems (Business software) stores its data in tables. In order to complete a task, a user typically has to update multiple tables. We created workspaces to pull together all the information they needed to complete a task in one place. The production floor planning workspace (above) is an example: it puts all the information that a floor manager needs in one place to get his or her shift completed. We designed this and other workspaces with our users’ help, users will be much more productive using workspaces.

Dashboard and Landing Page

Business software has one major challenge. Different users see different parts of the app. For example, the production floor planning workspace (above) is not useful to HR in managing pay scales. This creates a big problem: what to users see when they first start up the system. We solved this by creating a dashboard which is generated on the fly from the workspaces that a user has, and got a patent for it. We got a second patent for this work as well.

Navigation Pane

Lessons Learned

• Collaboration is key. The UX team worked very closely with the PM and dev teams to iterate on and develop the page types and controls that went into AX7. As a result, even though there was a lot of work to be done, the teams pushed to get it completed.
• Stay close to customers: We made huge changes to the product, and talked to customers every step along the way. We did usability tests, customer previews, spent time at early adopter sites, and made lots of changes based on the feedback. The picture above is a feature that came directly from a customer request: pin open the navigation pane.
• Make audacious bets if you know they are right. When we decided to reduce the number of icons in the product, a lot of people were freaked out. As a UX team, we knew that 200 icons is a good number, 3000 is just wrong. What we found was that while people on the extended team were very upset at first, it didn’t last. As the product got built out, people stopped noticing the icons had been removed.