Sage 300 Online

Feb 2014 - Nov 2014 (10 months) — UX / UI Design — Visual Design

Sage 300 Online — Home Page Concept

To give the team at Sage a variety of options for the home page design for Sage 300 Online, I was asked to create a design concept for the types of content that could be displayed, and an example of the styles that could be used.

Sage 300 Online — Wireframes

I created literally hundreds of wireframes for Sage’s web-based version of Sage 300 for an overseas team of around 120 developers to implement. This work involved working closely with business analysts to gain a deep understanding of the enterprise software application, and adapting it to a simpler, more web-friendly format.

Below is the G/L Journal Entry screen, an example of a typical screen in Sage 300 Online. This wireframe is from earlier in the project, when I was providing high-fidelity wireframes.

Sage 300 Online — Data Grid Specifications

It was necessary to clearly define all of the behaviours and specifications for UI elements, so that the overseas development team would have a clear understanding of how to implement these elements.

Tables of data (called "data grids" by the Sage team) in Sage 300 often contain a tremendous amount of information — up to 42 customizable columns. The applicion is used by professionals who are trained in its use, and who spend a large amount of time with data-entry tasks. It was important that the data grid captured all of the essential features of its desktop software equivalent, while making UX improvements wherever possible.

Sage 300 Online — Documenting Application Behaviour

Working with Sage business analysts, I was able to understand the complexities of the application. Many screens featured dynamic behaviour, in which fields will be shown/hidden and enabled/disabled. This wireframe shows just a small piece of an Invoice Entry screen, where fields are grouped in collapsible panels based on their usage.

For the benefit of the overseas developers, I eventually began to use a setting in Axure to make the wireframes appear "sketched", as the higher-fidelity wireframes had been taken too literally, with front-end developers including notations and other descriptive wireframe-only elements in their builds. I thoroughly documented all dynamic behaviours in these screens to avoid any confusion.

Marc Desbiens is a designer
living in the Vancouver area.