FFL Compliance Manager
The Bound Book Solution Created by Firearms and Retail Experts.
Project Summary
Epicor® FFL Compliance Manager is an award winning, modern and intuitive web-app for the acquisition and disposition of federally regulated firearms and their serialized parts. The software allows a Federal Firearms Licensee to track inventory via an electronic bound book, create ATF compliant reports and offers a streamlined customer checkout process by enabling a user friendly kiosk mode on tablets.
Role
Tasks
Design, from the ground up, a modern, intuitive and ATF compliant web-app for the acquisition and disposition of federally regulated firearms.
Tools
- Paper Prototyping
- Whiteboarding
- Balsamiq
- Sketch
- InVision
- Zeplin
- Photoshop
- Illustrator
- Bootstrap
- HTML5
- CSS3
Company: Epicor Software
Industry: Firearms, Sporting Goods
Project Timeline - Kickoff to GR
05/15/2015 - 03/29/2016
In Conjunction With:
Orchid Advisors
The Problem: How can a Federal Firearm Licensee reduce compliance risk while simultaneously growing their business?
The Solution: Create an affordable, easy to use, pure SaaS solution that scales to fit existing FFLs and allows them to:
- Easily acquire, dispose and trace firearm inventory
- Generate inspection-ready reports with one click
- View dashboards and firearm data on any web-enabled device
- Step through easy-to-use workflows with the help of WalkMe
Approach & Process
Since I had experience designing and developing websites and web-apps from my previous employ, Zmanda, I was asked to propose a simple list of tools. I came back with:
- HTML5 for the structure of the page
- CSS3 for the presentation layer
- Angular JS for the client side MVW application framework
- Bootstrap for its responsive grid capabilities
- Kendo UI for the UI components
- Font Awsome for scalable vector icons
The list stuck and we were off and running. But before we had a MVP, there was of course a learning curve involved.
Rigorous Bound Books must be maintained in the (inevitable) event that an ATF audit occurs.
In many businesses, the Bound Book is a physical ledger where firearm transactions are recorded in hand written form. As you might imagine, this can be a clumsy way in which to manage an aspect of your business that may otherwise be automated.
Click or tap the images below to have a look at how we envisioned the interaction of acquiring a firearm.
Wireframe Interaction
Rarely do my wireframes look so polished!
Typically I will whiteboard and \ or paper-prototype the initial concept to get a loose idea of the interaction. In this case, I have opted to show you the 5th version of wireframes so that you might get a better understanding of the end-user's flow.
Balsamiq wireframes detailing the interaction when acquiring a firearm
Sketch Mockups
Staying flexible with your design means keeping your sanity.
The following two mockups display the Transactions landing page and the New Acquisition screen. As these are merely mockups, not all elements made it through to the final version. The "Notes & Attachments" button fell to the bottom of the screen while the "Import & Export" buttons were buried. Knowing when and how to articulate your design decisions, especially in support of the customer, is an important skill to develop.
Sketch mockups displaying two pages of a firearm acquisition
Mockup Specifications
Design documentation and specifications are an important way to convey meaning and intent.
In the examples below I used Markly, which at the time was a bit more limited. Nowadays I utilyze tools such as Zeplin and InVision. Both of which allow for deeper specifications and design definition by allowing designers to more easily collaborate with developers and stakeholders alike. Inline commenting helps to keep the feedback in context, while downloading snippets of code as well as graphical elements keeps developers from having to "shoulder tap" disigners for such artifacts.
Sketch mockups + color, type and spacing specifications
In Conclusion
Having the opportunity to work on so many aspects of Epicor® FFL Compliance Manager was a rare treat. As this was our teams first SaaS, web-app offering, I was able to dust off some of my old hats (things I learned from my startup days) and dawn them once again.
From ideation, wireframes, mockups, information architecture to polished visuals, I was even able to lend a hand with the early HTML5 & CSS3 as well as to the look \ feel and code of the final Shop design.
But no project is without its pitfalls. One of the largest hurdles I faced was how to hand-off static mockups to developers creating a responsive app. At the time, Sketch didn't have the capacity or plugin to enable scaling by percentages, breakpoints or media queries. I would struggle with this through a couple more responsive web-app projects until plugins such as Fluid or Auto Layout were released. Sketch would later natively supported Group Resizing, but that was little help for me at the time.
So was it a success?
This was truly a team effort. Thanks to a fantastic partnership with Orchid Advisors, an awesome management team and some highly skilled developers, we've managed to garner a few accolades: