Sushi

tap tap tap

tasty bits for your iPhone

Our blog blog blog

The design session

by John Casasanta & Sophia Teutschler
September 10, 200859 comments

design

tap tap tap exists in somewhat of a virtual state… we have no central office and everyone involved is in a different part of the world. So how do we work efficiently on our projects?

Many things like coding and marketing can be done in a vacuum. The person responsible for his or her task can simply work on it and report back to the team when appropriate. There’s really no need for Sophia to go over every Objective-C line or SQL statement she writes with everyone else.

Where To? ~ Icon Design Evolution

The past

The way that we’ve worked with designers in the past has mainly been a lengthy, iterative process. We’ve all worked with our designer, Wolfgang, on various past and ongoing projects and we used to get things done with a mix of text chat, voice chat (using iChat and Skype), and email. If we’re all in an audio chat, having a group text chat alongside is handy for passing along links, etc.

audio chattext chat

We’d discuss ideas we’d have for UI, along with some variants to try and then Wolfgang would deliver the goods via email a day or two later… sometimes longer, depending on how busy he was at the time.

During the next meet-up, we’d go over revisions and repeat the cycle until we ended up with the results we were looking for.

Overall, it was generally effective but highly inefficient. Because of the lag time between meetings we’d sometimes settle for somewhat suboptimal end results. Things could’ve continued on for a long time if we kept tweaking designs using this system.

The turning point

A while back, John was chatting with his MacHeist partner, Phill Ryu. During the chat, Phill was occasionally passing images of a project he was working on. John was fairly surprised that he was getting updates so frequently. He knew that Phill was working with Wolfgang on the project those days but he just assumed that they used the same process he was used to when working with Wolfgang.

Phill explained that he’d often hire Wolfgang for a whole workday interactive “session”. John was pretty skeptical about this method, mainly because he felt there’d be too much downtime for him between design iterations. But Phill recommended that he at least try this once with Wolfgang.

Where To? ~ Design Evolution

UI design & graphic design… it’s not just about pretty pictures

Before going on, it’s worth pointing out that there are several ways to go about turning an app from concept to reality. But two ways are the most common in practice among developers…

One way is to work on most of the UI, code it all up, then try to make it look good afterward.

workflow 1

Another common way is to do somewhat of the opposite… start with a fairly vague idea of the UI, refine both the way the app functions and the way it looks in one big step, then implement it all in code.

workflow 2

Granted, this is an oversimplification of the whole process because it’s rare that anything’s as cut-and-dried as this. Often, an app’s development will be a bit broken-up and it’ll be done in “chunks”. But one of these two workflows often still applies to how each chunk is worked on.

We tend to go with the later method for creating our apps. We usually start with a “programmer mockup” that intentionally looks like crap but simply shows the basic functionality. We do this because we don’t want to steer Wolfgang in any particular direction at this early stage. So, really, the worse it looks, the better it is at this point.

Tipulator ~ Inception vs. Final

It’s important to note that this isn’t all about just making things look pretty. A good app has a balance of form and function. So it’s vital that at this stage most of the app mechanics and interactivity are worked out in detail, in addition to making it look aesthetically pleasing.

What we’ve found is that it’s much more effective for us to brainstorm UI designs when working alongside with someone who can make quality graphic designs.

When you have a mockup that looks exactly like what the final app potentially will be (the “pixel-perfect” mockup), you’re better able to notice flaws and usability issues much earlier in the whole process.

Also, at least for us, it’s much more motivating to have a sweet design worked out first… then turn that into a real app. Moreover, Apple themselves are known to use a method similar to this for their apps and it’s harder to go wrong if you’re following Apple’s lead.

The recent past

As a result of Phill’s suggestion, John gave the collaborative method a shot in a past project with his partners involved at the time.

It definitely was different. But it was soooo much better!

Design iterations came almost immediately (Wolfgang has the mystical power of often providing a new mockup before one of us is even finished explaining the changes we’d like… yes, we’re dead serious… warlocks rule!).

The lag between meet-ups was mostly gone now so everything just flowed very nicely. And even when there was a little delay between design iterations, the time was usually used effectively.

diligence

