endo IT delivers

User-friendly sales force automation built on top of Siebel OpenUI for Croatia

Back in 2018, A1 Croatia decided to implement a sales force automation tool for their B2B channel. Not because there wasn’t one before, but they wanted a Siebel customization which doesn’t look like “usual” Siebel customizations at all: something modern, intuitive, unique, and easy to use without a sea of form fields and grids. Computer Systems, A1 Croatia’s Siebel vendor asked us to join, and we gladly accepted the challenge.

The vision was clear: account managers must have full insight into their customer portfolio with regards to overall revenue and what they can expect in the future, based on trends, opportunities, and expected losses. For future expectations, the input provided by account managers is the most important data, therefore it is very important to capture this information. The process must be painless and quick, it must be kept simple: more opportunities with less details are better than less opportunities with many details.

This implementation truly required thinking outside the box, and it was a real honor and pleasure to work on this project. It was delivered in agile development, and it was good agile. Goals and vision were clear and the scope for each sprint/release was well-managed. Requirements were concrete enough but a lot of freedom was given to contribute our own experience, expertise, and ideas to the final solution.

Shaping up

The key concept was integration with DWH to make aggregated service and revenue data accessible for sales managers within Siebel and design dashboards and processes around this information. With some system integration, UX design, Siebel and front-end magic the account manager dashboard was born.

Image with screenshot of account manager dashboard. Has a tile based layout on the left 2/3 part and four charts arranged in a 2×2 grid in the right 1/3 part. The tiles display recent activites, some customer statistics with revenue chart, a static tile linking to the knowledge base, a tile showing the user's rank and the final tile displays information with charts on the sales pipeline and expected future revenue. The four charts on the right show opportunity statistics in a donut chart.

This is the central home page for account managers. The design language bases on Microsoft’s metro/modern design (remember, it’s 2018) using “tiles” with custom design elements thrown into the mix. Being an SFA application, focus is on sales, hence pipeline and revenue are the most important keywords. No forms, no tables, it looks very clean and simple, yet there is a lot going on: an overview of upcoming and recent activities, revenue history and forecast based on sales pipeline and a quick glance at overall personal performance, all of this on the entire customer portfolio of the account manager.

Pulling so much data efficiently was a fun part of the challenge: besides running regular aggregation jobs, complex data is fetched asynchronously using parallel server requests. The results appears on-the-fly as the server replies, thus the user can interact and work with what’s already there without waiting for everything to be loaded from the database.

The view itself appears quickly after navigation and subsequent details load in the background (this capture is from development environment; production is quite a bit faster - also the capture crippled the smoothness, in reality every animation runs at full 60 frames per second). Since the data is fetched asynchronously, the user can instantly start to work with data that is already available or navigate to other views. A standard practice on the modern web, but quite unusual in Siebel - mostly because this isn’t really supported out of the box. Some creative thinking made it happen nonetheless.

A similar view was created to present customer-level data along with a subsidiary hierarchy tree to make navigation between related customer accounts a breeze.

Dashboard showing customer details. Has a header at the top with the most important customer data such as name, various IDs, segment info, etc. Below that, two rows of tiles, in the first row info about the customer's services and average revenue, a tile showing some business data such as number of employees, industry segment and a tile for sales pipeline showing revenue forecast for this customer. Three tiles in second row, first showing recent activities, contact info and issue (trouble tickets, service requests) and order information (in progress state). Below tiles, a tree rendering of the customer and its subsidiaries, with the current customer account highlighted in blue.

While the appearance is fully customized on these views, basic Siebel entities are still there underneath. This is not some “alien” application shoehorned into Siebel. This is Siebel, it only looks different. The header, tiles and other elements are all individual applets which can be (and are) reused in multiple views.

Improving data entry

One of the main goals of this project was to regain end-user trust towards Siebel so they percept it as an aid rather than a hindrance in their daily work. Besides providing information in a human-friendly presentation, it was also important to make data entry as painless as possible. Salespeople wasting their time wrestling with software does not produce income; spending their time dealing with customers does.

Data entry for account managers is maintaining their sales pipeline. In A1 Croatia, being an established telco in the market, the pipeline mostly revolves around existing customers’ existing services. Creating an opportunity based on an existing service is as easy as drag-and-dropping the product line and then entering the projected change in quantity or revenue. Adding a product line which the customer doesn’t already have is also only two clicks away.

