How Storytelling Fixed My Broken User Experience

I have been toying with a side project of mine (DuoBook) for a while now.

I’ve always thought first comes the working product, then the design. Oh boy, I was wrong, completely wrong.

DuoBook is a site where you start a story and then AI completes the story for you in two languages, and you can practice your language skills.

(A link to an example story: https://duobook.co/story/cmbaoc59p0001ml8eo0meikxs)

I have posted DuoBook to HackerNews, and when I did it worked pretty well, the site design was also okay, but the No.1 complaint I got?

Back then, I have designed it in such a way that when users wrote their story, “Create Book” button was activated, and when they clicked it, they just saw the Sign Up screen. My excuse was “I don’t have infinite money and I don’t want to deal with bots, so just let users register”.

It is a nice way to prevent attacks and abuse, but it is not the best way to get people to use your product… Even though many people registered, many felt tricked just because I never really thought about their experience and never looked at it from their perspective.

My first response was to write a small explanation below the button, “Hey guys you need to register to create a story”. I thought this would solve the problem because it is literally written under the button that you need to register. Again, I didn’t think much about it from the users perspective.

My “Aha” moment came when we were at my friend’s apartment. As an international group, we wanted to read a story. One of them opened the site, scroll down and clicked at “Create Book” button immediately without even adding a story. She got confused, and told me that it doesn’t work…

I was seriously shocked lol. After I explained the steps to her, she enjoyed the product!

So, when I got back home, first thing I did was to make “Hey guys you should create an account” much more obvious.

But I wasn’t satisfied because I started to think from a first-time user perspective. Even though small changes are important, I realized that it’s the flow or the story that keeps users interested in your product. So, I created a flow for the first time users, now when a first time user ends up at DuoBook, they are greeted with a cute “Hey do you want a small tour? :)”

When they end the tour, they see example books in different languages:

So, the user knows what actually DuoBook does. That is, what the real value proposition is for them. Then, they can decide to register or not. In case they do decide to register, then our story continues.

When they are finished with the story, they immediately shown the same things, “Hey look the story continues”:

If they click the “Start Practice”, then they can quiz themselves with the vocabulary from the story. They are given their options:

and then when they are finished, they are again given the option to practice or go back to the original story:

which creates the ultimate flow chart:

This was my first time creating a real flow for users, and I really think it makes a difference, now when I show it to people they just know how to actually use the product because they are in the flow.

I will probably have an update with numbers and new charts on what was the effects of these changes but my main takeaway was:

User experience is the most important thing for a product, and everything comes after.

Stories always works, like this one 🙂

– Onur