This is Hexagon Consulting’s submission for the SAP Cloud Portal Developer Challenge 2019.
We decided to focus on the pharmaceutical industry, especially in the relationship between doctors and sales representatives. Our main goal was to create a portal that could easily be used by sales reps in order to keep track of their everyday tasks and plan routes to visit doctors.
We came up with a solution using html5, CSS, JavaScript and UI5. In this blog post we’ll summarise the process.
Project Onboarding
First, we had a meeting where we discussed different business cases that seemed interesting to us and the challenge.
Then we arranged a Design Thinking session with our team of developers, consultants, UX designer and the Project Manager. We focused on the needs of our end user and established a Persona by using SAP User Experience Design Services (Build)
Some captions of the design process
Defining the user
We needed a persona to represent the average user of the Portal. This fictional character is based on a synthesis of the research we’ve done among medical sales reps and the pharmaceutical industry. That’s how we came up with Richard, the medical sales representative.
User Persona - You can see it full resolution here
Prototyping the Portal
After creating the project in Build we started with the first prototypes. Defining the user flow and navigation steps with low-fi wireframes was key to understand and implement features into the portal. We decided to use a sidebar menu (based on the Admin Template) because it provides simple access to sections and it adapts well to different devices.
Build UX Case study with low-fi wireframes
Interface Development
Creating high end resolution wireframes helped us with CSS styling and page structure. Each section has its header alongside a defined color palette. We also added custom CSS transitions when the user chooses another section and animations to buttons
High fidelity wireframes
MyRoutes Portal is divided into five different sections, considering every aspect of the sales representative work routine:
Profile
Provides quick access to most used applications:
- Notifications List
- Overview of the doctors he has to visit
- Agenda: Includes doctor’s name, specialty, phone number and e-mail.
- Calendar: Includes doctor’s shifts, time frame and location.
- Shortcut tile to Route Builder section and Expense Report.
Route Builder:
Here the user can see the doctor’s list and the distance he currently has to them, along with the last visited time, the prescription level, prescription trend and if the professional is available right now or not.
If the user picks a doctor, he can access to detailed information about the professional. This includes the medication related to him by his speciality, how much did he prescribe in the last period and if his currently prescription trend is up or down.
The user also gets to see the doctor’s shifts. This is very useful because sometimes doctors work at different places on the same day; and if he clicks on certain shift, he gets the address and can see the exact location of the doctor with a link to Google Maps.
In the doctors list, the user has a button which adds the professional to the Route List.
Route List:
Table with doctors added by the sales representative. Once the user has doctors in the route, he can see the distance between each professional, exact location, the status of the visit (if it’s pending or visited) and he can also add the date of the last visit. Doctors can also be removed from the list.
Expense Report:
App to track expenses and upload tickets to the company using OCR. Each expense is divided in different categories, such as food, transport and travel. The user can filter the tickets by category if he clicks on the donut’s chart label or by approval status if he clicks on each bar chart’s label.
Tickets can also be uploaded and added to the list thanks to OCR. This allows the app to recognize the title, date and the total amount spent. You can try and upload your own ticket (use the one down below to see how it works).
Stock Control:
Keep track of the medical samples the sales representative has available. There he can see a photo of the sample, a brief description, expiration date, product number, stock balance and can also change the amount of prescribed quantity.
Quota:
Monitor the amount of sales and goals settled for that period. The sales rep can see the remaining time of the period, a stacked column chart showing the goals and the amount of sales he has made so far. He can also see the top three drugs sale, the number of products prescribed, sales by doctor and the porcentage of sales made in the current quarter.
Data model definition
We decided to go for SAP Netweaver Service Builder (SEGW) to build the oData service for our portal.
The service builder allowed us to define the entities required for the portal and the relationship between the entities.
We started with a very simple entity diagram with entities such as Doctor, Sales Representative, Route, Sample, Prescription. We soon realized that in order to have a flexible data structure that represented the reality of the business we needed to add a lot more entities than we had initially contemplated.
| Entity Type | Entity Description |
| Doctor | Represents the doctor object and it’s composed by id(key), firstName, lastName, mainSpecialtyId, prescriptionTrend, prescriptionLevel, active |
| Shift | Doctors work in different locations based on mostly permanent weekly schedules. It’s composed by shiftId (key), doctorId (key), location, startOfShift, endOfShift, dayKey. Location in turn is a complex type with address, latitude and longitude. |
| Prescription | Doctors prescribe medicines to their patients. A prescription is therefore a set of medicines with their prescribed quantities that has been authorized by the doctor to be consumed by the patient. It is composed by id (key), date, quantity, productId, and doctorId |
| Specialty | Doctors can have different specialties like neurology, ophthalmology, or pediatrics. Based on these specialties the doctors take patients and therefore prescribe medicine. In our data model it is composed by doctorId, id(key) ,description |
| SalesRep | Represents the Sales Representative object. It’s componsed by lastName, firstName, id (key), pictureId, routeId, and quotaId. |
| Quota | All Sales Representatives usually get quotas as incentive to achieve their objectives. A quota represents a quantity of products that belong to their specialty that were sold on pharmacies on the previous time period (usually 1 month). |
| Route | On a given day, to visit their doctors, medical sales representatives define routes as a series of locations where their doctors are on active shift. The optimal definition of this route is a critical step towards ensuring that the sales rep will not waste time and resources on doctors that are not available or may not prescribe the brands products anyway. Each route is has therefore a completionDate, a completed boolean to indicate if the route was completed, salesRepId, id, and routeItems |
| RouteItem | Each route item represents a location where a doctor works on active schedule. It’s composed by a visited boolean to indicate if the visit was actually performed, salesRepId, doctorId, routeId,and visitDate |
| Sample | To promote medicine sales Pharma companies produce medical samples. Sales representatives then distribute these samples to doctors based on specialities. Doctors, in turn, distribute these to patients. The quantities on the samples are never enough for a complete treatment. This way the patient gets to try the product and start treatment until he can get to a pharmacy and acquire the commercial product. It is composed by expirationDate, sampleId. |
| SamplesStock | Each sales representative has manages a stock of samples to distribute among doctors. A sample stock is an inventory of all samples a sales rep has on a given date. |
| SampleStockItem | All inventories have items. An item is a sample (related by it’s sample’s id) and the accounted quantity. It is defined by sampleStockId, quantity, sampleId, itemId. |
| Product | Medicines are pharmaceutical products. specialtyId, pictureId, description, id |
| Picture | Products, Sales Representatives, and Doctors may have pictures so the app should be able to handle id’s with references to the picture url. |
Of course each entity has specific relationships with the other entities.
This was our final entity relationship model:
Based on this entity model using SAP WebIDE we were able to produce mock data for our apps without actually developing the backend for our applications.
Benefits of using My Routes Portal
- Reduce planning time (from 45min to 5 min)
- Able to change plan on the fly based on prescription facts
- See who is available near by
- Less driving, parking bills and food expenses
- Less unsuccesful visits
Below there are two demo videos of the Portal, one is the desktop version and the other one is the mobile version. The Portal works perfectly fine on both devices, including tablets.
You can access MyRoutes Portal with the following link:
https://flpnwc-b04e10511.dispatcher.us1.hana.ondemand.com/sites/portalchallenge#Profile-Display
The "Register" button was enabled below in the login. You have to put your credentials and then an active activation email will be sent to enter the portal.
This blog post summarizes a lot of hours of team work. Hope you enjoy it as well as we did.
Regards,
Hexagon Consulting Team.
- SAP Managed Tags:
10 Comments
