iOS app // 2018 // SHIPPED
Tap was a startup inside of Wattpad built to feature “interactive stories” that were starting to appear in 2017. This started with “chat stories” — stories that are told through text messages between characters — but after the novelty of chat stories began to wear off, the team blitzed to create a new interactive story format that could have richer narratives built around a choose-your-own-path structure. I was brought in late to that process for my experience in interactive books and my scrappy start-up background.
After the bubble of chat stories began to deflate, the Tap team rushed a new story format into production called ScriptTV — it was built to reflect what an ‘interactive television script” might look like. By the time I arrived, the prototype had been built, but there were lots of issues with the interaction model.
Basically, there were no internal consistencies in how the format worked aside from tapping to load the next paragraph of text: sometimes you scrolled side-to-side to advance “pages”, sometimes you scrolled up-and-down; sometimes a page only took up the size of the viewport, sometimes it scrolled; sometimes making a choice advanced to a new page, sometimes you stayed on the same page — basically, there were lots of really cool ideas, but it was hard to use and needed streamlining.
It was clear that my first job was going to be streamlining the experience so that it was easier to use, even though that meant that some of the versatility would be lost.
Any decisions were going to be low-risk enough that we could try them out without heavy investment in re-developing the app, since I was only looking to smooth out what was already there, and so I made two paradigmatic decisions: the app would only advance vertically, which was a much more natural thumb motion, and there would be only four types of content blocks. Other elements, like tap-to-advance, animated text, and choices worked well and were left as is.
Most of these new restrictions required little-to-no engineering to implement (aside from removing the side-swipe-to-advance), and instead required detailed documentation for our internal and contract writers. I diagramed the interaction model, the content blocks, and created themed colour palettes to use for various genres.
Once we had these rules in place, we began testing on users, and the results were overwhelmingly clear: the smaller pool of interactions made the reading experience much more seamless, fun, and allowed readers to enter into a reading flow state much easier now that they weren’t battling the interface to advance the story.
Another area that seemed ripe for streamlining was the ‘choice’ mechanic: the tool writers used to allow readers to choose the path of their story. Currently, choices were presented and then disappeared once the reader selected their path, making the reader unsure if their choice was recorded and where to find the choices that they’d previously made. This was particularly problematic because readers started telling us that the agency the choices gave them was the real killer storytelling feature of our experience, so we needed make it a more seamless experience.
I hypothesized that redesigning the choice chrome and animating the choices themselves could bring a lot of clarity to what impact a user’s choices were having on the story they were reading.
The most important goal for animating these choices was going to be keeping the user in the flow of the story. I didn’t want to create some “Dribbble Shot” in the middle of their reading experience that called attention to itself. I wanted to create a subtle indication that a choice had been made, had integrated itself into the story, and could be easily spotted if the reader scrolled back in their book.
To achieve that, I created a transition that took the choice itself and, once selected, slid out of the chrome of the choice box and slid right into the narrative of the story. It slid upwards in a way that mirrored what happens when the reader scrolls to advance their story, and did so at a gentle pace that didn’t slow the reader down but also didn’t speed up their natural rhythms.
One other thing I did when I redesigned the choices was I used the Tap logo both on the choice chrome and as a visual indicator for past choices. The reasoning was that these choices were increasingly the element that readers were responding to most, and I wanted to ‘put our stamp on them’, so to speak, so that users (especially new users) understood that this was the key interaction element that we wanted them to associate with Tap.
We felt we needed a signature story to really show off what Tap was and what it could be. We had our staff writers write a new rags-to-riches romance story, designed new features for it’s storytelling (like animated gifs and picture choices), and we reimagined the hero banner on home to act as a portal into this particular story.
I felt that these stories were more than just books, they were experiences. Most of our user research sessions were telling us that users felt more a part of these stories since they were the protagonist making the choices that dictated the direction of the plot, and I wanted to represent that “entering into a world” with how they opened the story.
I wanted to make our hero banner on home become the first panel of the story. I wanted to create an experience that said that you’ve made a choice to enter into the story rather than just opening it. However, I was also mindful of a key criticism of our app: whenever we would use really dynamic animations in our marketing for these stories, users were disappointed when they began reading and learned that it was almost entirely a text-based reading platform (unlike the more comic-book-y style of our competitors). Given that, I was mindful not to create an animation that would be too dynamic, leaving the reader expecting a story experience that we weren’t giving them.
The version I settled on was by far the subtlest: just rearrange the elements of the horizontal hero unit to match the cover’s portrait orientation. No big effects, no dazzling gradients, just a gentle re-orientation of what’s already there, almost like elements of a lock rearranging to unlock a door.
Ultimately, A Royal Deception proved to be a great shot in the arm for Tap. It was, first and foremost, a great story that tested better than any story I’ve ever seen at Wattpad. It was also the first story written with monetization around the choices (where entirely new passages and scenes were only available by paying), which led to 2x our expected conversion rate for paid choices and changed the business model of the app. It reinvigorated Wattpad’s commitment to interactive and was a terrific project to be a part of.