The design decisions behind the tech industry’s beloved anonymous Secret app

Secret's co-founder and head designer Chrys Bader

Secret’s co-founder and head designer Chrys Bader

For Chrys Bader, the co-founder and lead designer of the two-month-old Secret mobile app, his “allergy to complexity” all started when he spent about a year working on Google+. It was during that time, working on one of the most complex social products out there, that he realized that utter simplicity and a singular focus were the keys to building powerful social mobile products.
So with Secret — the anonymous secret-sharing mobile app that’s become a visual, gossip-filled addiction in Silicon Valley — Bader and co-founder and CEO David Byttow, decided every design decision should be made to enable the simplest way to share, read and interact with the text (the secrets) themselves. Bader discussed the company’s design strategy with me in an interview at the startup’s temporary office space at Google Ventures, just next door to a grilled cheese restaurant at the entrance to South Park in San Francisco.
It’s the concept of a “UI that just gets out of the way,” or “non-design,” said Bader, who told me he’s been developing and designing digital products since he was 15 (he’s now 30). Before Secret and Google, he built the now defunct photo-sharing app Treehouse (which launched six months before Instagram) and went through the Y-Combinator program in 2008. Bader said that when a user opens an app, they should be able to understand within five seconds what the next thing is that they’re supposed to do, and it should be like that every step of the way.
Secret, which just closed on $8.6 million from investors like Google Ventures and Kleiner Perkins, uses that barebones concept from top to bottom. The app uses a full-bleed, one-stream, entirely flat look (inspired by iOS7), where each screen is either one secret, or can be dropped down into the comment section. “We’re immersing the user in the content,” Bader explained.
During the scroll, comments fade into a blur at the edges of the screen to highlight just what’s directly on the screen (the blur is also inspired by iOS7). The secrets appear onscreen in a few scattered letters at a time — reminiscent of a style more commonly used by movie credits — as a way to emphasize the impact or importance of the phrase. Users create secrets and backgrounds for their secrets with up and left finger swipes, which Bader wanted to feel more like finger painting than tapping buttons or turning knobs, and which he says gives the user a more “accomplished” feeling when they post their secret.
GIF made by Brian Lovin

GIF made by Brian Lovin

An early form of Secret was actually even more simple than the current one. The first version was a one-to-one messaging app, and it only used black and white. A little color and “depth with constraints,” as Bader put it, were needed to create community when Secret changed into a broadcast app.
One of the humanizing touches that the company added was the comment icons, which where created by independent designer Brent Jackson, and released online under open source. The cute, minimalist objects like a skull, a ghost, a heart and an owl added subtle but edgy touches and created personality in the app.
It’s pretty hilarious to see people shouting at each other in the comments section of a secret, declaring that “purple ghost” or “red owl” is an idiot who doesn’t know anything about venture capital deals. Bader says the comment icons — which are randomly generated when a user makes a comment — are also supposed to create a sort of slot machine, gambling effect — as in, hell yeah, I got purple ice cream cone again!
Geomicons, made by Brent Jackson

Geomicons, made by Brent Jackson

Secret has been gaining fame in the early-adopter tech crowd, and much of the attention has been on the tech industry gossip that has emerged on the app, like acquisition and layoff rumors. But for people who pay attention to app design and user interface, the app has also drawn praise by many for its attention to detail and simplicity.
Bader is in the process of putting together some formal design principles, which he shared with me and which I’ve included below. Also check out Brian Lovin’s GIFs of the Secret design touches.
Bader’s four product design principles:

  1. Start from emotion — This isn’t a new concept, says Bader, but Apple’s design team embodies this and I agree with them.
  2. Tell a story — The user should be able to fit the whole product in his or her mind at once. You should be able to think about what Secret is and not spend more than one brain cycle piecing it together.
  3. Keep a balance — Positive experiences need to outweigh the negative ones (which can be prevalent on an anonymous app). The experience needs to be a net positive.
  4. Live by constraints — It’s great to use “blue-sky thinking” to brainstorm and come up with ideas, but when it comes time to implementing design, set constraints.

Bader’s 3 rules for building home run social products:

  1. Allow for a novel form of self expression
  2. Make it stupidly simple to express yourself
  3. Make it rewarding.

Gigaom is holding its annual experience design conference Roadmap on November 18 & 19 in San Francisco, and we’ll be announcing speakers and themes in the coming months.