Apester Lead generation form in Story

This project was a new expansion for Apester - offering our users a new capability to capture leads on the platform, by utilizing our popular Story Feature

Background

In mid 2019 I was asked to design a new Lead generation form for Apester’s platform. The need came as a result of the feedback we received from our users. To them a lead gen form was an important touch point with prospects, that will support their marketing activities and help further progress their sales funnels.

Apster’s strong claim, for increasing engagement via (our) units and stories, had an opportunity to add yet another element of value to our users and to these high engaged leads.

Scope Goals & Challenges

The goal was to add this feature in an MVP version for paying users and test user’s acquisition.

For the MVP version I needed to create two flows - one for our editors dashboard (Apester’s users) where our users build their stories, and second flow for our story player (Apester’s users’ audience) which will be the actual experience. The goal was to continue building and evolving this - first launching it to premium users ( paying) as an option, and to later launch this in our freemium version.

The challenge was how to create these two different flows in as native way as possible, so that it would fit both our story editor (builder) and our story player (in mobile), and the ways users behave and interact with both of them

Research

I looked at many contact forms and journeys leading to them, to understand what are the common patterns and components that are necessary to have, like that as well as the different flows and interactions that users have with such elements, and how different they are in mobile V. desktop, and tried to understand different “form scenarios” by interviewing some of our clients and collecting their input.

UX Flow

After conducting my research, I started creating the form / flow for the story Player (our user’s audience ⇒ lead capture)

Flow for applying the Lead-form in story.

For the story editor version (internally used by our users) I wanted to make it easier for them to build and adopt the feature, by providing them with clear ready-to-use templates that serve as easy starting points. These templates support common scenarios and inform our users the types of “lead-gen” journeys they can (easily) apply in the story they want to create for their audience.

I Started by designing four templates, which are the main “lead gen” use cases /journeys our customers would likely use to lead their prospects down the funnel:

Newsletter, Sweepstake, Gated Content, E-commerce.

Starting point in the editor wireframe

Display of the content and elements for each template.

Adding components

These templates were meant to be a starting point, and help guide our users to better understand the possibilities. But as we didn't want to limit them, we also had a custom feature ability, to further customize.

By pressing the form, a user gets a side menu where he can add components to the form based on his specific needs.

Adding checkbox component

Because the mobile platform is limited in size, and we wanted to avoid scrolling, we wanted to guide our users with best practises as well, and as they further customize, and with every element they add, they would be able to see the size limitations (heights)and they would be alerted in case they exceeded these guidelines.

Form fields

For the MVP version, we decided to let users choose from a drop list of 7 most common fields

Both the fields’ order and their naming, are all completely customized and can be updated as needed

Adding the Design Layers

Using the pre-existing functionality of what was back then our current editor dashboard, I chose to implement it in my wireframe and add to it layers of design and usage, such as icons, widgets, templated contact fields, and form panel.

Editor lead gen flow

Sumbit form Animation

Results & Next steps

Maintaining a strategic approach and translating it into a practical way was crucial for this project. I focused on setting up and building the foundations and supporting assets for this new feature - with a goal that needed to resonate with two somewhat different end users and narratives, but also accomplishing different goals; for our users’ dashboard (editor) it needed to be easy , intuitive, and simple (stickiness/ adoption), and for our story player (our users’ audience), it needed to work within the function and story, and support the experience (B2B2C).

The launch of this MVP was first to our premium users, and with the solid foundation and infrastructures in place, and after collecting data and feedback, the team is evolving it by launching this feature to all category users.

Daniel Barash

about