Ugly Design, Product Launch, Stalk Customers

Excerpt from '3 Lessons I Learned From Launching a Product'

http://thinkvitamin.com/business/3-lessons-i-learned-from-launching-a-product/

Not all advice is created equal, and we have certainly followed the wrong trail many times because of bad advice. In fact, I want to first offer a piece of advice on advice: trust your instincts. If the advice doesn’t sit well with you, don’t blindly follow it because Mr. Gray Hair with 40 years of experience says so.

Chances are, his advice is for a time period that is long gone and won’t work in today’s environment. Make sure the advice you follow is relevant and from people who are doing stuff now. Taking advice form someone with 10 years of enterprise software sales in the 90s is probably not the path you should follow as a consumer web startup in 2010.

Your First Design will be Ugly

"...delaying launching for design is never worth it."

Eat, Sleep and Breath your Product Launch

I find that most startup advice generally targets companies that have already launched but doesn’t really address entrepreneurs just trying to get an idea into fruition. If you are still at the idea-stage, everything you do should be focused around launching.

Stalk Your Customers

Rule #1 of any startup is to build a product that solves your own needs.... Eventually you will probably evolve from being your own target customer.

As a startup, you need to stalk your customers. You need to know what their passions are, what they do for fun, typical hangout places, their sleep schedules… You need to know your customers better than you know yourselves so you can always answer the question: What Would Customer Do?

IPAD user experience guidelines

Apple's Human Interface Guidelines for the iPad outline how to create user interfaces optimized for the iPad device. According to Apple, the best iPad applications: downplay application UI so that the focus is on content; present content in beautiful, often realistic ways; and take full advantage of device capabilities to enable enhanced interaction.

http://uxmag.com/design/ipad-user-experience-guidelines

Our core list of games

Here is my stab at our game list:

The Habitat game.
This should involve at least 4 screens (4 habitats!) but I'd looooooove to do more. I think kids games with limited screens are lame-o, but we are talking about or minimum set here, so 4 habitats minimum, and four critters per habitat. How about... the outback, the desert, the barrier reef, Kakadu? (and the beach, and the rainforest... ok I'll stop)

P is for Platypus, (and S is for Stella)
This will need 26 illustrations. If we build in a way for us to show a few illustrations under 'crowded letters' such as K (Koala, Kangaroo, etc) we might have another say 10 illustrations. But the logic shouldn't be too hard - at least it repeats.

The sounds of the bush game
Still a bit vague about what this will look like exactly. But that's ok.

The Animal Quiz game
We show six animals in a grid on the right and on the left we see a... termite nest (for example). The question at the top says "I eat termites. Which animal am I?" The user drags the correct animal onto the termite mound, and we see something say "Correct! I am an Echidna!". To extend this a little, we could then tap on an arrow underneath the Echidna and see a pop-up screen with a photo of a real Echidna - maybe a little more info. Close the pop-up and we get a new game. This time, the question is "I eat honey blossoms" ... etc...


For consideration:

Join the dots.
You see a sprinkling of dots all over the page, with numbers next to them. A child merely touches the next number, from one to ten, and we see a line appear between this number and the last number. When they have touched all the numbers sequentially, we can see an outline of an animal, and it 'appears'. Then they can play the next game.

Spot the difference
Spot the differences between two really detailed drawings. There is a mechanism by which you can see how many differences you are still to find.

Touch colouring in
Detailed drawings that you touch, and that section magically colours in. Perhaps the logic is that the user selects a colour first then when they click on an area of the drawing, it goes that colour. I imagine we could have many images to colour in. It's that whole thing of once you do it once... (?) maybe?

Animal flip cards
Pretty easy stuff - a bunch of cards face down, then you flip them to try and find two of the same. Only two cards can be 'up' at any time.

The Maze game
we present a pretty complex maze - it's a platypus burrow. The user draws a line with their finger and tries to make it through the maze to the nest. When they get to the nest, we start a new maze. This time it's a wombat burrow. I'm not sure what happens if they get to a deadend... I think the line on screen stays there... work that out in the drawings/prototype

Flying sugar gliders
It's twilight and we can see alot of creatures in silhouette jumping from the hills hoist to the nearby gum trees and back. Your goal is to click on as many sugar gliders as possible within a given timeframe, and avoid the cats, possums, tawny frog mouths and owls.

Meeting Outcomes

Last meeting was a bit overdue (we skipped a week) and so we had a lot to go through to get on the same page. Having done that we identified that we should aim for 6 games for the first release. Deliverable: a short list of 8 games, with the 6 'key' games marked out. We'll also need a list of 'other screens' - non game screens like the intergame navigation screen, etc.

A fireflies game

The user click ons a wandering, flickering light blob and drags it to the jar. Then the number changes to 3, and maybe a voice says 'Three!". The tail of the firebug in the circle flickers with a golden glow.

