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.
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.
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.
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.
©Copyright 1999 – 2017 Marc Desbiens
Marc Desbiens is a designer
living in the Vancouver area.