Novl.co — The Next Generation
Redesigning a dead product
This past summer like so many other bright-eyed hopeful entrepreneurs that came before me, I quit my cushy day job to pursue my own project. It took three months to build v1.0 of Novl, a visual story telling web platform. Two months later I called it quits for a multitude of reasons. Large competitors were entering the space, lack of growth and market fit, low outlook for future revenue, etc. Since then, story telling has become an incredibly heated space with new competitors Exposure, Storehouse and even Facebook with the new Paper app (not to mention *caugh* Medium *cough*). Storehouse is the much more interesting and impressive experience since it launched for iPad only, whereas Novl and Exposure are responsive web apps. Being a native app on iOS, Storehouse can do impressive animations and gesture transformations with ease using iOS7's UI Dynamics. As a Front-end web guy this pained my being for the sorry state of Novl’s UI incomparison. Inspired by the great work of my contemporaries, I was determined to redesign Novl’s story page as a standalone prototype to push the boundaries of what was possible in web UIs.
If you would like to view the prototype before reading on: http://proto.novl.co
Guiding Principles of Redesign
Transformative UI
Apple may have not invented the idea of transformative UIs but it made their existence ubiquitous with the launch of iOS 7. The use of parallax, skew, scale, gaussian blur, etc. is now a common practice in mobile apps and is quickly spreading to the web. With the redesign of Novl I wanted to make heavy use of these modern techniques in a way that makes sense for a sequential story telling web app.
Exact and Immediate Feedback
A founding principle to any native app is the exact and immediate feedback the user receives with their finger on the glass. On the desktop web we don’t have the luxury of fingers on the screen, but are relegated to the users mouse wheel or trackpad scroll. Thankfully with modern trackpads, modern OSs, and modern browsers we now have per pixel scroll events that we can use to give the user meaningful feedback. As a user scrolls down the page we can adjust the opacity, transform elements, or adjust colors in an exact proportion to how much the user has scrolled. This gives the UI a feeling of liveliness as it reacts to the users input.
Screens
Please try out the prototype before continuing to my thoughts on the design. Screenshots really don’t give justice to the motion and liveliness of the design.
This page is pretty self explanitory so I’ll only point out a few details. First notice the story length/progress shown as a seriese of dots on the right of the page (thanks Circa). This gives the user a sense of length and place as they scroll through the story. Since every card is a 100% height container this all works nicely, especially on mobile as I’ll discuss later. Next, scrolling has a proportional effect on the content of each card. Scrolling down the page to the next card animates the title, description, and attribution down the card as it follows the user’s scroll. Scrolling down also drops the opacity of the card’s content to show the changing of focus from one card to the next.
Scrolling up while at the top of the page, which would normally “rubber band” the page on OS X, does something special (works only on OS X >= 10.7 and Chrome/Safari). Try it out: http://proto.novl.co
In the previous design of Novl, the menu sits behind a hamburger button which when clicked, slides the page to the right 325 pixels to reveal the site navigation and notifations (much like Medium’s today). In my redesign, I found this animation of sliding over to feel superfluous so I removed it and went with a simpler hover/click of the N to reveal the menu inline. Notice the short hand logo “N” transforms into the full “Novl” logo ☺.
Large text blocks are now super sexy. The user can define a custom background and text color as well as have accompanying photo(s) to the right/left of the text. The first character of the text block uses a much larger font size and heavier weight to act as a throwback to classic novels that started each chapter this way.
I added the ability to have collections of photos as a grid. The grid card fills the entire card with up to 9 photos. Clicking on a single photo zooms it into a modal viewer takeing up the entire screen.
The story runout card is dead simple with just a few options. I could probably add a bit more here…
Bellow the story runout exists the next story to read. All the user has to do to start the story is continue to scroll into it. This is real infinite scroll ☺
Mobile
The biggest difference on mobile is the lack of free scroll. This is done to compensate for a technical limitation in iOS’s Safari/WebView (no realtime scroll event, just an event at scroll end). In short this means I have to degrade the liveliness of the animations ☹. When the user swipes up to scroll the page, the content moves with their finger but once lifted it scroll to the next card. This is very similar to how Circa approaches scrolling. Thanks again Circa!
The progress dots sometimes overlay on the content in a compromising position ☹. I would need to either increase the right/left padding of the card content or shrink the dots to improve this.
