Team Scrantonicity intro and background
Team Members:
• Sean Teeple
• Marcus Dermont
• James Trott
• Brandon Senese
• Michael Borthwick
The application covered in this article was a product of Pathways Consulting Group’s second time participating in ServiceNow’s Knowledge Hackathon competition. We competed last year — claiming third place — with an application that focused on health and fitness named NutriNOW. Check out a video breakdown of that application here. After last year’s event, we decided to set the bar even higher and had our sights on taking first place. This year, we competed with more than 60 other teams (a total of more than 200 participants), which is a notable amount more than we were up against last year. We are happy to report that we claimed first place this year!
Throughout this article, we’ll be breaking down our design that led us to the top spot, while also providing some technical insight on what it took to get there.
As a Scranton-based office, we borrowed our team name — Team Scrantonicity — from the beloved TV show The Office, which is also based in Scranton. For those of you that are as big of fans of the show as we are, you will recognize Scrantonicity from Kevin’s band name. Not only are we fans of the show, but we also love incorporating the world of The Office into our applications. Keep an eye out for any Easter eggs in the article and our build!
The build: A summary of Reizen
We entered the Hackathon event with an application that focuses on expense submission, tracking and output. We named the application Reizen, Dutch for “to travel,” which Dwight Schrute would certainly find admirable. This application heavily utilizes ServiceNow’s Virtual Agent to guide the traveling end user through all of their travel planning needs, and will automatically generate expense lines and expense reports.
Through the Virtual Agent, a user can book a flight, reserve a hotel, get added to a business’s rideshare account for the duration of the trip, scan receipts for ad hoc purchases, and manage their expense reports. We also integrated the Virtual Agent with Slack to be able to complete all of these actions.
The Virtual Agent can be leveraged from within the ServiceNow instance, the instance’s Service Portal, the mobile application as well as through Slack. In addition to the Virtual Agent functionality, we built some functionality that allows managers to review and manage expense reports. This includes a Service Portal that provides visibility into their employee’s current expenses. Below you will find a breakdown of each component’s technical make-up.
Flight booking
We started with flight booking via the Virtual Agent, which necessitated the use of an API. There are many options available, but we wanted to go with something free for the purposes of this competition. We used Skyscanner for both flight and hotel booking. This required creating a custom Topic Flow in the Virtual Agent Designer that walked the user through the experience and gathered all the information required for the Skyscanner API. The conversation starts with the Virtual Agent asking where the user is departing from. Users can enter either a city or airport code here, and the Virtual Agent will provide the user with a list of choices that are relevant to the input:
Next, the user will be asked where their destination is. After entering that information, the Virtual Agent will search for available flights via Skyscanner’s API and provide the user with their options. These options provide an overview of their flight, including if the flight is direct, who the flight is operated by and the overall cost. At this point, the user can confirm the flight. Once confirmed, the user will be asked if they would like to book a hotel.
Hotel booking
Just like flight booking, booking a hotel is facilitated via the Virtual Agent and an API made available by Skyscanner. We integrated this feature into the same conversation thread (or Topic Flow) that a user booked a flight with. We wanted our users to have a fluid experience so that they can get all of their travel planning completed in a streamlined manner.
If the user leverages this feature as a part of the hotel booking conversation, the Virtual Agent already knows their destination and the duration of their trip. With this information, we call on a Skyscanner’s API for hotel booking and look for available hotels that meet these parameters. The options are returned to the user in a carousel that contains images of the hotel and cost per night. Next up, the user can select which hotel they want to book, and they successfully have a reservation for their trip!
Rideshare access
Another common expense during traveling comes from rideshare services (such as Uber or Lyft). We utilized Uber’s APIs in order to add a user to the business’s rideshare account. This requires a business to have an account setup with Uber that allows their employees to automatically charge their rides to the business account.
As with the hotel booking feature, we included this within the same conversation to keep the planning experience fluid. Again, we benefit from already knowing the duration of the trip, so we prompted the Topic Flow to ask the user if they needed rideshare access. The user will then be added to the business account for the duration of the trip, eliminating the need for the user to shoulder the cost on their own account, and then expensing it later.
At this point, the conversation is complete, and expense lines will be automatically created for each of these costs. Later in this article, we’ll cover how expense reports can be managed as a part of these conversations.
Receipt scanning
While hotel, flight and transportation services are common expenses for traveling, there are frequently ad hoc purchases made. That requires employees to hold on to their receipts and then go through the process of scanning them, filling out an expense report, then submitting it for approval. To circumvent that tedious process, we created a Virtual Agent Topic Flow that allows users to take a picture of their receipts and automatically detect the total which then creates an expense line.
To accomplish this, we utilized another API; this one is provided by OCR.SPACE. OCR stands for Optical Character Recognition, meaning it pulls out characters from an image which can then be parsed for whatever purpose required.
In our case, we pass the image taken by the user directly within the conversation to the OCR API and receive all of the characters that the API can detect. We then parse through it to search for key strings like “total” or “total amount.” The user is then prompted with what the Virtual Agent conversation believes is the correct total for confirmation. If the total is incorrect, the user can manually input the total amount. To ensure that there are no errors in this process, the image taken by the user is attached to an expense line that represents each receipt scanned.
Mobile application
As previously mentioned, you can access all of these Virtual Agent features from the mobile app. In addition to those features, we also added some mobile UI actions that allow the user to submit their expense reports directly from the application. This was a low-effort addition that closed the loop on the travel expense use cases which we designed our application around.
Slack integration
Many companies utilize messaging applications such as Slack, Microsoft Teams or Workplace by Facebook. All of those applications can leverage the ServiceNow Virtual Agent, but we focused on integrating with Slack for the Hackathon build. There are many ways to integrate Slack with ServiceNow: Web hooks, Integration Hub and through registering Messaging Applications. We went with registering Messaging Applications for this build, as we were only targeting the utilization of the Virtual Agent, which is a main feature of this option. Documentation for this integration setup can be found here.
As with the mobile application and the Service Portal, all of the features we built for the Virtual Agent can be used inside of Slack, giving users various options to enter their bookings and expenses. A simple, yet useful, feature of the various Slack integration options is the “card” feature. This is simply a clean summary of the record returned from the Virtual Agent.
This may occur when a record is created, or when one is queried because the user wants to check in on the status of something. As shown in the image below, we built a Topic Flow that allows users to ask the Virtual Agent to check up on the status of their submitted expense reports which returns a “card” summary. If the user needs more information or wants to update the expense report they can click the link within the card to be brought directly to the record. If the user is in the mobile application, then it will open the record directly inside of mobile application.
Expense reports and expense lines
We already covered the fact that expense lines are automatically created for hotels, flights, and receipts. However, we needed to accommodate for the possibility that no expense report existed to tie these to — or to account for the fact that there may be multiple expense reports available. We accomplished this by prompting the user with all of their available expense reports so that they can select the correct report that the expense applies to.
We also give the user the ability to create a new expense report in case none of current expense reports apply, or in the event they do not have any reports at all. As shown in the image below, this process is simple, and the user can name their expense report when asked. The Virtual Agent Topic Flow then creates the expense report and the user is provided a summary “card” as previously described.
Service Portal
We had fun with this portion of the build in keeping with the The Office theme. We created the Service Portal from the perspective of Dunder Mifflin. We added a large amount of functionality within the Service Portal, such as a record producer to create expense reports from the Virtual Agent chat, the ability to review your receipts and expense reports, the ability for managers to view their employees’ current expenses, and some functionality unrelated to expenses, like displaying current news. In the images below, you will see that we created a fully themed Service Portal including a stylish image carrousel and all of the functionality previously mentioned. If you are a fan of the show, I suggest taking a look at what the Scranton branch has been expensing in the second screenshot below.
Going forward
We covered a lot of ground in the eight or so hours that ServiceNow provides the teams to build their Hackathon ideas, and we wanted to take it even further. Unfortunately, we never quite made it to our capstone ambitions of including an automatically generated check sent out to the user who submitted the expense report once it is approved, but it certainly is possible.
There are numerous APIs available that allow this, and the one that is utilized may vary depending on the company’s preference. We do intend to revisit this application, touch it up, add some functionality such as auto-generated expense checks, and more in order to use it internally — and also make it available to the public.
Keep an eye out for an update to this article or future publications by Pathways on our website and social media. We’ll be posting a video breakdown of this application (featuring the impressively knowledgeable Chuck Tomasi [Sr. TPMM, NOW Platform at ServiceNow]). Also, watch out for Reizen’s debut to the public once we complete some housekeeping and enhancements for it!
