Designing an iPhone app in three (hundred) steps

Sorry folks, this probably isn’t the “three easy steps” link-bait post you were looking for, I’ll catch you later with one of those. No, this is a quickie in which I thrust upon your eager eyes the opportunity to feast on three iterations of Grades, the not-so-top-secret app we are actively cooking up for you (well, maybe not you because you probably aren’t a college student—our target market—sorry.) You only see three images below, but between those three are hundreds of iterations I would rather not disclose—for one because it would break the blog (and your eyes) and for two because many of them are cruel and unusual (slip me a note and I may consider revealing some of those personally—in a dark closet.)

So brace yourselves for much joy! (You may notice the admiration I express for my own designs but don’t worry about poking my little bubble with a sharp fork; a little cold water in the comments betters my health.)

First try, not bad. Just kinda dark and confusing.

gradesv1

Ooooh! I like it, says I. The gradient. The glow. Surefire recipe for an impulse purchase. Unfortunately when I tried it on people, they were like “looks awesome! What is it?” I have to admit, even I barely understand what that glowing bar represents. Also, as one bystander noted “its a bit dahk”. The bystander was my brother. He suggested a happier color scheme. And on we go.

Green is good but that bar makes me see red

gradesv2

So for one thing, its green. Another, its a lot bigger. But these changes were mainly cosmetic and didn’t really help much. People still didn’t understand what that not-so-glowing bar meant and explaining it would consume an entire post (okay, it wasn’t really that bad but bottom line: students weren’t getting it). Time for something radical.

Woah, its even bigger and hopefully makes a bit of sense

gradesv3

I might be getting ahead of myself (this is fresh off the convert-to-jpeg press) but I think this iteration offers a lot of improvements, at least in terms of usability. I think it pretty much speaks for itself so I’m going to bed. Let me know what you think.

7 Responses to “Designing an iPhone app in three (hundred) steps”

  1. Kevin says:

    I think your progression from iteration #1 to #2 was spot on. Its great seeing such significant improvement just by largely altering colors.

    I would echo the feedback you received for iteration #2. Its not clear to me what the 10-90 sequence is for nor if the course work scores have been received ("I got a") or are needed ("I need a").

    Iteration #3 certainly cleared up the questions concerning the functionality evoked from the visuals. However, I really miss the distinct look from iteration #2 — I think you've gone too plain with iteration #3.

    What I loved about iteration #2:
    * The way the UITableView is offset from the other elements and slight curved (with drop shadow) at the edges
    * The shadowing throughout the borders of each UI element
    * The clean, non-bordered display of the course work scores

    Thoughts?

  2. Jeremy Olson says:

    No! I wanted to post a long comment but IntenseDebate ate it!

    Oh well, I'll get around to it later. Bottom line: I agree, mainly. There are some usability issues with the things you like about iteration #2 but I think we can design a compromise that hits the spot. Iteration 4 coming soon.

  3. I think you should start from scratch with a different concept. I am not sure if you got there, as I just start to read the blog, but if you didn't, you might want to give a try to a different design.

    As you noted in the first posts, the design is important. Might want to spend more time on it.

  4. jerols says:

    Hey Andrei,

    I absolutely agree. This post was a bit premature—this certainly was not it.

    I haven't posted the latest iteration but I hope to do so soon. I have constantly been thinking and rethinking the design and have been getting new insights as I actually use the app on my iPhone.

  5. Joe says:

    Rethinking and rethinking of design is my problem as well. Like the previous comments #2 is the best design, #3 looks like every other iPhone app and you don't think you want to blend in with 100,000 other apps. This is just my opinion though. I am sure it has changed 50 or so times since this post. Best of luck with the design process.

  6. Joe says:

    Sorry for double post. I meant to say "I think you don't want to blend in with all the other apps on the store." Not "you don't you think…" whatever that meant.

  7. jerols says:

    Hey Joe. Yeah, I wish I could delete this post because the current design is a lot different (hopefully a lot better). Maybe I'll update this post when we are getting closer to launch.