Product Development Exercise: Singapore Press Holdings Ad-cost Calculator

Underlying Principle

Tom Peters has suggested that we hone our design skills and design sensibilities by going shopping for under $10 and by learning do's and dont's from the things we've bought. Later, we'll refer to this as $10-design-learning activity.

Today Lesson

Today, we are going to learn from Singapore Press Holdings Ad-cost Calculator. Your task is to calculate cost for the following ad:

                          World Class

 As a software company,
    Do you want
    --- new product ideas?
    --- delightful user experience?
    --- outside developers grateful for your platform/APIs well-designed?
    --- a new leash of life for your current products?

                   More details at EthicMinds blog.

 Kyaw Kyaw Naing/ George
 B.A.(Hons, First Class), M.A., M.Comp.(Computing)
 time.proven.works@gmail.com


 

Tasks Hidden in Sub-Layers

I repeat: "Your task is to calculate cost for the following ad." This is not a straightforward task; nothing seldom is in web apps world.

To calculate the cost, you need to be clear about

1.   What category of ad you are placing (Well done, the site handles this excellently.)
2. In which paper (Well done, the site handles this excellently.)
3. What Publication Date(s) (Well done, the site handles this excellently.)
4. What Advertisement Type (Well done, the site handles this excellently.) That is, Run-On, Semi-Display, or Display.
5. What size you want (Well, is this done?)

Solutions from My Weaknesses

Once a friend asked me in the 80s: "Do you know some martial arts?"
Me: "I 've studied 7 martial arts in 7 days each."
My friend, being a very smart person, stopped asking about martial arts.

Now, I know programming the way I know Wing Chun, Brazilian Jujitsu, Krav Marga, Kung Fu, Karate, Judo, Muay Thai, Bando, Kendo, Kempo, Cilat, Akido etc.

This calls for a WYSIWYG/visual editor,such as CKEDIT/TinyMce, or some other in-house versions, like the ones Facebook and Google are using.

Personally, I've seen it implemented in a Javascript book I read in Jurong East library, a red cover, published 3 or 4 years ago.

Personally, I've tested TinyMce with Ruby on Rails, PHP(codeIgniter) and Python(Django). I believe it will be fine with Perl, ASP.NET or Strut/Spring/plain JSP too.

Solutions from My Non-Weaknesses

I'm closing my eyes to see and inducing myself into what I call Walter Mitty- Dijkstra hybrid mode.

Dreaming wildly but not so in the clouds as an astronaut architect. ("The hallmark of an architecture astronaut is that they don't solve an actual problem... they solve something that appears to be the template of a lot of problems. Or at least, they try.") Dijkstra, on the other hand, always remembers that humans(he included) have small heads.

What do I see in my dream?

What do you see in your dream? What use cases, what user stories, what scenarios, what happy paths, what unhappy paths, what fault trees ?

What do I see in my dream? 
(Note: The following is written in dream-speak.)

There is a box where I can type in, what they call "text editor" in HTML.

There, I copy my ad's copy and paste it there. I can place a few images among the text as well. It can be drag and drop. Or I upload some images. Or I can choose images from a given list somewhere alongside the box. ....

When I finish arrangement, I click a button named something like "Preview." And I see my ad amongst some other typical-looking ads.

There I see how my ad will look like: Is it noticeable? Does it look cluttered? Too small? Too narrow or broad? Or is it too expensive? I close the Preview page and change my ad again: more words or fewer words, more pictures or fewer. bigger fonts or smaller.

  Do I need a border, a thick one or thin, a plain one or colored?2x3cm pic or 3x2 cm?

Edit -> Preview-> Re-edit ... till Save cycle goes on

After a few minutes, anyone can formalize this dream into a spec. (If you still need more help, email me for FREE help.)


Added : We solved this UX problem in a later post.