Part 3 of a guide for product managers & leaders to help accelerate their time to market.

Once an MVP gets ideated and a pre-built solution or intention to implement one is in place, all teams involved need to ensure they're on the same page.

At this point, the product managers' job isn't to come up with the solution; nevertheless, they need to be actively involved at every process stage and work closely with design and development. This is to make sure their product vision gets realized to achieve long-term product success.

In this article, the third in a series to help reduce time to market, we uncover ways to implement a document viewer UI design through different pathways -- while keeping design teams, developers, and product managers in sync.

Typical Product UI/UX Design Process

The typical UI/UX design process can be broken down into four parts:

  1. Product managers ideate on the design (MVP) together with designers and developers
  2. designs are then drafted and shown to prospects or key focus customers.
  3. the team gets buy-in from the customer or internal stakeholders on the UI design (which sometimes occurs before developer involvement)
  4. and developers recommend a solution.

Not all abide by these same process steps, nor in this particular order. At experienced companies, for example, devs tend to get involved immediately at the start of the design and MVP process. This is because they want to ensure everyone is on the same page from the get-go, so developers and designers are in sync as to achievable goals and what is necessary.

If given enough time, developers can build anything and everything. But in many cases, time constraints and lack of resources lead the way to adopt a pre-built solution after initial designs are drafted and presented.

Ways to Implement a Viewer UI Design

Once the product manager selects a pre-built solution from the presented options, it needs to be implemented. Typically, this solution comes out of the box with its own UI, and a decision has to be made.

Here are three predetermined pathways you can go down to realize the design using pre-built components:

  1. Start from scratch: Build your own UI and features on top of a pre-built rendering core and display API.
  2. Go hybrid: Use the default UI + features, plus any customization APIs + themes/styling to change the appearance, hide elements you don’t need, etc.
  3. Use the default UI as-is

A Deep Dive Into Each Pathway

Starting From Scratch

You can stick to your original UI that was proposed by designers since this is the vision they got the buy-in on, from focus customers or users, for example. However, there can be significant drawbacks to this approach where time to market may increase if:

  1. You have to build it all: Our customers tell us a viewer UI with annotations usually takes around 5-7 months to build in-house.
  2. You have to support and maintain it: If your company’s design team isn’t sophisticated or has inadequate time and resources to perform quality user testing with their designs, this and other inherent challenges of creating your own UI add technical debt. This makes it harder to upgrade components and add features every sprint, due to increased UX friction down the road and potential bug-fixing or support issues consuming precious developer time.

Going Hybrid

Using themes and customization APIs to switch over icons and colors -- among other things -- typically allows you a hybrid approach between the out-of-box design and the one that was imagined in-house. The benefits of going hybrid include a reduced time to market and easier maintenance if you’re using the pre-built solution APIs.

Utilizing a full commercial solution, these APIs may let you:

  • customize the header
  • customize pop-ups
  • customize style, such as changing buttons or panel colors
  • use and customize themes to match your desired look and brand
  • implement localization with multiple languages available out of the box so you can easily switch on the desired language
  • and hide/show DOM elements

Using the Default UI

Using the default UI as-is comes with a stellar benefit -- it provides the quickest time to market. Also: a lot of the workflows, like redaction, for example, are built out and have been battle-tested, so there is no maintenance required going forward.

Likewise, a complete and responsive out of the box UI allows you to quickly get started integrating a document viewer into your web app. Zooming, thumbnails, searching, annotation tools, and comments are just some of the features provided by the UI.

On the other hand, having to support and maintain a complex out-of-box UI can lead to additional support costs, encountered by our client, OEC Graphics, when they previously used a PDF web viewer with too many features in a hard-to-customize UI. Ultimately, this contributed to a less than optimal user experience, adding to training and onboarding time, and client dissatisfaction, before OEC graphics adopted an alternative with a more intuitive and customizable interface.

“One of the biggest things we hear from our customers is how the new solution is really easy to use… With the other software as complex as it was, training was much, much more involved. I would have to run 1.5-hour web demos twice a week to onboard new clients. Now, each session is half an hour or less.”

OEC’s Solutions Manager Wayne Wyngaard

An Open-Source UI: A Sneak Peek into What's Possible

At PDFTron, we've seen all three options explored. And we’ve worked with our customers to provide ready-to-go components, supporting themes, and deep customization APIs.

But what happens if the UI's API doesn't allow for the insertion of a specific function when overlays are visible? Or if animation size and position changes are required? What if you want to control aspects dynamically?

Here you might want to take a look at a solution with an open-source UI. This may be an additional asset, as it can provide crucial, early-stage visibility as to what can be achieved. Not only does this help ensure design and development are in sync early on, this gives developers source-level control to customize & style the UI, build custom controls & logic, integrate into workflows, or build a UI from scratch. An open-source UI thus allows for immediate transparency and advanced customizations, with the freedom to build your own experience off the original source code to accelerate your time to market.

Wrap Up

In this article, we uncovered ways to implement UI design while keeping design teams, developers, and product managers in sync so their product vision is realized and long-term success is achieved.

Next up in this series is part four, where we discuss security and its impact on time to market, compliance considerations, and known document vulnerabilities.

In the meantime, don’t hesitate to contact us, whether to share stories about your product experiences, to give feedback on this article, or just to request a feature from our developers.