Prototyping

This article compares online prototyping kits:

http://kirkdesigns.co.uk/comparison-online-wireframing-prototyping-tools

An article that says you can build a prototype with keynote and then test it using gestures etc on an Ipad. A prototype would be really handy to get right!

http://blog.amirkhella.com/2010/06/16/how-to-prototype-interactive-ipad-applications-in-30-minutes-or-less-using-apple-keynote/

Some ideas about the centralising game choice area

ok this first one is a waterhole with various animals around it. Click on an animal to go to a game. They probably animate slighty. Click on the sun in the corner, and it changes to a moon. We see different animals at the waterhole. Click again and we get the sunrise - and different animals again.

This one is a rotating world - you slide the finger to the left or right, and the world rotates. On the world we see collections of animals, and some grasses. Each one is a new game - perhaps some type appears when you click it...

Shadow Index

One of the features of old reference books that I really liked growing up were the shadow/image indexes that were at the back of the book describing what animal was what. Obviously the touch screen makes this redundant because you can touch items on the "page" to find out more but I wondered whether this old world feature could be given a new life for nostalgic/style/design reasons?

Personalising an App

One of the concepts that I have always thought would be interesting is the personalisation ability of books/games on ipad/iphone. Where you could enter the name, age and sex of your child and it would present information tailored to that information.

Hello Stella

perhaps you would like our fairy/dinosaur game..

For example a Book could start with a word book where each screen introduces a word, then as they reach an age it has a story, then as they are older again you introduce interactive features etc... Essentially you would design the book for the oldest child and then "hide" features for the younger versions.

The versions would be available in a slider for parents to choose the version.

Stick to the Coding

Some concepts for the App showing my amazing drawing skills :)

Some takes on old favourites. Obviously some "games" are targeted at different ages groups/sexes.

 Index screen with different animals that you could touch to access a different 'game'. Sliding down would reveal other animals under ground like the Simpsons.

 Simple old favourite which would be easy to implement

Easy to implement and adds noise and drag/drop

I like this one but could be difficult to get the sounds which sound good and also how to repeat the sounds to lay down the froggy-baseline.

 Stella liked an app which provided a simple drag and drop animals onto their habitat, if you dragged them and released them in their correct location they would play a sound and give an animation. If dropped in wrong place they would float back to the top.

This would be a personalisation type idea where you can take a photo from your library of your mum or dad and stick them behind an animal cut-out - like head-in-the-hole physical boards at the zoo.

Average app pricing stats, from the Apple store

Tips for getting it right

From: http://www.mobilebusinessbriefing.com/apps/article/the-ipad-is-not-simply-a-larger-iphone-

by Russell Berry

Tips for getting it right
1. Don’t just replicate what worked on iPhone – you’re already competing with those apps, since they run on the iPad, too. Instead, think about using iPad’s larger screen and other features, and also its living room credentials.

2. Think about your content – whilst its exciting to think you can fill every pixel on the iPad’s 1024-768 pixel screen, actually its more important that users can see the content. We’ve found that removing the toolbar and window frames from iPad apps tends to work better as it feels like wasted space otherwise.

3. Don’t get carried away with the multitouch functionality – the iPad’s multitouch capabilities expand on those of the iPhone. But having a whole host of new gestures means more cognitive work for the user who might have trouble remembering what gesture did what, so stick with the actions iPhone users are familiar with at the moment; pinching, double tapping etc.

4. Remember the social aspect of the iPad – you may need to make the default sizes of your app more readable and larger than what you would for a single user so it can be used easily in a group to show things off. The iPad is a more collaborative device.

5. Forget high price points for your app – premium pricing for iPad apps is going to drop off as quickly as it did for the iPhone. So instead concentrate on creating an app with a potential audience that’s big enough to support your product and make a decent profit at a very low price point, unless the product is very niche.

Video from i-stock

Surprisingly good quality video available...

Koala
http://www.istockphoto.com/stock-video-8517071-feeding-koala-close-up.php

Goanna
http://www.istockphoto.com/stock-video-6654423-sand-goanna.php

Yellow Billed Spoonbill
http://www.istockphoto.com/stock-video-10855447-spoonbill.php

Echidna
http://www.istockphoto.com/stock-video-6270451-echidna.php

'P' is for platypus

Response to an Elenor Grolsh picture

Charles harper & flip card game

More Charley Harper, one of my fave artists

visual reference - Charles Harper

visual references - Elenor Grolsch

Meeting outcomes and deliverables

'smallgamesinonegame' idea is a go!

Dan2 to supply 5 or so sketches on game ideas

Both Dans to come back with centralising motif ideas (Dan2 already suggested a animals in context idea)

