How Outlign shipped a custom product walkthrough using Dopt in just two days thumbnail
Customer stories

How Outlign shipped a custom product walkthrough using Dopt in just two days

Alon Bartur's headshotAlon Bartur
  • April 17, 2023
  • 3 min read

Outlign’s onboarding challenge

Outlign is a project management platform tailored for creative agencies founded to address the challenges that a lack of a clear process can cause in creative agencies: unhappy clients, frustrated staff, and dwindling profits. Outlign was designed to simplify the project workflow for creative agencies and their clients by providing a process-driven project management approach that helps teams deliver referral-worthy projects with fewer mistakes and more profit. Outlign’s product is opinionated—it’s what makes it powerful, but it also introduces challenges when thinking about how to best get users up to speed.

Our product takes a different approach to how projects can be run — especially projects that follow a process with a client — so we need to introduce those new concepts and the features that support them, but also give some insight into why we approach things that way and why we think it’s good for other agencies to as well. That’s not easy!

Outlign tasks page

They knew that their first-time user experience was a key step in their users’ journeys and would play a crucial role in getting their users set up for success. In order to build onboarding that accomplishes this, they decided they needed full control over the experience. They initially built their own simple solution in-house but quickly ran into limitations with their approach to persisting the user state of their in-product journeys.

We’ve looked at other onboarding frameworks before, but found their approach to be too rigid—both in how they implement the onboarding itself (e.g. a strict “tour” setup you can’t break out of), and in the ability to customise the styling & interactions. We built our own simple onboarding system which was OK, but lacked a good user state management solution.

Outlign’s first Dopt flow

The first flow that Outlign built contains a series of glowing hotspots that highlight key features and concepts for new users. When users hover over Outlign’s hotspots, they’re shown help text and presented with relevant actions they can take.

Dopt provided Outlign with flexible primitives that gave them full control over the behavior of their walkthrough, not just the UI. For example, when a user selects an action selected in the hotspot they were able to perform real product actions like creating objects or changing UI state. For example, when a user selects the ‘Add Notes’ action in one of their hotspots they’re able to bring a user directly to their notes side panel where they’re met with helpful empty state text, explain a crucial Outlign concept.

Building with Dopt

Dopt’s JavaScript SDK was easy to get started with, and Mark was able to rapidly ship new hotspots using Outlign’s own hotspot component. He was able to implement each step of the experience quickly, not having to worry codifying business logic or persisting user state. That let him build a more robust solution in less time than he’d been able to without Dopt.

Building with Dopt was very straightforward—I could easily manage the state of my Vue components and no longer had to worry about onboarding showing again if the user cleared their cookies. The other big plus was that I was able to build out hotspots that followed a specific order—something I hadn’t been able to easily build in our own custom onboarding.

Using Dopt also means that Outlign has been able to quickly iterate as their product evolves and as they learn what’s most effective. Mark used Dopt content fields to control the content of the hotspots. That’s allowed his non-technical co-founders to iterate on their experience without Mark needing to be in the loop for each change.

Mark liked that Dopt provided him with a complete developer toolkit made up of flexible and composable primitives: he could easily design the state machines behind his in-product journeys, collaborate on them with non-developers, and implement experiences with his own UI components using Dopt’s simple SDKs. He also liked Dopt’s headless approach which meant he had the freedom and control he needed to craft high-quality experiences that fit his product. Dopt’s platform provided him with the missing state management layer that had made past efforts to build tours, wizards, and callouts so time-consuming.

Dopt’s impact

With Dopt, Outlign was able to significantly improve their user onboarding experience in days.

What I like most about Dopt is the combination of a robust state tracking solution (so much more reliable than cookies!), paired with the flexibility for us to design the onboarding experience however we want. We can now easily highlight key features and concepts on different screens based on custom logic, design, and UX that is all easily tracked through Dopt.

Dopt’s platform let them avoid the pitfalls that came along with their previous workaround of persisting user state in cookies and meant they didn’t have to worry about the costly work of building and maintaining a backend to persist user state in order to keep track of who had seen or done what.

Dopt’s headless approach allowed Outlign to use their own UI to build the exact experience they wanted. The flexible primitives in Dopt’s SDK made developing a robust, high-quality experience simple. The holy grail, quality and speed!

Ready to get started?

Sign up for a free account and join developers like Mark, who use Dopt to build better in-product user journeys. Use our SDKs to build wizards, onboarding, and feature callouts remarkably fast.