My all-time favorite movie is Fight Club, and one of its most memorable lines (among many) is:
“You’re not a beautiful, unique snowflake. You’re the same decaying organic matter as everything else.”
Oof, total downer, right? Perhaps, but I take an alternative meaning from it: if we’re all the same, then our problems aren’t unique either. By solving our own most difficult problems, we’re potentially creating immense value for everyone else in need of the same solution.
Flare’s new mobile interface is a perfect example of a “scratch your own itch” mindset – in fact, you can see it in action right now, by viewing this post on a mobile device. Seriously, just visit this post on your phone and check out how Flare Mobile works. It’s ok, I’ll wait…
Oh, fine, here’s a quick animation of it, in case you’re lazy, have your hands full, your phone is dead, or you’re an Apple executive trying to browse this post on your fancy Apple Watch (say hi to Dr. Dre for me).
I thought it’d be interesting to tell you the story of a problem we turned into a business, and how our experience with this approach continues to inform what we’re working on today.
Step 1 – Validate Your Own Pain
It all kicked off with an insight from earlier this year that an increasing proportion of the traffic to our blog was coming from mobile users. That by itself was neither a surprise (mobile traffic is now growing 81% year-over-year and makes up 22% of all web traffic, according to Internet Soothsayer Mary Meeker), nor of huge concern for our readers’ experience, since our latest theme was designed and built to be responsive from the outset.
But then we realized that a quarter of our content promoters were entering a world of hurt – dealing with tiny sharing buttons and finicky behavior when they tried to share our posts with their friends from their phones and tablets. Ouch.
Since we were already using our own Flare sharing bar plugin on this blog, and it already has a pretty decent user base, we immediately started asking our users if mobile sharing for their content was a concern to them – quickly validating that yes, yes it was:
Since it was clear we didn’t have a unique problem, surely other solutions existed? We turned to Filament’s product designer (and Internet Hoarding extraordinaire), Shawn, to look at what other mobile, in-browser sharing plugins are out there. What he turned up were either custom-coded approaches on major sites like Mashable and HuffPo, or plugins that weren’t impressing us – including one or two examples that were downright ugly! Suffice to say, our socks remained thoroughly un-knocked off.
Thus, it seemed we had stumbled across a ripe opportunity to kill two birds with one stone – creating a dedicated sharing interface for mobile devices would both solve our mounting problem of missing out on shares from mobile visitors to our blog, as well as make a massive improvement to Flare as a product.
Step 2 – Scratch Your Own Itch
We set to work defining our ideal mobile sharing experience, borrowing inspiration from many of our favorite interactions in native mobile apps (I’m looking at you, Path):
- It would be snappy & smooth
- It would be unobtrusive to the content (since screen real estate is already at a premium)
- It would be beautiful
- It would be easy to configure & customize
With those requirements in mind, Shawn began sketching out potential approaches – innovating a nifty hack that used the outline of a credit card for quickly and easily drawing a smartphone screen wireframe! See? Betterment, man…
After creating and disqualifying a bunch of different concepts, we narrowed the field to two separate ideas: “Leaderboard”, which shows almost a… um, leaderboard of the different sharing networks…
…and “Tiles”, which reminded us of the interesting Windows Metro interface.
We also iterated on the “Trigger” button a bit – the interactive item that would start the animation to reveal the sharing buttons, overlaid on top of the content:
We ultimately ended up choosing Tiles as the winning design concept for a bunch of reasons:
- Leaderboard didn’t look actionable enough – it wasn’t clear that each item in the list was clickable
- Tiles was more flexible to customize, and more easily matched the button style to those of the desktop version of the sharing bar
- Tiles looked better in both portrait & landscape orientations, and most importantly…
- Tiles were easier to click one-handed with a thumb
Once we had the concept nailed down, we took it a step further, exploring different potential configurations…
…as well as checking it in landscape mode:
It all checked out, so design was approved, multiple palm-stinging high-fives were exchanged, and we handed the design over to our developer Jamie to implement the feature.
Biting Off More Than We Can Chew…
So, the hard part was done with, right? We could just put our feet up in anticipation of smooth sailing through development, as we deliver an amazing solution that solves our problems…
As it turned out, there’s a great reason why there were no other compelling mobile sharing plugins out there. Creating a layout that is adaptable to tons of different screen resolutions, works across multiple mobile browsers, accommodates both the portrait and landscape orientations all while maintaining proper spacing is a herculean task.
In addition, we had to tackle the issue of accounting for the pinch-to-zoom gesture, which had the lovely side effect of expanding all elements inside the browser – including our trigger button, until it covered nearly half the screen.
…Then Chewing Like Hell
“Nothing that’s worthwhile is ever easy. Remember that.” ― Nicholas Sparks
We were at a crossroads: developer time was at a premium, and we had many other pressing issues. We could either cave, and sadly accept that the web isn’t ready for a beautiful, responsive, in-browser sharing plugin.
Or, we could persevere, strike a blow for improvement of the web, and create something truly unique. Guess which we chose?
After spending the better part of three whole weeks building, tearing down, and rebuilding several prototypes that met our needs, Jamie triumphantly handed over a functional build of Flare Mobile to us for testing.
Step 3 – Find Others With The Same Itch
We included Flare Mobile with our official Filament launch at the beginning of August to our entire user base, and it’s proven to not only be one of Flare’s most attractive features, it’s actually helping to drive sales of Flare Pro – thereby helping to fund additional improvements, apps, and features for Filament overall.
Step 4 – Find More Pain
So what’s next? We’re currently repeating this process for another huge pain point of ours – keeping track of what’s happening on our own web properties.
The Betterment Blog as you see it now didn’t happen by accident – it’s taken years of careful curation and monitoring to get it to where it is today, as well as a huge amount of time and effort on the part of our editors, poring through analytics reports to glean useful insights as to what we should be writing about next, which posts get the most sharing action, and who is driving the most social traffic to our content so we can connect and engage more with you guys.
Together, we’re talking about how we can extend Flare to alert our editors when there’s significant sharing activity occurring on this blog, as well as automatically generate a weekly email report containing the same kinds of actionable insights that take so much manual labor to uncover.
Would this be useful to you too? Take our 3-question survey to help us build it quicker!
Make no mistake, this is an itch orders of magnitude bigger than building a mobile interface – but I think we’re the team to scratch it!
You’re Not Special – But Neither Are We
Ok, so you might not be quite onboard with the idea of Tyler Durden as your product development role model – but what about someone slightly more recognizable who basically said the exact same thing?
“When you grow up you tend to get told that the world is the way it is and your life is just to live your life inside the world. Try not to bash into the walls too much. Try to have a nice family life, have fun, save a little money. That’s a very limited life. Life can be much broader once you discover one simple fact: Everything around you that you call ‘Life’ was made up by people that were no smarter than you. And you can change it, you can influence it… Once you learn that, you’ll never be the same again.” ~ Steve Jobs
We as a team don’t often encounter special problems – they’re the same problems everyone else has. What I think sets us apart is that we love building our own solutions and seeing if they’re useful to other people.
And you can do it too.