C0d3r’s Cut: The conversational interface

For the Editorial Team at Typeform, it’s not enough to just create good content. As part of a design-centered company, we’re looking to produce amazing experiences with every interaction. Sometimes that means thinking bigger—going beyond great content, great design, and enhancing the reader experience.

So for our article, Technology Imitates Art: The rise of the conversational interface, we went a step further. Why? Because the piece is part of our flagship category—HX or Human Experience. And we really wanted to do something that celebrates that.

We began brainstorming how to 10x the piece. It’s an article about conversational interfaces, right? So when someone suggested that we place a chatbot within the article, we thought we may be on to something.

But how would it look? How would people interact with it? Would it be smart, with a tinge of AI? Or completely scripted? And if we were going to do this, the chat interface had to be more than just a gimmick. It needed to add value to the experience.

To build a chatbot from scratch, the team would need to come together. After all, it was something that had never been done before (not to our knowledge, anyway).

Time to call on Jepser and our developer team.

A coder’s perspective

From Guatemala, Jepser likes craft beer, good coffee, and skateboarding. He found his way to Barcelona when a friend’s professor suggested he apply to Typeform. Jepser is now one of our front-end developers.

We asked him to share his thought process on developing the conversational interface within an article about conversational interfaces. Here’s what he had to say.

On scoping out the project:

One of the core values at Typeform is to be a little more human. It’s also the name of our blog. I was thinking we could create a humanized UI. So I developed a framework for the entire project. I love structure, because structure helps me in terms of managing logic in projects. For this article, it helped with the behavior of the UI.

Interrupted or earned attention?

I asked about Jepser’s main objective for this project:

Typeform is a platform that helps people collect information in a conversational way. There are several ways for a blog or an article to get information, and most are intrusive. A user could be focused on reading and when scrolling to a certain point, a pop-up blocks them in a way that’s not contextual.

It seems that everyone’s had that experience. You’re engrossed in an article and all of a sudden a pop-up comes in—and ruins the whole experience.

Jepser continues:

I thought a lot about that intrusion. How could we earn the right kind of attention and still get the critical information we need?

In conversations, we gather information in pieces. In terms of dating, when meeting someone for the first time, you wouldn’t immediately jump from, ‘What’s your name?’ to ‘Where do you live?’ You’d gradually get to that point.

From our meetings, the article’s objective was clear: chat interactions needed to add value to the conversation, not reduce it for the reader. We were inspired by special edition DVDs where actors and directors share their point of view for different scenes—adding another dimension to the movie.

So we did our own version, adding commentary to concepts to build some depth, and still keeping the conversational tone of the article. Jepser adds:

And instead of a “call-to-action pop-up” at the end of the article, we ask, ‘Hey, did you like it? Want to subscribe?’ This keeps things conversational and minimizes intrusions. It’s more engaging, I think.

Profiling for HX

The chatbot also gives readers the option to watch a clip of a movie or skip it altogether. This brings up the concept of profiling, another term that Jepser emphasized during our conversation:

Let’s say I ask, ‘Do you want to see a movie, a movie trailer, or a movie clip? Yes or no?’ If it’s no, maybe someone already knows what we’re talking about, so they’re not interested. And if people click yes, maybe they want to know more.

Here’s where it gets interesting. Maybe in future articles, after a reader returns, we could guess what they’re looking to do and offer them something based on a response from a past article. That’s context.

Jepser brings up a great point. Imagine giving readers a customized experience, based on their behaviors or past engagement. We think there’s potential here.

If you read the article, do you remember when the chatbot asked for your name in the beginning? If you closed your browser for whatever reason, but returned to the article (from the same computer), you received the following message: 

It’s not face recognition technology yet, but it’s a crude version of what’s possible. Imagine the opportunity for innovation with your content.

Jepser’s take:

In each article, we could save information that eventually serves as logic within the app, since all responses are stored in memory. If we already know a reader’s preference, then perhaps we show or hide something based on that preference.

It sounds futuristic, so let’s bring it down to earth. Think about your favorite blog or news site. If you’re already subscribed to it, does it make sense to blast you with pop-ups asking for your email again? Shouldn’t you feel less like a stranger when visiting your favorite blogs or news sites? The more your preferences are known, the more customized an experience could be.

If contextual marketing and commerce isn’t a thing yet—we’re confident it will be.

But for this article, we’re not storing a reader’s preference for a later date. Enhancing the experience of the reader right now is our priority. Jepser is clear on this point:

We don’t want to spam our readers. The idea is to engage. For example, (almost) everybody loves cats, but let’s say somebody really doesn’t. We ask, ‘Hey, do you like cats?’ Yes or no. If they say no, then in the future, we won’t talk about cats. But if they say yes, then we put some effort into showing them really cute cats.

It’s sounds really simple, but people aren’t doing this yet.

He returns to the experience of the article:

Some people track time-on-page. But for this article, the more you read, the better you understand the concepts in the article. It’s not about time spent by the reader, but progress. Progress for the reader is important.

Validations

Jepser brought up another simple, but interesting concept.

What if, for example, you asked for someone’s name and they said, ‘Dinosaur.’ What would your response be? How would you react? Would you give them a funny look? Would you say, ‘C’mon.’ Or would you laugh?

Of course, we weren’t able to filter for every weird response, so we targeted curse words. But with a little more time, I’m sure Jepser would have found a way.

Jepser knew people would test the chatbot, and he wanted to account for all the interesting responses people would give it. For some, the chatbot’s responses to the vulgar among us might have surprised or delighted the reader. Either way, it caught their attention, adding intrigue to the article.

It’s not a gimmick. Jepser was attempting to recreate a moment that normally only happens in real life between humans. This was an important HX moment.

Final takeaways

You learn a lot when it’s your first time programming with a new framework. Jepser messed around with React before, but not with the intensity he experienced when delivering on this project. He wanted to share this message for his fellow developers:

He acknowledges there’s a lot of room for improvement with the chatbot. He’s also thankful for all the help he received from fellow Typeformers. They gave direction around developing a new library for this complex project.

Besides help from the team, Jepser kept a document to maintain focus on his objective. Here’s Jepser:

This document helped me stay aligned. And as you can see, it’s not technical at all—it’s just a concept document. When you’re creating a document like this, write it to be ‘semi-inspirational.’ Keep one goal in mind, so that you’re doing what you said you’d do before you started.

Makes sense to me. And I can vouch for the non-technical content of the document—I was able to read it and follow his line of thinking without cramming for a computer science degree.

He continues:

Because if the concept is super cool, but we approach it in the wrong way, then it will fail—even though the project is good.

Through it all, our whole team learned a ton of lessons. As for Jepser, he’s self-taught when it comes to WordPress (PHP), React, and other frameworks. It took him a couple of years to get a good grasp on things. What’s his big lesson in all this?

Coding takes a lot of patience and passion.