Tech

Data-Driven Design: The Story Behind a Simple How-To App

Many apps come with what's called an "onboarding process." Sometimes the onboarding is comprised of slides you scroll through to learn what the app is and what it can do for you. Other times, you actually explore features first-hand before you're able to use the app "for real."

As an app that allows users to browse how-to guides and upload their own, it would be natural for Snapguide to provide a how-to guide on "How to upload content to Snapguide." But, they didn't.

After six months of testing, more than 200 beta users and countless metrics tracked, they were able to make the process simple enough that an explainer wasn’t necessary — the design spoke for itself.

Daniel Raffel knows both tech products and user experience well, as he was previously a product manager for Yahoo Pipes. He created iOS app Snapguide to take advantage of both the great camera built into the iPhone and changes in Google search ranking in favor of quality content that would change the game in the how-to space (which was previously dominated by content farms).

Snapguide allows users to upload step-by-step, visual-heavy guides for nearly everything — popular guides include cooking, crafts and sometimes cool hacks, like how to mount your iPhone to your bike.

Moving the how-to over to mobile was a vast improvement for the user — you can take your phone or iPad to the kitchen with you if you're learning how to make bruschetta. More importantly, the mobile devices of today make creating a how-to guide easier, which enabled Snapguide to fill up with user-generated content.

As you’ll read in the Q&A below, the team behind Snapguide relied on metrics, patience and good design to build their app first and the Snapguide community second.

Q&A With Daniel Raffel, CEO and Co-Founder of Snapguide

Why was this the right time to bring a how-to platform to mobile?

A little over a year ago I wanted to share my favorite bread recipe with friends on Facebook and Twitter. I attempted to document my recipe in real-time and was surprised how difficult it was to do!

Before I could even start describing my recipe I had to capture photos and video on a digital camera, import them to my computer, export them from desktop photo sharing software, and upload them somewhere on the web. It was a real hassle. It got me thinking about how I could improve the way people share experiential knowledge.

I concluded that mobile was not just the ideal consumption tool, it was also the ideal creation tool. There were multiple reasons mobile was so attractive but the major ones were:

Awesome cameras: iPhones were shipping with cameras that were taking photos that rivaled point-and-shoot cameras. Visual instructions are powerful, and I believed this would encourage people to literally show others how to do things that they're passionate about.

Network connectivity: Syncing media was as simple as pushing one button.

Constraints: My favorite instructions were short and sweet. A mobile creation interface with captions limited to 200 characters per step felt natural. I figured if the content was made on mobile it would look great on mobile too.

Mobile identity: Most people are signed into Facebook or Twitter on their mobile devices. This not only made sharing content on social networks easy, it made it easy to learn more about who published a guide or offered their advice in comments. It also generally discourages people from being rude. It has other advantages too, such as knowing that you're reading something written by a real person who is passionate about what they're showing you.

Panda/content farms: Google had announced a project called Panda that was actively reducing the pagerank of popular how-to sites that were effectively nothing more than content farms optimized around ads. I felt like the obvious next generation how-to site would be written by real people, who were passionate about their subjects, and sharing knowledge for the love of it not to get paid. I assumed the content that would replace these sites would be created on mobile devices.

Our team did a lot of testing — when we weren't happy with something we went back to the drawing board. For more complicated features we sometimes designed over a dozen different potential ways to implement it. We'd share designs and rough betas with anyone who would listen. By the time we launched, we had been in development for around six months and had a beta program of over 200 people.

During our beta period we focused a tremendous amount of energy on making it drop-dead simple to create how to content on a mobile device because without content there was no reason to use the service. We also watched how people used the app, instrumented all sorts of analytics that allowed us to easily track what actions people were taking (in what order), and regularly shipped app updates. The analytics we implemented during our beta helped us discover all sorts of usability issues.

A how-to is a very classic, traditional content piece while mobile is still a fairly new platform. What were some problems and solutions, or opportunities related to this?

One of the things that attracted me to the space was that it wasn't particularly trendy (by typical startup standards). Rethinking how-to content for mobile was overlooked by others seeking to do something new and creative so it opened up numerous opportunities: the space was wide open for disruption, the market was absolutely huge, and we were working on something timeless that was useful to nearly everyone.

A major downside was that because nobody had tried to build a mobile product in this space we didn't have a lot to guide us.

One of the takeaways very early on was that we would give guide authors constraints that were natural to the mobile interface that they were creating their content on. In doing so, authors would be infinitely more creative. Boundaries tend to be good at encouraging people to edit themselves, and mobile had plenty of boundaries.

We focused on building the cleanest, simplest, and most beautiful interface we could and tried to stay out of the way as much as possible. We knew this was a complicated app with a lot of features, and you'd be using it while you're doing something else, so we set out to make it intuitive to learn. While we originally planned on making the new user experience walk users through a guide on how-to use Snapguide we felt proud to have built an app that didn't require instructions.

Have you been intentional about defining the tone of the community?

We launched with a small amount of content and topics which were chosen to encourage people to be both useful and entertaining. We regularly feature new content from our community. It's amazing how what you see can set both the tone and bar. Our team reaches out to every single user when they join, and that has really helped us establish a relationship that keeps things nice and warm.

How did you pick the name? Was that a lengthy process?

Ironically, it came in a snap. I reduced what it was that we were trying to get people to do: snap photos and publish a guide. Then I just broke up the verb and the noun and arrived at Snapguide. The harder question was whether to capitalize the G in guide. We ultimately decided not to.

What's Hot

Mashable
is a leading global media company that informs, inspires and entertains the digital generation. Mashable is redefining storytelling by documenting and shaping the digital revolution in a new voice, new formats and cutting-edge technologies to a uniquely dedicated audience of 42 million monthly unique visitors and 24 million social followers.