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
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.
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.
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 as well. 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 ☺
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.
I loved the idea of Chat Heads when Facebook launched the new Messenger app in April of last year. It made perfect sense to be able to quickly respond to a new message with the simple tap of a face all without leaving your current app. Of course this luxury is only available in the Android version of Messenger as overlaying one app on top of another is not possible in iOS. This means that on iOS we’re relegated to Chat Heads only in the Facebook App while the Messenger App receives no juicy Chat Head love.
It’s saddening that all the great design and forward thoughtfulness of Chat Heads is lost to a simple UITableView! When the user taps into a conversation they leave the context of their other conversations. All the open conversations slide off the screen never to be seen again until the user leaves the current conversation by hitting the back button. At this point the other conversations are revealed and a whole new world may have emerged. New messages may have arrived while the user was in another conversation and only a push notification could have warned them. Wouldn’t it be great to empower the user with the current state of their conversations at all times?
I’m going to break down the design goals here first but if you want to skip ahead and try out the prototype then here you go (Please view on a phone sized device or resize browser to phone size) http://messenger-redux.herokuapp.com/. I apologize if it takes a minute to boot. It’s running on Heroku’s free tier…
Right Toolbar > Top Toolbar
The key to Messenger Redux’s design is to remove the standard top toolbar of most apps and adopted a right side toolbar instead. This gives us a simple hierarchy starting with the plus icon to start a new conversation, then a large scrollable area for all the user’s open conversations, and finally the menu button to see more details. With this design the user retains the context of all their current conversations while still viewing and taking action on the open conversation. Their is no constant in and out that the current messenger app(s) suffers from, just a simple bubble tap.
Meaningful Menus & Logical Interactions
The menu can be accessed by a tap or a simple swipe left on the toolbar and then closed again by doing the inverse. Putting the toolbar and menu on the right side of the screen has a few bonus advantages. First there is no overloading of the swipe back gesture to open the menu/go back a step that was introduced in iOS 7. Second the toolbar gives the user a large logical surface area to swipe against (feels more like a drag) compared to the common swipe right somewhere to the left side of the screen.
Bottom is So Much Easier
Another differentiator of the design is the placement of actions on the bottom of the screen (message input, send button, menu button, and settings). I did this because I hate reaching for buttons at the top of the screen! This is not so bad right now on an iPhone 5s but on the Nexus 5 (and most likely iPhone 6) the large screen makes tapping top mounted buttons a chore. I wish I could have also placed the “Add” button on the bottom but the hierarchy and interaction when a new conversation is started (slides in from the top) denotes that it had to be at top.
I’ve included settings here to show that Messenger Redux is designed around 85% width panels. This give the user a logical 2D layout that provides enough context to show where they are and how to get back to where they were. The previous panel’s content is made slightly transparent and the button that brought the user to the new panel is lit up to help give a visual cue of an “active” state. To go back the user simple taps (or swipes right) anywhere on the previous panel (not just settings button).
I’ve developed a working prototype that you can try yourself. The design is for phone sized devices so things will look and function strangely on anything larger than a phone (resize browser to phone size to get the correct design) http://messenger-redux.herokuapp.com/. Enjoy!
Much has already been said about the new Spike Jonze film Her. From the amazing voice acting of Scarlett Johansson, to the retro but believable vison of the future, to the meaning of what it means to be alive and capable of love, and many more subtle avenues. This is what makes Her so compelling. Unlike many of its contemporaries, Her adopts a subtle form of story telling that lets the viewer’s mind explore without any heavy handed “hey stupid, over here!” narration or dialog.
There’s a moment when Theodore (Joaquin Phoenix) puts on his horn rimmed glasses (great style choice btw…I have basically the same ones) and there is a finger smudge (looked like right thumb) in the bottom right lens. Maybe this was just an accident, maybe Joaquin (yes we’re on a first name basis) wasn’t used to wearing glasses and picked up the frames awkwardly, but it added such a small but massive detail to Theodore’s humanity. I immediately felt connected to his character as I yearned to pull out my micro fiber cloth and alcohol lens cleaner.
Throughout the film Samantha (Scarlett Johansson) travels through the world with Theodore as a sleek sexy flip phone with a single camera lense looking out his breast pocket. Theodore uses an oversized safety pin to perch her high enough so the lens will be able to look out over his world since the phone is shorter than his pocket. Jonze decided to make this a problem that Theodore had to find a solution to but we never see the decision made to use the safety pin, it’s just there. I love this. I love that in every scene you see the safety pin it’s always cocked off to one side in a very Wabi-sabi way. I love that this subtle choice of using a safety pin reveals (reinforces?) soo much of Theodore to the audience (not the least of which is the word safety in safety pin). I love that I can picture the moment when he and Samantha decided to go outside together for the first time and Theodore had to rummage around to find a solution to this shirt pocket too tall, phone too short problem.
Her continues down this path with almost everything in the world (most prevalent is the technology). By the end of the film the viewer is actually left with more questions than anything else. Jonze gives us just enough to explore the world and the ideas he’s presented while neither passing judgment or providing a hypothesis and for a film that’s about what is life and what is love, isn’t that the only way one can present it? It just is. I loved Her.
There are only two emotions that for extended periods of time signify that something needs to change. The first is indifference and the second is contentment. Indifference is simple and intuitive. I stop caring, therefor I need to find something I do care about. Contentment is much harder. Why should an emotion about feeling happy and peaceful be bad for us?
Life is long, very long. We have so many chances to do so many great and horrible things during our time here. We must stay hungry. We must stay humble. We must continue. Contentment is the lithium to who we could be. It numbs us. It holds us back with a sweet embrace, clouding our thoughts.
How can you push yourself to be more, when you’re content with who you are?
We’re told as children to focus on our passions. With the assumption that being passionate will help us keep moving when hard gets harder. The climax to this line of thought is an overload of passions! Too many things pulling us this way or that. Should I be a writer, a painter, an industrial designer, a chef? I love them all!
I battled the bombardment of passion throughout my high school years and even into the early years of college. When I was 16, I wanted to be a chef, then when I was 17 I knew I wanted to go into business, but finally at 18 I knew it was Engineering. I was passionate about each of these paths (still am!), but it took something elemental, the essence of a thought to feel what I was supposed to do.
Now, after having a few more years of wisdom I know that passion is cheap. Passion is everywhere and can be fleeting. I’ve learned that passion is an abstraction for something much stronger. The seed that blossoms into our passions is what deserves our attention. Our passions are just symptoms of our systemic need for purpose.
When I stripped away the layers of science, math, and art from my passion I discovered I need to build. Build anything, build something, but I must build. I must create. I never thought of myself as a creative individual, but now I know that is who I’ve always been.
Focus is something that is so ingrained in the DNA of a startup that it easily gets overlooked and forgotten. When a startup is founded, it usually does one thing. It either does that one thing better than anyone else or it’s completely original and it does it only OK. Next, the startup focuses on this one thing and makes it that much better until it’s a great product (or only product out there).
As the months and years go on, as employees are added, new products emerge. Some of these products will be tweaks of the original to be targeted at a different audience, while others will be ecosystem products that build up the main product, and finally there will be products that stand on their own. This can be the most dangerous period for a new successful company. It’s too easy to look at the numbers and think “what if we added X!” when we should really be asking ourselves what makes our product good? Can it be better? Most importantly, what problem are we trying to solve and is our product the best way to solve it?
As time goes on we forget to ask ourselves these simple questions. We get entrenched in the status quo. There’s a reason major companies get disrupted all the time. They became complacent, iterative, and in the most basic sense, forgot what they were really trying to accomplish. Look at Sony, Microsoft (from 2000-2010), Blackberry, Yahoo, Motorola, etc. This is a cycle that will likely never end, but we can help guard ourself and our companies by asking “What do we do?”
A few years ago I began documenting my ideas in a small Moleskine notebook to help expand my thoughts. Tonight after reading some amazing forgotten literature on Letters of Note, I was inspired to read from my idea notebook. This is a feat rarely accomplished as my idea notebook is a place to build thoughts, not relive once grand ideas. Here are two excerpts from my readings.
April 5th, 2010 (two days after the first gen iPad is announced)
"Mobile is still a branch of the desktop. A pure mobile company can’t be huge. Margins are too low, market is too small. Small exits may be possible but anything larger is only possibly on the desktop."
"Mobile cannot be ignored or a small part of a new business that wants to be huge. The marriage of a mobile experience and the desktop is the next business explosion."
January 7th, 2012
"I have found that new ideas are the most priceless possession in this world. I need to be around people that can give me this. I need to be enlightened with ideas."