An eDetailer can pass every brand review and look polished in the agency boardroom, yet still fail where it matters: in a busy clinic corridor. A rep has a few minutes with a healthcare professional (HCP), the HCP asks something unexpected, and the presentation can't keep up.
This guide covers the build-level decisions behind interactive eDetailer design that holds up in real rep–HCP conversations. It is written for digital producers, account leads and brand managers who commission or oversee Veeva CLM work. It focuses on four areas: touch targets, animation, navigation, and references and safety information.
Why reps abandon eDetailers (and what usable means in a real call)
HCP calls are short and unpredictable. A call planned to run from slide one to slide eight often opens with the doctor asking about slide six, or about a patient type the deck barely covers. When that happens, the presentation has to follow the conversation.
If the eDetailer is slow to load, has tiny hotspots or forces a linear path, most reps do the sensible thing. They put the tablet down and detail verbally. The brand loses the visual story, and it loses the call data too.
A working definition of usability
For an eDetailer, usable means three things:
- Any key message is one or two taps away. The rep should never have to swipe through five slides to reach the one the HCP asked about.
- It works one-handed while talking. Reps often hold the tablet, keep eye contact and talk at the same time. Controls need to be big, predictable and within reach of a thumb.
- References and safety information are always reachable. The rep should trust that prescribing information, ISI and citations are one tap away from any slide.
Rep usability and HCP engagement are different goals
It helps to separate two sets of design goals:
- Rep usability is about control. That means speed, navigation and confidence that nothing will break mid-call.
- HCP engagement is about content. That means clear data visualisation, focused claims and interactions that invite the HCP to explore.
Both affect CLM call data. If reps avoid the deck, there is no data. If reps use it but navigation is chaotic, slide-level data in Veeva and Salesforce becomes hard to read. Design for the rep first, and the HCP experience and the analytics can follow.
Touch targets and layout for tablet-first detailing
Most eDetailer usability problems start with touch targets. They are designed on a large monitor with a mouse pointer, then used on a tablet with a thumb.
Minimum tap sizes
You don't need to invent a standard, because public guidance already provides one:
- Apple's Human Interface Guidelines recommend a minimum hit target of about 44×44 points.
- WCAG 2.5.5 Target Size (Enhanced) recommends targets of at least 44×44 CSS pixels.
Treat these as minimums rather than sizes to design down to. Pharma slides are dense, with superscript citations, chart toggles, tab buttons and footnote links often packed close together. Leave generous space between hotspots so a rep doesn't open a reference when they meant to switch a chart tab. If an element has to stay visually small, such as a superscript number, extend its invisible hit area beyond the visible glyph.
Design for the thumb zones in landscape
Most detailing happens in landscape. Whether a rep holds the tablet with both hands or with one hand while gesturing with the other, the easiest areas to reach are the lower-left and lower-right regions. Put primary controls there: home, menu, next section and ISI.
Keep hotspots away from the very edges of the screen. On iPads, swipes from the top and bottom edges trigger system gestures such as Notification Centre, Control Centre and the home indicator. A button sitting flush against an edge invites accidental system actions mid-call.
Make interactivity obvious
Reps should never have to wonder what is tappable. Use clear affordances:
- Consistent button styling across the whole deck
- Subtle shadows or outlines on interactive cards
- Recognisable icons, such as a plus to expand, an info symbol for references and a cross to close overlays
- Visible pressed and active states, so every tap is confirmed immediately
Tap, not hover or hidden swipes
Hover states don't exist on a touchscreen, so anything revealed on hover is effectively hidden. Swipe-only interactions need care as well. Veeva CLM uses horizontal swipes to move between slides, so a custom swipe carousel inside a slide can conflict with it. The rep tries to see the next chart and lands on the next slide instead. Wherever possible, use tap-driven controls for in-slide interactions.
Proof point: Humalog for Eli Lilly
Ranbanka Systems built an interactive eDetailer for Eli Lilly's Humalog brand, delivered via the agency Lebeyon. It was built in HTML, CSS and jQuery and optimised for touch devices, with full Veeva CLM, IREP and Salesforce integration.
Touch checklist
- Test on the actual rep hardware, not just a desktop browser or simulator.
- If the brand allows rotation, test in both orientations. If it doesn't, confirm the orientation lock behaves correctly.
- Test with real fingers, including larger thumbs, rather than a mouse or stylus.
- Tap quickly between adjacent hotspots to find mis-taps.
Animation that supports the message, not the showreel
Animation in an eDetailer is easy to overdo. Every transition should earn its place by helping either the rep or the HCP.
Three legitimate jobs for animation
- Revealing data in sequence. A chart that builds bar by bar or arm by arm lets the rep narrate the data instead of showing it all at once.
- Guiding attention to the key claim. A subtle highlight or scale on the primary endpoint shows the HCP where to look.
- Confirming taps. A quick state change tells the rep the deck has registered the input, which matters on a device that may respond slowly.
Any animation that doesn't do one of these three jobs deserves a hard look in review.
Keep it short and interruptible
If the HCP is already convinced, the rep should be able to move on. Design builds so that a tap jumps them straight to their final state. Keep durations short, and avoid long intro sequences on slides a rep might open several times in one call.
Performance on tablets
Smooth animation depends as much on the device and the package as on the design:
- Animate CSS transforms and opacity rather than layout properties such as width, height or top. They are much cheaper for the browser to render.
- Preload the images and fonts each slide needs, so a build doesn't stall halfway through.
- Keep slide package size lean. Compress images, leave out large videos you don't need and remove unused libraries. Smaller packages sync to rep devices faster and open faster in the CLM player.
Never let animation hide required content
Claims and fair-balance information must be fully visible when an animation ends. A build should never leave safety information half-faded, off-canvas or dependent on a tap the rep might skip. In review, check the end state of every animated slide as carefully as you check the static design.
Proof point: Trulicity for Eli Lilly India
Ranbanka created an eDetailer for Eli Lilly's Trulicity product in India, delivered via Lebeyon. It combined smooth animations with touch-device optimisation and seamless Veeva CLM and Salesforce integration.
The same animation craft shows up in Ranbanka's wider web work. Examples include the cinematic GSAP frontend for Novocine and the Three.js and GSAP animations built with React and Next.js for Winning Link Business Solutions. These are web projects, not eDetailers, but they show the team's experience with performance-sensitive motion design.
Navigation: designing for non-linear conversations
Navigation is where most eDetailers either earn a rep's trust or lose it.
Hub-and-spoke beats strictly linear
A linear flow suits a scripted presentation, but real calls are rarely scripted. For most conversations, a hub-and-spoke structure works better. A home hub links directly to each key message, such as efficacy, safety, dosing and patient profiles, and a persistent menu lets the rep jump straight to whatever the HCP asks about. The core story is still there as a recommended path, but the rep isn't trapped in it.
A consistent global navigation bar
Put the same controls in the same position on every slide:
- Home, to return to the hub
- Menu, for direct access to every section
- References
- ISI / PI, for safety and prescribing information
- Summary, to close the call on the core messages
Consistency builds muscle memory. After a few calls, reps shouldn't need to look for the menu.
Veeva CLM specifics
Design decisions have to work inside the CLM player, not just in a browser preview:
- Cross-key-message linking. Jumps between slides in different key messages usually rely on Veeva's CLM JavaScript library (gotoSlide-style calls) rather than ordinary hyperlinks. These links depend on key message naming and presentation structure, so plan them early.
- Shared resources. Common assets such as global navigation, fonts, styles and reference data can sit in shared resources. That keeps the deck consistent for reps and avoids duplicating files in every slide package.
- Test in the player. Something that works in Chrome on a laptop may behave differently in the Veeva CLM app on an iPad. Validate navigation in the environment reps will actually use.
Orientation cues
Breadcrumbs, section labels or a simple progress indicator help reps keep track of where they are after a few jumps. Always provide an easy way back to the core story, so a detour to answer a question doesn't derail the rest of the call.
Keep call data meaningful
Non-linear navigation doesn't have to make the analytics meaningless. Name key messages clearly, map slides to messages consistently, and agree with the brand and CRM teams on what counts as a view. Slide-level data in Veeva and Salesforce can then still show which messages are being discussed, even when reps take different routes.
Proof points
The Humalog and Trulicity builds were both integrated with Veeva CLM and Salesforce. The Novartis China eDetailer, also delivered via Lebeyon, was a touch-optimised HTML presentation integrated with Vmobile, Veeva CRM and IREP for field reps. Integrations like these are where navigation and tracking decisions get tested in practice.
References, ISI and fair balance without breaking the flow
References and safety information are non-negotiable. The design challenge is to keep them always accessible without letting them get in the way.
Reference overlays
Link superscript citations to reference pop-ups or overlays that open with a single tap. Give each overlay a large, obvious close button that meets the same tap-size guidance as everything else, because a tiny cross in the corner of a modal is a common source of frustration. Also let reps close the overlay by tapping outside it.
Persistent safety access
Provide a route to prescribing information, ISI or safety information from every slide, ideally from the global navigation bar. Expectations differ by market:
- In the US, FDA rules on promotional materials emphasise fair balance between benefit and risk information.
- In the UK, the ABPI Code of Practice, administered by the PMCPA, sets requirements such as access to prescribing information.
- Across Europe, national codes are generally aligned with the EFPIA Code.
This is general context, not regulatory advice. The brand's medical, legal and regulatory (MLR) reviewers own the final interpretation. Ranbanka builds to the compliance requirements that the client and their reviewers define, and it does not act as a regulatory approval authority.
Structured reference data
Store references in a structured data source, such as a JSON file in shared resources, instead of hard-coding them into each slide. When MLR review changes a citation, you update it once and the change flows through every slide that uses it. That speeds up revision rounds and reduces the risk of one slide quoting an outdated reference.
Version control and annotated PDFs
Keep the build under version control so every change can be traced to a review comment. For MLR submission, produce annotated PDFs that map each claim to its reference. Reviewers can then check a round without hunting through the interactive build.
Proof point: Novartis China
The Novartis China eDetailer was a compliant delivery: an interactive, touch-optimised presentation for field reps, built against the compliance requirements set for the project.
Build, test and hand-off: a practical workflow for agencies
A predictable workflow keeps eDetailer projects on schedule, especially across several MLR rounds.
A typical workflow
- Approved creative. Static designs signed off by the brand, with interactions annotated.
- Interactive prototype. Key interactions and navigation built early, so stakeholders can try the deck on a tablet before full production.
- CLM-packaged build. Slides structured into key messages, with shared resources, CLM library calls and correct packaging.
- Device QA. Testing on target hardware inside the CLM player.
- MLR review. Annotated PDFs and builds submitted, comments addressed and versions tracked.
- Veeva upload support. Packages prepared and checked so the brand or agency team can upload and publish with confidence.
QA checklist
- Tap targets meet size and spacing guidance, with no mis-taps between adjacent hotspots
- Animations can be interrupted and always end with required content fully visible
- Offline behaviour works, with no dependency on live network calls during a call
- Navigation across key messages works inside the CLM player
- Reference pop-ups open and close reliably on every slide
- ISI/PI is reachable from every slide
- Salesforce/CLM tracking records the expected slide and key message data
Why agencies partner with specialist developers
Many agencies have excellent creative and strategy teams but don't keep specialist CLM developers on staff year-round. A development partner can add capacity at peak times, bring CLM packaging know-how and turn revision rounds around quickly, so MLR timelines don't slip.
Shantanu Karmakar, Director – Business Planning & Client Services at Lebeyon Marketing Communications Pvt Ltd, described working with Ranbanka like this:
"Working with Ranbanka Systems has been a game-changer for us. Their expertise in frontend development and eDetailer solutions streamlined our document automation processes, making them faster and more reliable. Their team’s attention to detail and commitment to delivering quality work on time truly set them apart. We look forward to continuing this partnership."
To be clear about scope, the eDetailer projects described in this article were delivered via Lebeyon for Eli Lilly (including Eli Lilly India) and Novartis China. Ranbanka is based in Udaipur, India, and serves clients in India, the UK, the US and worldwide. You can see the wider client list on our clients page and learn more about Ranbanka Systems.
Our working terms are straightforward: we work under NDA and confidentiality, respond to enquiries within 24 hours and offer a free initial consultation.
Next steps: getting your next eDetailer rep-ready
Share this one-page checklist with your brand team before the next brief.
Touch targets
- Hit areas of at least 44×44 (Apple HIG points or WCAG CSS px), with generous spacing
- Primary controls in landscape thumb zones, away from screen edges
- Clear affordances, tap instead of hover, and no swipe gestures that conflict with CLM navigation
Animation
- Used only to sequence data, direct attention or confirm taps
- Short, interruptible and built with transforms and opacity
- Lean packages, preloaded assets and required content fully visible in the end state
Navigation
- Hub-and-spoke structure with a persistent global bar
- Cross-key-message links and shared resources tested inside the CLM player
- Orientation cues, plus key message mapping that keeps call data meaningful
References and ISI
- One-tap reference overlays with large close buttons
- ISI/PI reachable from every slide, in line with the target market's code
- Structured reference data, version control and annotated PDFs for MLR
To see these principles in context, read the Humalog, Trulicity and Novartis China eDetailer case studies in our portfolio. Our full range of capabilities, including eDetailer development using Veeva CLM, is on the services page, and you'll find more practical guides on the blog.
If you have an existing eDetailer that reps aren't using, or a new Veeva CLM build to scope, book a free initial consultation to talk it through with us. You'll hear back within 24 hours, and everything you share is covered by NDA.