Screenshot of the project editor view. At the top there is the same customer summary as on the customer dashboard. Below that is a simple form applet for entering project details and a few icons showing current project status and revenue. Below that is the project area which consists of two rectangles side-by-side. In the left rectangle, five circles are shown for five different product lines and each circle is proportional to the revenue generated from that product line. In the right rectangle there are two circles for two product lines which are part of the opportunity. The change in revenue (growth) is drawn with a different color for the outer part of the circle.

A novel way to create a new data record implemented via an unusual way of rendering a Siebel list applet; the “Project area” visualization is in fact a list applet with a custom UI! The size of the circles serve a purpose: the area scales with revenue. In the target area it also visualizes the impact of the opportunity on revenue. Once the product line is “dropped” onto the target area, a more-or-less traditional form opens to enter details.

Screenshot of the opportunity capture form. The left part displays current and future quantity and several revenue categories for the product line along with a computed total and average amount. The right part is a mostly traditional opportunity capture form for status, probability, end date, etc.

Forms are hard to do right and the fundamental way of Siebel form applet handling wasn’t changed. Siebel already has a robust way to handle user input and reinventing the wheel didn't made any sense. Some facelift was still in order: style enhancements to match the overall design and custom web templates to make forms truly responsive and to separate blocks of fields visually. A few “quality-of-life” enhancements were also added, such as scaling planned revenues (based on current) automatically when updating the number of lines, hiding unnecessary fields depending on form field selections and similar small, but important finishing touches to improve usability and performance. The key with forms is to keep the number of fields low. Forms are not a problem when kept simple: at the end of the day data needs to be captured somehow and forms are inevitable.

Grids (list applets) also weren’t thrown away of course, there are use cases when they are the most appropriate, such as when working with a large dataset. For example, in sales pipeline overview.

Screenshot of the sales pipeline overview. At the top are two charts, one bar chart showing opportunities in a monthly timeline, with colors indicating status and revenue direction (growth or loss). An orange marker is displayed for the part of the bar which corresponds to the currently selected project. The second chart is a line chart showing projected revenue for one or all product lines. In the next row there is a grid (table) with the list of projects. It's a standard Siebel list applet with query button. At its right there is a custom form applet showing project details such as how many opportunities it has, when it's due, status, probability and opportunity info with a chart showing number of services affected by the opportunity.

The list of projects (an umbrella object for multiple opportunities) is a bog-standard list applet; only CSS styling is applied to blend with the overall design. The grid is the best solution here and gives the necessary tools for users to perform advanced queries and sorting. Charts and other attractive visualizations were added to the view to present the data in a human-friendly way. Grids aren’t the problem, overusing and using them from everything is. (Sure, you can do pretty much everything business-related with Excel. But do you really want to?)

Pushing further

The project didn’t stop here. Any change made to an opportunity automatically creates an event (besides the user’s ability to create their own activities) so it’s easy to see what happened. A table could have been used to display these events and that would do the job. But why not go further and present on a real timeline?

Screenshot of a timeline presenting user activities. The timeline displays opportunity-related events on the left and opportunity milestones (such as offer issued, fulfilled) on the right side. Events use different colors and icons. At the right is a calendar for navigation and an array of togglers to show/hide various activities/events from the timeline.

To increase user engagement and to encourage competition between account managers, a gamification engine was also built. (Unfortunately, the screenshot is from a development environment so not much actual competition is going on here.)

Gamification dashboard screenshot. The left is occupied by 6 tiles in 2 rows, each showing rank and score for overall performance, data accuracy, revenue estimation, number of offers issued, revenue won and opened. In the center there are for statistics for average pipeline duration (how much days are spent in several statuses), number of customers with open opportunities, number of opportunity-related meetings and amount of expected revenue closing this month. Below that are four badges which get awarded after reaching several goals. At the right is the list of account managers and their current ranks for the selected criteria.

Six ranking criteria, four badges for several achievements, some useful statistics and of course, a user ranking list. All updated live, almost realtime.

Walk the extra mile

There is a lot more to this project, but only so much can get into this story. In a later project phase another set of views were delivered for account manager assistants. It uses the same underlying concept and reuses many components.

Bringing modern UI/UX concepts and web solutions into the Siebel realm was a great experience and this project clearly proved one can get quite far using Siebel OpenUI. Neither A1 Croatia, nor Computer Systems were afraid to walk the extra mile and we are glad they choose us for this journey.

What about you?