John suggested that Sophia also try this system because she was also working with Wolfgang on CoverSutra before starting tap tap tap. She did and was immediately hooked, too.

CoverSutra ~ Search Menu Design Evolution

But although the process had now improved significantly, it still wasn’t without its issues… the bulk of them having to do with Wolfgang passing new design revisions to multiple people at once. While it’s easy enough to have a multi-person text chat in iChat, one huge shortcoming is that you can’t send images or files in it the way you’re easily able to in a 1-on-1 chat.

So the obvious workaround is that Wolfgang has, in addition to the group text chat, an additional text chat for each other person in the session. It works, but it’s clunky… for every new mockup, he has to send it once for every person in the session. If we have four people in the session and he’s sending several different iterations to us in one session, it’s easy to see how this becomes a real pain for him.

In addition, it’s not so optimal for us either. An iChat window is not the best place to view images, especially if they’re large… for instance, website mockups. iChat was designed to mainly handle text, with the occasional image. So we have to make the chat window unusually large to view the images because iChat scales them to fit the window. And if anything else comes in the chat, we have to keep scrolling back and forth to keep up with new things and what we’re trying to evaluate.

So, for bigger things it would often make the most sense to have Wolfgang send us the image files, rather than inline them in the chats. But it’s easy to see how this could quickly get out of hand. Here’s a look at Scott’s Downloads folder to give you an idea…

lotsa downloads!

And iChat has its share of reliability problems to compound things. All of the .iChatTransfer files you see above were failed transfers that had to be resent by Wolfgang.

The present: enter Skitch

Our take on Skitch was that it was pretty much a fun, little app used to add annotations to and draw little doodles on pics. Most of our experiences with it had been with Austin Sarner using it to torture his friends.

John CasasantaSteve StrezaAustin’s best friend

In one session a while back, not long after we started, Wolfgang passed us all a URL in the group text chat. It was a skitch.com URL. Nice… he must’ve drawn a mustache on a Sophia pic or something. :| We all clicked the link.

