< Interactive Sales Tool / >

Project Constellation

npm run case_study

The ideal sales framework for sharing simplified workflows and solutions across a wide network of service offerings.

In 2020 I was part of a creative development project that built a prototype web experience to support consultative and customer-centric conversations between a business and its customers. The prototype was designed to unify the business story across horizontals and verticals and to allow salespeople to explore real business challenges that their customers were facing.

Creative programming.
As you zoom into the experience, workflow hints surface around the edges of parent nodes.

The goal of the prototype was to create a visual map of the business ecosystem that would convey its power and impact on businesses that use it. This visual, interactive combined workflow mapper and solution playbook was designed to be dynamic and to grow with the expanding catalog of service offerings and target markets.

It featured fluid level-based navigation to easily handle non-linear conversations and paths, zooming and flying in through various workflows - facilitating exploration. It was designed to connect the dots on all service offerings available, even if they weren't immediately related to the customer's current needs. This was intended to solve a problem of lack of awareness when it came to the client’s expanded offerings, opening the door to extended conversations that focused on more than just what they needed “right now”. It used spacial organization to reveal connections based on customer profile, challenges, industry, market, interests and promotional initiatives. Finally, it easily surfaced applicable case studies and product demos when getting down to the solution level.

Creative programming.
This simple workflow shows node-to-node connections in action.

My role on the project was lead creative developer, handling the architecture and visual representation of the “graph” system. The application was built in Vue for browser-based usage duration presentational meetings. The development process took place in several sprints, from concepting/prototyping to design treatments and production development. I had the pleasure of working alongside Sosolimited in Boston to bring this one to life.

The frontend was a Vue application, with a major dividing line structurally between the main "graph" experience and the supporting UI chrome, allowing for a separation of concerns between multiple developers without constant merge conflicts.

Creative programming.
To enable easy configuration and content management, Contentful was selected.

The backend was built with Express, with the goal of providing a simple and stable JSON API in front of a content management system (Contentful). The devOps for staging and testing ran on Heroku.

Within the Vue application, I built a workflow system that used a virtual 2D camera and calculated for various levels of 3D depth and focal points alongside art-directable offsets. Additionally, I built automatic diagramming that drew connection lines between associated nodes and animated them on, adding arrow heads and understanding the context of each target node’s anchor point. Lastly, I attached local assets that matched up with a database so that users could select any one of the available assets within the tool, including icons, PDFs, case studies, demo videos and more.