Cultivating ‘Lotus’
How developing the visuals, audio and UI of our meditative story app lead to a new way of reading on the phone.
At Immer, we’re working on a new way of reading great books on the phone, a way to spend your screen time more meaningfully. We’re not quite there yet, but we did just release our first English-language pilot app, Lotus, in the iOS App Store, showcasing parts of what we’re creating.
Lotus is based on years of reading research, designing, prototyping and testing. In this article, I want to share some of our ideas and process, focusing on three of the threads we worked on: visuals, audio and UI.
Humble beginnings
It all started out quite innocently. And naïvely. When my novel De verdwijners (‘The Disappearers’) was published in 2013, I got frustrated trying to read its e-book edition on my iPhone. It was a cheap knock-off of the beautiful paper version, with some clumsy errors to boot.
As a longtime video games critic and writer, I thought: anything can happen on my screen (and on my earphones), so why is this experience so limited? I also thought, and this was the naïve part: I can easily do a better job!
So I talked to people, did (desk) research, raised some subsidies (from the Creative Industries Fund NL and Dutch Foundation for Literature, thanks folks!), brought a team together (thanks folks!), did even more (design) research, and started building and testing stuff.
Not everything was useful. There were diversions. It took way longer and was a lot harder than expected. But about halfway through, something interesting happened: the initial goal of using technology to make something nice, a digital-only book presented in a new way, shifted to something bigger.
Subtle visual elements
With Lotus, we set out to reimagine the e-book while sticking to text. Despite our largely visual culture, the power of the written word is still incredible. Isn’t it amazing that observing strings of a few dozen symbols can summon entire worlds in your head?
Still, we were interested in using subtle visual elements to express the story differently and make reading it more attractive. Maybe these elements could be subtle enough that they wouldn’t distract from the text itself?
One of the earlier ideas was using street maps and building blueprints to show environments in a stylized manner, and take some of the heavy expositional lifting off of the text. For example: showing where the participants in a conversation are positioned (so the text could have fewer descriptions).
In this phase, we also created portraits of the story’s characters. These were never intended for the app itself, but they helped to develop the characters, and we ultimately used them in our pitch deck and as promotional art.
As the Lotus story is set in the games industry, our first artist Tim explored the idea of using ‘lo-poly art’: 3D objects optimized for smooth real-time movement in a video game, with less detail, causing a rather specific geometric look.
Around this time I ran into Saskia Freeke’s art. She was posting daily geometric artwork on social media, including animations, which I thought would fit our project very well. We got in touch and Saskia started sketching.
She quickly latched on to the idea of a stylized flower as the story’s central symbol, in which each petal would represent one chapter. In an animated sequence, we’d shrink the ‘current’ petal into a circular progress indicator at the bottom of the screen.
The flower symbol inspired the story thematically, as the main character started seeing a huge flower-like shape in his mind. This, of course, is why we ended up calling the project Lotus.
Saskia also looked into abstract shapes that would float in the background, the amount of particles indicating the chaos in the hero’s head. We never implemented this, as it probably would’ve been too busy and distracting.
We did go all-in on solid colors. White text on dark backgrounds felt both expressive and pleasant to read, and Saskia created a palette of colors that go with the story’s locations, characters and emotions, helping you identify where you are in Lotus. We also used sudden changes in color to call attention to the text, which was especially useful in more complex, metaphysical sequences.
Like with the other threads in this article, our search for subtle visuals that enhance the story yet don’t distract from the text, lead to elements that actually help the reader focus more easily and immerse more deeply in the story.
We even found that the flower symbol and background colors might help with embodied cognition: making it easier to remember the text because there are more concrete ‘hooks’, like how it’s easier to memorize where things are on a physical desktop than on a digital desktop. This is something we want to research more deeply, and build upon in the future.
A new reading UI
If anything can happen on the smartphone screen, why not try something different than touch-scrolling (which is a great invention, but lends itself better to skimming a text than ‘deep reading’) or emulating the paper book with ‘pages’ that move from right to left? That was the idea that kicked off our thinking about UI for reading. (More thoughts in this long research piece from 2016: Moving Through Prose.)
With software partner Codeglue I put together a demo all the way back in 2013. As my debut novella Toiletten (‘Bathrooms’) was a decade old then, we made a free iPad app with just this book in it. The visual elements shown above were never used, but we did include an audiobook and a very early prototype of our concept for ‘text portions’: instead of filling the screen, selecting and emphasizing a coherent portion of text.
No matter how basic the implementation was, readers seemed to like reading this way, one manageable chunk at a time. So in the first Lotus iteration, instead of just de-emphasizing adjacent text portions, we hid them from view.
We were still a little unsure about the portions concept. But the more we tested, the more we iterated, the more people told us they liked it, and the more confident the design (and us designers!) became.
At first, touching a portion would switch to a more traditional scroll mode, while a special button brought you to the next portion. We then switched this around: tap anywhere to continue (and swipe down to go back), tap a button to go to a special scroll mode. But it turned out that nobody used the scroll button, so for Lotus we removed this mode entirely.
By this time, some people were telling us that they were often too distracted to read books (so much text!), but our app helped them focus again. Others said they were reading with greater immersion and a more pleasurable flow. In one test, where we had high school students read the same text in our app and in a regular PDF, our testers’ reading speed seemed to increase. Lotus felt like reading with blinders on, in a good way!
So, now we knew how to present text portions, but how would we create them?
For the iPad prototype, we’d manually broken up the text to fit the (then still) single-size tablet. For Lotus, we wanted to tackle multiple screen sizes, so the app would have to do the portioning. We created a hierarchical algorithm that keeps paragraphs and sentences together as much as the screen allows, indicating that a paragraph has been split (only when strictly necessary) with a kind of vertically centered ellipsis: ···
This means that we can easily divide any text into measured portions and make it more readable, which we did with popular author Arnon Grunberg’s novel Goede mannen (‘Good men’) in our first Dutch-only pilot.
On top of this, we included the possibility to insert ‘portion breaks’, allowing authors (me!) to ‘direct’ the text. In Lotus , some segments are served up line by line, giving extra attention to these phrases, increasing the rhythm and tension, and even injecting a sense of poetry.
Like with the visuals, trying to present text more nicely with some cool UI ideas resulted in something that seems to reliably make long-form text nicer to read— with some artistic flourishes as an added bonus.
Atmospheric audio
For audio, we asked sound studio SonicPicnic to create an integrated book soundtrack. We already had an inkling of how to do it, similar to a game’s adaptive audio system with looping sound files that switch as the situation requires it. Think: you’re walking in a forest and a quiet melody plays. Then a monster appears and the same music smoothly becomes loud and aggressive.
For Lotus I had grand fantasies of a kind of Wagnerian opera (or maybe I was thinking of Star Wars) with music that would develop as certain characters came onto the literary stage. I didn’t want to make a radio play, although diegetic sounds (sounds that come naturally from the environment and actions) were of course something to consider.
But some of our early testing showed us that sound, much like the detailed visuals we’d started out with, could easily distract from the text. We’d have to tone it down if we were to go for audio at all.
There was an intriguing side-effect though. It seemed like minimalistic audio (such as white noise, or subtle ‘atmos’ sounds) actually helped to focus. Similar to meditation apps, putting on headphones while reading would close you off from your environment, allowing you to concentrate and hone in on the story.
In the end, for Lotus, SonicPicnic created a mix with various ingredients: minimal soundscapes, some diegetic flavor sounds, and gentle melodies tied to characters. For extra nuance, we added the ability to layer audio loops, so we could have sounds building up and fading away, without losing the rhythm, just like in the game example above.
If you want to know more, or hear examples, check out this blog post by SonicPicnic about the audio in Lotus. It even shows some examples of the Markdown-based scripting language we created, as we didn’t want to deal with the complexity of the ePub format and had some custom requirements as well.
From messy to obvious
The end result should look and feel obvious, but it was a messy process to get there. And I haven’t even discussed the ordeal of writing the Lotus novella, a literary story you can read in ± 90 minutes (if you’re curious, check out the piece I contributed to The Writing Platform about this). Which I wrote in Dutch by the way, but was translated wonderfully by Jenny Watson.
Here’s a quick look at the final Lotus app:
Wrapping up
Cultivating Lotus was an educational journey. What started as frustration about e-books became a plan to make an experimental story app. And before we knew it, we were discovering how to improve reading on the smartphone for all readers and every book. Which then became a stepping stone for our reading app start-up Immer!
We released Lotus in early September, and early reactions from Dutch readers are super encouraging:
- Users give us an 8.5 average rating and +69 Net Promoter Score EU (“Excellent”);
- 86% of users we surveyed prefers our app to regular e-books;
- 71% even prefer it to paper books(!);
- 100% want to read more books using ‘text portions’.
These results give us a lot of confidence in our design chops. Especially with the text portions concept, we developed a funky hunch into something users unanimously love. This is something we can’t wait to repeat with other parts of the reading experience!
We’re now starting to see just how much room for improvement there is: everyone we talk to says they want to read more, and how much they value books and the act of reading. Yet they somehow don’t find the time for it. Books in their current form are broken, they just don’t match with the 21st century lifestyle. With our next app, we will fit great books into these distracted lives of ours —we can’t wait to show you what we’re working on.
In the meantime, I hope you’ll try Lotus and let me know what you think!