To our surprise, it was the first mockup of the session. Very nice… he just eliminated the issue of passing us images in iChat. The expense was that we all had to now click a link every time he created a new mockup… no more being spoon-fed for us. :(

Skitch page

Wait… but was this the actual case??

A couple of minutes after the first mockup came through to us and we critiqued it, much to our surprise and delight, another one came through. Not a link in the group text chat but right on the original Skitch page, right under the first one!? Automatically.

Skitch page with revision

We were all wowed.

This was a huge improvement to our design session workflow. In one fell swoop, Wolfgang managed to chop out all the shortcomings of image handling in iChat by using Skitch now.

So from a designer’s point of view, how’s this all work? Well, Wolfgang created a nice screencast to step you through the process…

view large screencast

Pretty simple, eh?

If you’ve been doing this the old-fashioned way, you really need to give this method a shot. We can just about guarantee that you’ll never go back once you try out this method.

Here’s the link to the Skitch page of the second design session for the tap tap tap logo where we finalized it:

http://skitch.com/bartelme/xyik/tap-tap-tap-logo

Although it’s one of the last things we expected it to be used for, Skitch has proven to be an invaluable tool for ultra-rapid design prototyping for us.

The process

So what’s the whole design process like? It definitely varies.

For Sophia, when she’s working on CoverSutra, she usually has a clear vision of what she wants before jumping into a design session. She usually begins by designing interfaces and workflows using pen and paper.

sketch book

She’ll draw the various buttons, boxes, etc. which help her to visualize the whole UI better than she can if it’s just in her head. For her, pen and paper, rather than firing up Photoshop, makes everything go much faster in the beginning.

After she feels comfortable with her rudimentary designs, she’ll schedule a session with Wolfgang where he’ll work with her by fleshing it all out in Photoshop. Because she usually has a pretty clear idea of what she’s looking for, Wolfgang typically works on his own without much intervention between mockups. She then reviews revisions and repeats until she gets the desired results.

With tap tap tap it’s definitely different because we need to find a balance of what we all like. So bouncing ideas among all of us and getting almost immediate feedback in the form of a design mockup is invaluable.

I’m Here! ~ Design Evolution

While brainstorming UIs without having a graphic designer around often works for vague, initial ideas, nothing beats actually having real, pixel-perfect mockups when fleshing things out. A big benefit of having the mockups is that it makes it much easier to maintain focus and helps us to imagine how the apps will actually function once implemented.

And as for the ultra-rapid prototyping, we’re able to try out many ideas and variations, even if some initially sound half-baked. What would’ve been impractical with the old method became completely with the new one. Since it’s so fast to try new things out we often test ideas that seem hair-brained to some at first. But after a bit of “discussion” and a few adjustments, some ideas turn out to be very effective UI and graphic designs.

We’re considering showing many of our Skitch sessions for our various designs (all of our apps, website, etc.) over time if you’re interested in more posts along these lines. We’d detail some of the significant points where the designs evolved. And we’d detail our reasons for making the design choices we did.

Groceries ~ Design Evolution

The pros & cons

Without a doubt, our design sessions are one of the most enjoyable parts of our business (if not the most enjoyable). It’s always exciting to see how our ideas come to life, right before our eyes. When things turn out well, there’s that “BOOM!” feeling and not much compares to it. You can almost compare the anticipation of receiving a new mockup to the anticipation of Christmas coming when we were kids.

But it’s not all rosy…

conflict

We all have strong feelings about our ideas so we often have a lot of conflict. It’s really easy to get attached to an idea that you have. So we sometimes have a hard time letting go of a concept that’s suboptimal. It can be hard to do, but it’s important to at least try to keep an open mind, especially in the early stages of design evolution. Getting too attached too a bad idea can potentially kill an app. We know this from experience, unfortunately.

We also have conflicts regarding what we’re able to accomplish in a reasonable amount of time. We’re not the quickest iPhone development shop by any stretch of the imagination. We try hard to make things as good as we can and it’s easy to bite off more than we can chew. Design sessions can make this even worse because when you see a really beautiful design, you quickly get attached to it no matter what the cost. But sometimes you just have to reject some ideas because they’re impractical to do in a realistic timeframe.

It’s also very important for everyone to communicate their ideas effectively. It’s easy for others in the team to misunderstand an idea you’re trying to convey to them. A really good idea has the potential to get rejected if others don’t “get” it. Often, even a quick sketch can help immensely in situations like this.

And one gripe we have with the Skitch workflow is that even though the web pages auto-update, there’s often a lag between when Wolfgang uploads until the time we all see it. A refresh button, or better yet, an “adaptive” refresh rate that adjusted itself depending on how “live” the page currently is would help make the whole experience much better.

But the pros definitely outweigh the cons. It’s taken us a while to fine-tune our design workflow and we’re very satisfied with it at this point. Design is just one piece in the big puzzle of our business but it’s undoubtably one of the most essential pieces.

If you enjoyed this post and would like to see more like it in the future, leave a comment below.


tap tap tap is a leading iPhone and iPad app developer and publisher.

We’ve been creating top-notch apps since the App Store first opened. Our apps are used by literally tens of millions of people in all corners of the world. A few of our favorite and most popular apps we’ve created are:


Who linked to this

59 comments

  1. William Wilkinson
    7:48pm, September 10, 2008

    Great post guys, very interesting to see how you interact with each other.

  2. Russell Heistuman
    8:23pm, September 10, 2008

    Awesome post. Have just started really playing with Skitch as a collaborative design tool and this article was very timely. Beautiful work Wolfgang-as always.

  3. Kyle Gach
    8:57pm, September 10, 2008

    The last paragraph of the ‘Process’ section…

    YES! Please do write more posts like this one. Especially if you’re planning on illustrating the design evolutions and explaining the reasoning behind the decisions made.

    Thanks for a great post.

  4. Paul Brown
    9:16pm, September 10, 2008

    Awesome post, guys. Keep up the great work. When I one day get an iPhone, I will definitely be buying your apps, because they are both beautiful and functional! I look forward to seeing more posts like this.

  5. Kyle Buttress
    10:36pm, September 10, 2008

    I find it very interesting that you are willing to share your processes, it give a great insight into how to produce nice looking and functional applications.

    This I think will help everyone here that reads the posts you provide. Which I think will help the entire platform become everything we know it can be.

    Keep up the great flow of information, I would love to hear more about you implementation process.

  6. Brandon
    11:17pm, September 10, 2008

    Fantastic. I’d love to see more posts like this.

  7. James Thomas
    12:15am, September 11, 2008

    thanks for sharing your genius on how your team works more efficiently using Skitch, as well as emphasizing how important good design is… I really enjoy your Apps: Comic Life for iPhone, Comic Life, Skitch… the GUIs are all awesome.

  8. Stephen Eyer
    1:17am, September 11, 2008

    I find myself regularly checking the tap tap tap blog these days because of the great content you are willing to share. Thank you.

    This post on the design process couldn’t have come at a better time. We’ll definitely be utilizing these ideas in our design process. We already have been using iChat to help with the process, but didn’t know about Skitch. Looks like a great resource.

    Please keep up the posts. I’d love to hear more about your recent marking efforts too. (Congrats, btw, on making it into the top 10 with “Where To?”. I’d love to hear how you jumped from approximately #28 on the list to #7 in one day! Awesome.)

  9. Keith Lang
    1:44am, September 11, 2008

    Wow, what a great post. We work with Wolfgang too, and he’s quite the master. We always love hearing how people are using Skitch, and are always keen to improve it. We’re definitely working on some improvements to make the above workflow faster and simpler, and would love to hear more feedback.

    Also, it never occurred to me to use graph paper when sketching interfaces. What a great idea! Very handy for drawing rects all the time. I’ll have to write that one up on my blog, UI and us.

    Keith Lang
    plasq

  10. Gav
    2:06am, September 11, 2008

    Fantastic article!

  11. Pascal Mabille
    2:28am, September 11, 2008

    This post is so interesting.

    Thanks for all.

  12. Andree Radloff
    2:52am, September 11, 2008

    Wow, great post, thanks a lot for sharing your work flow set-up. Very interesting indeed. What I like so much about your apps and the ones Apples does is the use of metaphors and the imitation of the real world which makes them so natural and intuitive. (Coverflow is like flipping through your cd albums in your cupboard, Tipulator imitates the bill with candy when you pay) and Groceries of course like a note on your pinboard with your shopping items that you cross out (made possible through the iPhone interface). So many software makers don’t understand anything about aesthetics, elegance and usability. In the real world there are so few checkboxes and your design iterations really show up in your products. Congrats, you made me wanna give you my money for Groceries and as far as I read there are tons of other people that feel the same way. That’s very much like Apple that are also able - alongside with very few other comapnies - to create a nearly erotic “Wanna-have” feeling.

  13. Sebastiaan de With
    5:07am, September 11, 2008

    Loved this post; as a designer, I always appreciate it when other companies whose work I regard highly do even the tiniest writeups. This extensive blog post with the accompanying screencast has been a great read.

    I must say, you guys certainly beat any company out there - not only when it comes to iPhone app design, usability, and snappiness, but also in regards to openness, providing inspiration to others, and being very straightforward and honest in the process. Big kudo’s.

    I can only imagine what cool stuff I’ll have the pleasure read on this website in the future!

  14. reno
    6:22am, September 11, 2008

    I thoroughly enjoyed this post. More process details post like this in the future would be awesome. It feels similar to how 37 signals is transparent and also blogs about their design workflow.

  15. Roman Busyghin
    7:20am, September 11, 2008

    And again, good work! Please, write more sessions here. I love them ;-)

  16. J
    8:20am, September 11, 2008

    Our process is very similar except that we use Campfire. You can share text, images, and code in real-time with everyone on your team.

  17. Henning
    8:25am, September 11, 2008

    Great article! As I started reading I kept thinking “They should use Skitch! They should use Skitch!” and then voila! You use Skitch!

    Nice.

  18. Luc Vandal
    8:46am, September 11, 2008

    Very nice article in deed!

  19. Nate
    10:38am, September 11, 2008

    What kind of notebook is that in the photo? I have been trying to find a notebook like that with grid paper.

  20. ben
    11:01am, September 11, 2008

    Great post.

    Have you guys tried / seen grabup? It’s like skitch only it’s much, much faster. Cuts out all of the steps completely. There is a video demo on the homepage (grabup.com) — check it out.

    Keep up the great work!

  21. Michael Fey
    11:34am, September 11, 2008

    Great post folks, it’s very cool to be exposed to the inner workings of a company whose design is as inspired as yours.

    Keep up the great work and definitely keep posts similar to this one coming.

  22. dsature
    12:25pm, September 11, 2008

    Amazing post. Please post the Skitch progress maquettes of your apps.

  23. macpug
    4:09am, September 12, 2008

    @Nate I’m not sure exactly what kind of notebook Sophia uses, but I use one that looks like that, available at most general office/art supply stores. Mine is called ‘National Brand Computational Notebook’, the sheets are a little heavier than standard paper, and the book is roughly 10x12. Love these for sketches!

    Thanks for another very informative and inspiring post. I remember when John posted the Skitch tap tap tap logo workflow to the MH forums one day, and we were just blown away. This is great stuff.

    Can Wolfgang please do more Screencasts? Love to hear him talk ;)

  24. Colin
    11:42am, September 12, 2008

    Fantastic article! Just starting out doing some iPhone dev and hearing how other teams collaborate is a great asset. The other developer on my team started using Dropbox (www.getdropbox.com) as a collaboration tool. I just started using it and it’s fantastic! Immediate notification when files are changed or added, web views, etc.

  25. Cris Pearson
    4:22am, September 13, 2008

    Thanks for a great post on your workflow and Skitch! I love seeing progression of designs and UI.

    Glad it is improving your work flow. We have many more improvements planned that should improve workflows even more too :)

    RE: the notebook pictured - you can get grid lined Moleskines: http://www.moleskine.com/eng/_interni/catalogo/default.htm

  26. cDima
    12:12am, September 14, 2008

    Wow that was interesting. Thanks!

    I was thinking of making the designer use some kind of SVN/version control utility to handle upload/sharing with the team, but that seems like a path of glass and blood compared to skitch.

  27. Karl Becker
    12:03am, September 15, 2008

    Another great article. It helps frame my iPhone development in another way, as I think about potentially organizing a development team.

  28. mat
    3:15am, September 15, 2008

    Very, very , very interesting. Looking formard to read more of it.

  29. Aslam
    12:19pm, September 15, 2008

    Very interesting read for me considering that my business partner just moved 9 time zones away from me. So we’ve been thinking about methods that will enable us to work across that distance. I will likely give this tactic a try soon.

    Please do more of these types of pieces. Your blog is quickly becoming one of my favourites.

  30. Julian Schrader
    2:47pm, September 15, 2008

    Thanks for sharing your experiences — insights such as these are worth a lot for us out there!

  31. Daniel
    7:30pm, September 20, 2008

    Really interesting piece. I salute you. Keep em coming.

  32. Andrei Nadin
    5:01am, September 28, 2008

    Again, a great post from you guys, you are inspiring us to do the same, hopefully real soon we will be showing of our thoughts on our app too - thanks the great pointer towards Skitch!

  33. Carlisia Campos
    9:53am, September 28, 2008

    This is such a rich article, I skimmed through it quickly and will be getting a nice cup of coffee to dive in completely. I was so surprised you used Skitch. It’s hard to find an application that makes you go “wow”. And Skitch has made me go “wow” so many times and for reasons that I could never have suspected.

    You have also inspired me to start coding one of my iPhone ideas!

  34. pacheco
    3:38pm, September 29, 2008

    This is really the type of thing I love to see: insight into how people work. I find it fascinating and extremely helpful. I’d definitely be interested in seeing more.

  35. Kevan
    2:30pm, September 30, 2008

    Terrific. Our team’s multi-site too so I ran off and put Skitch into play and it’s worked wonders for real-time sessions to hack out ideas and comments on mockups and screens. Part of my toolkit now. My one knock against Skitch is that the zoom indicator in the top left actually allows for the viewer to toggle the image display. If browser resizing’s the only way to resize an image, then people with smaller monitors are stuck. Or, alternatively, they could implement a feature to click image and see the originally sized image that was screenshot’ed and uploaded. Awesome insight into your design process though. Loved it

  36. Erika
    2:08pm, October 3, 2008

    What is the font used in this site? Sorry for this off topic question…
    What a great post. I’m waiting for Groceries!

  37. Dennis Frank
    9:50am, October 6, 2008

    @Erika: A look in http://www.taptaptap.com/style.css tells me it’s Fertigo. Embedded with @font-face.

  38. Emil Milanov
    11:26am, October 11, 2008

    Great post, thanks!
    You gave me great idea of how to use skitch for both business and pleasure :)

  39. soho
    10:59am, October 26, 2008

    Very nice insight into the design process. The Skitch workflow is a step forward, but still doesn’t feel completely right.

    Some kind of desktop sharing, but with high resolution would be helpful; that way, the members can provide feedback even before he has his mockup ready. Not sure if the poor designer soul would like 3 people live-commenting his actions though… :)

  40. Stephan
    3:03am, October 30, 2008

    Very interesting Workflow. Should adpot some of it.

    How do you know, if one of you runs into the false direction?

  41. AlexM
    12:30pm, August 26, 2009

    Very interesting. Immediately turned me on to Stitch.

    One question - how do you weave user testing into the process (if you do) ?

  42. Dewey Bushaw
    2:24am, August 30, 2009

    I am very interested in seeing more posts like this. I am very impressed with this post and a new fan to this site. This has actually motivated for me to stay up and work on a project! Thanks.

  43. Prabhakar Chaganti
    12:52pm, August 30, 2009

    Nicely Done!!

  44. Karl
    2:17am, August 31, 2009

    Awesome post guys. Extremely interesting to get such an insight into your workflow - we’re craving for more :)

  45. Fred
    4:43am, August 31, 2009

    Pretty interesting !

  46. Kyungmin
    7:10pm, September 2, 2009

    Thanks for the interesting post on design process. I’m curious about how you come up with the initial vision and how do you know the concept is going to be actually useful for users.
    I also have been using Dropbox for sharing files in collaborative projects and it works great. Please keep posting inspiring and thoughtful articles for us!

  47. Flor
    10:21am, November 16, 2009

    Great post!

    Please keep me informed…

  48. Sachin
    4:57am, April 7, 2010

    very interesting and informative

  49. Thiemo Gillissen
    4:57am, April 11, 2010

    Thanks for the great post guys, very informative!

  50. Smashing Share
    4:07pm, April 16, 2010

    very nice read. thanks for sharing this with us

  51. bk
    4:32am, June 16, 2010

    i’m quite shocked by the work flow here - don’t you guys find this really inefficient? for us design always comes first, this avoids having to adjust code to meet the (new) design and also the need for various design iterations.

  52. Brainsurfer
    5:04pm, July 13, 2010

    hey guys, thanx very much for sharing this. I am playing with the idea of starting also an *overthewoldspread” icoding company, so every sharing help from you are very appreciated

  53. Wills
    12:30pm, February 18, 2011

    Thanks for providing us with an insight into your process, it’s really interesting to see and it’s clear a great work-flow is key to a smooth development process!

    The design evolution’s are also beautiful to see, thanks.

    Many thanks for sharing!

  54. Hieu Tran
    1:21am, February 28, 2011

    Great post, I will definitely try out Skitch!

  55. Christmas ball ornaments
    10:14pm, December 28, 2011

    Excellently prepared report, only when all writers provided a similar material just like you, websites became a more beneficial place.

  56. Pro Travel Network
    8:17pm, July 1, 2012

    I very much to like and agree with your point of view. Thank you for sharing. At the same time, I love best pram very much .Welcome to look at my website and blog articles

  57. Buy views on Youtube
    8:01pm, November 22, 2012

    I am thankful to you because your article is very helpful for me to carry on with my research in the same area. I will be waiting for your next post.

  58. angry birds space toys
    12:36pm, December 28, 2012

    I’m not sure why but this weblog is loading very slow for me. Is anyone else having this problem or is it a issue on my end? I’ll check back later on and see if
    the problem still exists.

  59. paydayloansfg.com
    4:15pm, January 19, 2013

    Hello There. I found your blog using msn. This is an
    extremely well written article. I will make sure to bookmark it and return to read more of your
    useful information. Thanks for the post. I’ll definitely comeback.


the comments are now closed