The Making of Tiiny
A tale of adventure with Kevin and Marc from North Technologies
EDIT: Hello friends, Tiiny is long gone, but it still holds a memorable place in our hearts. I am including a video overview that was shot by Google Ventures featuring the app. Miss you Tiiny.
Original Story Begins Here:
Calvin and Hobbes, Jake and Finn, He-man and Battlecat. Great companionships are the indelible maker of adventure. Herein lies the tale of two such companions who shared in the authentic exchange of ideas and feelings to create an app called Tiiny.
Tiiny is a fun, novel way to share moments with your friends. Kevin shared “the why” of Tiiny, feel free to take a moment and read that first, then return here to learn about the how of Tiiny.
Our adventure begins….
Level 1 — The Land of Ideas
Kevin: “What if we made photos really tiny.”
Me: “like how tiny?”
Kevin: “like, so tiny we remove the anxiety around getting your picture taken”
Me: “oh, like how people act in a photobooth?”
Kevin: “yeah, what would that look like, how would it work?”
With any project we take on, we like to start by giving the idea a name.
Tiiny was originally called “Blink”. Blink sounds fast, simple and low friction. Blink calls to mind the old saying “If you blink, you might miss it” and felt like the perfect name. However, the more we said “Blink” the more it stressed us out. We wanted the app to feel fun, no pressure.
We changed the name to Tiiny, reused from a past project Kevin and I worked on together. Tiiny was a perfect name. It described the size and length of time of each post, was friendly and the complete opposite of an eyestrain.
But, I’m getting ahead of myself. We wanted to pull back the curtain and show our design and building process. Let’s start at V1.
Version 1
V1 started as sketches and drawings shared between Kevin and myself over Short Messaging Service (SMS) technology. Here are a few early screens:
The core elements of Tiiny emerged very early. The grid of photos, the always on camera, and single-tap-to-post features were core tenants we tied to defend through each step in the design process.
Our process for designing products follows a decision tree. We start out first with a broad decision like “Tiny photos would reduce anxiety for having your photo taken”
We have no idea if tiny photos reduces anxiety or not, but we feel like this idea is true. Talking with friends and family, they generally nod their head in agreement, but none of us really know.
We make broad assumptions, we design to those assumptions until we discover our assumptions were incorrect
Kevin and I share a Google Drive with countless Photoshop and Sketch files that we pass back and forth. As with most effective collaborations, it’s impossible to know where one idea originates and another ends. In true collaboration, ego plays no part.
Level 2 — Iteration Island
Version 2–4
Our first design was just ok. We hated the fact you had to tap twice to take a picture. Seeing who took each photo was also too hidden. Kevin had wired up an alternative idea where each row was dedicated to a friend. Pinning the owner of photo to the left of their posts all of a sudden gave each photo a greater meaning and context.
Our design process is organic and a bit like Jazz. Kevin drops a melody, I add a few beats and before you know it were making music. We have constant communication pinging each other via SMS, Slack and Gchat. We always have a video hangout in the background so we can practice our funny faces for tiiny. Kevin loves to get his hands dirty in Photoshop, Omnigraffle. Here is a little Photoshop volley between us:
Version 5
V5 saw a convergence on a design we really loved. Who doesn't love a psychedelic loading screen!
Version 6
had a small problem. We started talking to a few engineering friends and shared our vision for what we wanted to build. Turns out, those few screens you see above in version 5 would end up taking a long time to engineer properly. We didn’t have a long time, we needed to build and launch in a month.
So we were forced to step back and kill our darlings. We had to trim features. We decided to focus 100% on the post. We dropped having users avatars from the feed and went all in on the grid and gave priority to the atomic unit of our app — the post.
At this point we changed the name from Blink to Tiiny and dove deep on playing with a variety of camera and attribution concepts.
:07 Record and Save
:31 Swipe row
:40 profile transition
Getting to simple is a brutal slog through iteration island and the tweaking swamps. The following is a collection of iterations we did around notifications and photo attribution. The next section may give you a headache, but I wanted to share a brief example of how we get to simple.
We iterate on design until we solve our problem while satisfying our taste level.
Level 3 — Pixel Paradise
Version 7
With v7 we trimmed Tiiny down to just two screens — the feed and activity. Everything else got thrown out (the fact I have the magic wand icon for filters just shows my hopefulness, but filters were dead at this point, so consider them a bug in the mocks).
Enter Sam Soffes. Sam is an incredible iOS engineer who just happened to be available right when we needed him. Sam has the rare trait of being able to design and code and was the perfect fit to build Tiiny.
Sam recruited Caleb Davenport and Aaron Gotwalt to help us out — and together they formed a powerful engineering tri-force of awesome.
With v7 we added onboarding and a few short notes about how Tiiny works. We also were going to make Tiiny invite only as a way to control the content and community, but abandondend this idea and built tools for flagging and removing offensive content.
Version 8
Guess what happened next? We iterated! See, what most people don’t realize, app design and internet building is really kinda boring, many long hours starting at the warm glow of our screens for hours on end. I think it’s way cooler to be a teacher. V8 brought out the funny and the amazing Toaster pup:
Versions 9–15
After version 8 we made another 6 versions with lots of small tweaks and changes — here are a few screens from the cutting room floor (note the Google Material design inspired UI), each little tweak moved us closer to what we eventually shipped to the app store..
Version 16
V16 is approachable, simple and memorable. Version 16 is what was released in the app store recently and set the tone for the Tiiny brand. Here is a screenshot of my Sketch file for v16. We export all assets for the app from this file (Yes, Sketch is amazing) and now with iPhone 6+ coming out, we can just export our assets at 3x in 2 seconds and be ready for the new phones in no time!
Level 4 — The Caves of Coding
Engineering and design worked hand in hand everyday while building Tiiny. We used Hockey App to distribute builds and Slack to collaborate with one another. We signed up a handful of testers to give us feedback (through Hockey App) and worked face-to-face as much as possible, everyone in the same room (physically or with a Google Hangout going).
The hardest engineering challenge we faced (and maybe you can convince Sam, Caleb or Aaron to write about this in the future, was creating a smooth experience while playing so many videos. Many iPhones gave their lives for Tiiny in the process.
We worked everyday on this app, including weekends. While the pace was fairly grueling, for me it didn’t feel like work. I would wake up excited, take a few tiinys and then was ready to dive into the day!
Level 5 — Icon Icefall
Creating an app icon that stands out from all the rest is a huge design challenge.We played with a ton of variations and colors. we would place the icon on a false home screen
Bonus Round — Feedback Falls
We had an incredible group of testers who were vigilant in using the app all the time and finding weird obscure bugs. If you have a friend building an app and you get early access to a beta build, realize your feedback is shaping the direction of the app. Tiiny is what it is today because of our testers — who were our first users. Our early users got to mold and shape what the app has become through their feedback.
Final Boss — Apple App Store
The app store process is a bit of a black art. The actual app approval process could use a bit more transparency and speed. Tiiny sat in pending hell for 15+ hours after we received a note telling us it was “approved”. Finally at 10:29 on 9/12 our app magically appeared in the app store.
End Game
The end is only the beginning. We have a lot planned for Tiiny and with your support we hope to enrich your life with many more Tiiny moments to come. We had a blast building Tiiny. Please take a moment and download Tiiny to see some of the wonderful glimpses into humanity happening there everyday.
Tools we used
- Photoshop — used throughout the process. Initially all our mocks where done in Photoshop — Kevin knew photoshop, I know photoshop so it worked. Later when we started engineering Photoshop fell way short due to it’s inability to export iOS assets in an easy workflow
- Illustrator — used for all icons, illustrations and general artwork. Drawing in Sketch drives me bonkers.
- Sketch — a ton of Google designers have been telling me to get on Sketch for a year, but I was stubborn. I really wish I listened, because Sketch is bar none. My favorite feature of Sketch is being able to mirror my sketch file on my phone in real time.
- Keynote —The easing and animation is almost exact with what we see in iOS making keynote the goto for creating realistic prototypes.
- Proto.io — lets you create clickable prototypes you can save to your phone.
- Omnigraffle — Kevin likes this for quick wire framing. I prefer Illustrator to wireframing (or pen and pencil)
- Slack —Project collaboration and management.
- Hockey App — distrubtion platform for testing iOS (future projects we will use the iOS Enterprise Developer program to distribute our apps)
- Google Hangouts — Constantly kept a hangout open. Headphones are helpful here.
- Google Docs —for managing to do lists, and shared notepads
- Google Apps — for email, calandering etc.
- Github — used for tracking all bugs and features (and of course code repository)
- Apple Messages — Messages to be exact in Mac OS X to be exact. We are constantly sharing mobile screenshots via SMS, then pulling them up on our phone to feel out the fonts, layout etc.
- Tiiny is a native iOS app using mostly custom, free range, grass fed, no labels code written by Sam and Caleb.
- The Tiiny backend was built with Ruby on Rails running on Heroku. With Amazon S3 to hold all the posts and CloudFront to distribute them quickly around the world. Big props to Sam and Aaron for building the backend.
Kevin and I had a blast building Tiiny and can’t wait to see the wonderful and creative things you create!
So, what are you waiting for?
