SalesHawk is an enterprise sales force management application made by XFI Corporation for large sales organizations.

Background

XFI delivers SalesHawk as a subscription-based partnership. In this arrangement, XFI collaborates with customers to adapt the application to their unique business processes. Then ongoing development continues to evolve the product as each customer’s business needs change.

The application has a flexible, modular user experience framework, which accommodates the wide range of complex workflows in a large sales organization. This flexibility is key to meeting customers’ expectation for rapid turnaround of new features.

The first version of the application was built for General Motors Fleet and Commercial and their global sales team. We formalized and refined many of their business processes as we built the application logic. Another expansive version was built for OncoPlexDx, a cancer diagnostics company, to manage their sales and lab report processing.

Responsibilities

As the sole UX/UI designer and front-end developer, I created the user experience and user interface for SalesHawk. This expansive project required continual collaboration with stakeholders, product managers, software engineers, solution support specialists, and data specialists. I produced detailed user experience specifications, including user flows, wireframes, mockups, and high-fidelity prototypes. Business requirements were frequently added, and I provided regular updates to the design solution.

I created the visual design, produced a design system, and generated the interface assets. I wrote all the HTML, CSS, and JavaScript code for the browser as templates and component libraries for the software engineers to integrate with our back-end Java systems. I also conducted usability testing.

I designed the function icons and art directed an illustrator for the larger module icons and spot illustrations. I designed marketing collateral for each customer and coded those documents in OpenDocument XML for dynamic generation. Lastly, I defined content workflows and managed a group of production designers to produce images and personalized illustrations for the application.

Process and product

I worked closely with the product manager and software team, starting with feature ideas and business requirements. I created user flows and wireframes to illustrate the concepts and wrote specifications and guidelines. I then prototyped each feature and handed off all the front-end code for software implementation. Once an initial working version was complete, usability testing was performed with a group of the customer’s key salespeople. After revisions, the new features were rolled out in the next application release.

To support the regular cadence of new features, I developed a core user experience consisting of dashboards and activity centers in a hub and spoke design. Each activity center is composed of a series of modules. Users navigate pages in a module or drill down to another module. This open-ended architecture allowed new activity centers and modules to be added and expanded as needed.

The first modules were dashboards, objects, actions, and profiles. Module functionality then expanded to include work queues, interactive reports with drill-down navigation, global search, content libraries, and more. Modules could be a single page or have dozens with their own tree navigation.

Module pages are composed of task panels that are flexible and feature-rich to adapt to a broad set of interaction patterns. At their core, they are a list that can include data, navigation, and form input controls. Tabs allow segmentation of the list, and toolbars contain task-level functions, such as sorting, filtering, searching, and paging.

Solution support specialists used these UX patterns and the related UI framework to define the customer’s business processes in the application. The specialists could iterate rapidly using the existing design solutions. The framework scaled well for public-facing SalesHawk products as well as our internal tools.

To assist the software engineers, I built a component library that served as a master reference. Each component included detailed examples and emphasized the wide variety of task panel configurations. This resource reduced quality assurance issues.

Conclusion

The user experience foundation I created for SalesHawk supported a vast range of activities for over 15 years. The interface and interaction patterns continued to expand and evolve over that time, and I learned how to maintain a product throughout its life cycle. SalesHawk proved to be a capable and flexible platform that supported our customers and contributed to their success.