Dan1 to source Charles Handy/ Hardy illos to demonstrate what happens if we take the vector approach and push it further down the designy/ hanna barbera line. Due; one more mood board

links from the convo:

http://itunes.apple.com/us/app/preschool-adventure/id286526367?mt=8

http://www.youtube.com/watch?v=606eK4abteQ

emerging favourite - vector mood board

key idea:

Build it from the beginning so translation is easy
don't link to external resources - translation issues


Consider:

voice/text/movement games will pose some translation considerations

This is pretty inspiring, an right on for us right now!

http://37signals.com/svn/posts/2538-the-first-step-is-to-start

We are at this stage, I think:

Start with what you already know

If you want to build something on the web, don’t worry about learning HTML, CSS, Ruby, PHP, SQL, etc. They might be necessary for a finished product, but you don’t need any of them to start. Why not mock-up your app idea in Keynote or Powerpoint? Draw boxes for form fields, write copy, link this page to that page. You can make a pretty robust interactive prototype right there with software you already know. Not computer saavy? Start with pencil and paper or Post-it Notes. Draw the screens, tape them to the wall, and see how it flows.

You probably don’t even know what skills you need, so don’t worry about it. Start with what you already know.

You can do a lot of the work with simple sketches or slides. You’ll be able to see your idea take form and begin to evaluate whether or not it really is something special. It’s at that point you can take the next step, which might be learning enough HTML to take your prototype into the browser. The point is, go as far as you can with the skills and tools that you have.

Weekly project meeting notes & ideas

talk to Dan tonight about:

emerging idea.... its a collection of small games, held together with a visual style.
navigating all the games... the traditional game style is you unlock the next level... we could present a map ... click on an element and you go to that game. we could think about a centralizing motif that hold all the small games together?
animals around a - waterhole ? Something much more designy? A large coloured pie chart - click on a pie wedge to play that game?

visual styles
full illustration vs vector vs hand drawn

marketing
visual styles must be about marketing...
adults perception of innocence - adults buy the apps.
build something we can redo with North American animals, then Latin American animals, etc

The games
We should define our audience pretty soon... it will have a huge impact on what sort of games we design. Especially the age!
These sketches include a flip the card game, a catch the falling drop bear game, a 'make your way through a maze' game, a drag the correct animal onto the random food source game...
Could also have a 'what animal makes this noise?' game (kookaburras, thumping kangaroos)

General features
turn the internet off.
further links out of the game (links to teachers resources? links to animal specific australian museum pages)

some other story ideas:
choose your own adventure - story book style
aboriginal story
acunet app

mood board - hand drawn

mood board - vector

visual references - full colour detailed drawings

narrowing our focus

This meeting we decided to keep it simple. Apps for children - telling stories. We both have kids round ages 2/3 ... so we've got an inbuilt testing audience. The other ideas could still be done, later, when we've acquired some more familiarity with designing for these new mediums.

One idea Dan2 threw in tonight was 'Australiana'. I think I threw in 'Dinosaurs'.

A nice prototype of the hotel project could be as simple as making a webpage. It would simulate some of the visual things we'd do, just to uncover visual problems.

I could see a single chair in a room. A user could click on it and it would be replaced by a slightly more tattered chair. The last image would be a broken, collapsed chair.

We could do the same sort of thing with a click and drag, to simulate finger drag.

Some things we might want to look into are animated aspects of this... it would be quite satisfying to have something explode...

visual references for the trash hotel idea

Here are some visual references for hotel rooms.
Ideas:
split a cushion feathers go up in the air.
Tea set goes flying. Mugs of tea can break midair for extra points.
The bath taps can spray water.
The room above needs a tv set we can throw through the window.
Your Manager should be asleep on the couch. Evertime he wakes up and mumbles something, you can't trash anything for 10 seconds.
Lights can go out.
you have to answer the door. Sometimes its roomservice, sometimes its the manager.

resolution matters

So, the iphone 4 is out. I've seen one. The resolution is amazing. This means that we seriously need to account for resolution when we make the backgrounds/sets. Vector seems appropriate - it scales!

One thing to note is that the visual dynamics of what works on a small screen isn't quite the same as what works on a large screen - such as the Ipad. I could see that on the ipad you could get lovingly detailed - but that wouldn't scale so well for an iphone. What comes to mind is a pinball game we have on the Ipad. It is lushly illustrated, with a full pinball table and many tiny details, but when the ball approaches the flippers, the focus of the game seemlessly moves to the flippers, then pulls back as the ball shoots up the table. Now that will work for a phone.

Also - Iphone does PNG-24 with alphatransparency!

concept ideas

a rough concept of one idea...

Some UI tools

Found so good tools to help me build prototype a nice UI today.

Phone UI Prototyping template 2.4 now available (Keynote + PDF)

Particularly useful are the iphone appbase screen measures. Nice.