Eagle N Series
Retail Management System
Project Summary
Epicor® Eagle® N Series is a comprehensive suite of retail management software run on Windows for small to mid-sized businesses located at over 10,000 stores within the US and abroad. Considered to have the widest range of functionality at a considerably lower price point, customers such as Ace Hardware® and True Value® rely upon the software daily for its point-of-sale solution, business analytics as well as the management of both inventory and customers.
Role
Tasks
Simply put, my task was to assist in the redesign of the Eagle software suite. As the only designer, this proved to be a colossal effort spanning nearly two years and touching some 5500 screens. The real trick however, would be to seamlessly transition a large, existing customer base from a decidedly aged look and feel, to one that would be intuitive yet familiar, with streamlined processes and expanded funtionality.
Tools
- Paper Prototyping
- Whiteboarding
- Balsamiq
- Sketch
- Markly
- Zeplin
- Photoshop
- Illustrator
Company: Epicor Software
Industries: Automotive Aftermarket, Building Centers, Home & Hardware, Lawn & Garden, Paint & Decorating, Pharmacy and Sporting Goods
Project Timeline - Kickoff to GR
04/03/2012 - 08/05/2014
The Problem: How do you change a flat tire on a moving car?
The Solution: Create a holistic design language that speaks to stakeholders, developers and customers alike...then iterate over and over and over again.
For a project of this magnitude, the how and where to begin was a daunting task. Similarily, what should I show you, the viewer, when my design tasks ranged from ideation, flows, wireframes, documentation, all manner of mockup fidelity, splash screens, dialogs, color, type, iconography, grid, pattern, asset management...you get the picture.
I needed to create a Design System, I just didn't know it at the time.
Approach & Process
Step 1: Select A Typeface
Typography can make or break your application! The legibility of your typeface is a crucial component to your end-users interacting with and understanding your product.
Choosing the right typeface, font size and weight can lead to better balance and hierarchy as well as eye-trace and perceived trust. A few type tenets I picked up along the way (but unfortunately can't cite) are:
- Color: A paragraph of text should look balanced, with no uneven or inconsistent character shapes.
- Readability: Every character should be recognizable, even at very small sizes.
- Spacing: There should be consistent spacing between characters and words.
- Weight: Proper control of weights across font styles and at various sizes.
- Alignment: Maintaining proper character shape alignments within a font and a typeface family.
- Diagonals: Controlling italic and oblique fonts to obtain stroke weight consistency and symmetry.
I inevitably selected and assisted in licensing Microsoft's Calibri typeface. It's a relatively modern ClearType, sans-serif typeface used in most of Microsoft's applications such as Outlook, which brings wide recognition and fine legibility in a myriad of font weights and sizes.
Step 2: Choose Your Colors
I will typically create the primary or base colors from the brand guidelines. However, if corporate decides to change said brand colors in the middle of your design process, you get to start from scratch (yep, that happended).
Another issue I encountered was that the new brand colors, as fantastic looking as they were on printed marketing materials, was not always acceptable as accent or state colors such as error, warning or success. The new palette was muted and did not provide enough contrast for a digital product in my opinion, nor were they accessible for low light situations or vision impaired persons. In this case I had to deviate and test new color combinations based off of the primary color and associated graphics, such as icons.
NOTE: Upon testing the colors, we further determined that it was necessary to provide customers a choice of themes based on varying vision and lighting conditions as well as the different age of monitors in the field. The three themes were:
- White
- Light Gray
- Dark Gray
This in-turn needed to be vetted with customers to insure that disabled inputs and text still contained enough contrast when running the software in any of the three themes, as seen below.
Step 3: Graphical Assets & Iconography
More to come shortly...thanks for your patience!
In short, this section will eventually detail the use of logos, images and the ever-important toolbar icons.
Step 4: Component Library or UI Pattern Audit
More to come shortly...thanks for your patience!
This section will eventually outline the proper use of UI patterns such as grids, inputs, accordions etc.
In Conclusion
More to come shortly...please stay tuned.
So was it a success?
Absolutely! Have a look at the before and after images below. Simply drag the centerline to reveal.
Before & After (drag centerline left and right)