Project 2: iPad Design - Cog App

Our trip to Cog App was very informative on what it is like to design / work for a bussiness. They showed us the stages of producing an App from start to finish. It was a great help knowing how the UX department have input into an app at all time during its development, rather then just doing the user testing at the end. I found it interesting to see how many stages a set of wireframes could go through before the client signs off on the design. Here are my notes i took that day:

Notes

Here are the notes i took during our trip to Cog App.

- Museums / Charity.

- Newyork, Met, Moma.

- Uk, National Portrait Gallery, Tate.

- Publishing, DK.

- Prudential, Land Rover.

- Website for mueseums and iPad for publishers.

- 35 people work there, only 7 ten years ago.

- Tech itself is 15 people.

- Usability department (UX).

- Eyewitness travel guide (Barcelona) by DK.

- DK apps: quick cook, travel, pregnancy, kids craft and photography.

- Book in XML format and then seoarate assists.

- Create useful digital things not just digital things.

- SyncAps

- C inspector or tree jack (tree jack better).

- Important to view the design on the device it is designed for.

- Axure testing program, similar to omnigraffle.

- Wireframe flexibly.

- Always deliver in colour.

- Crazy egg, click tracking software.

- Affinity sorting, stacking similar notes together to form a coherent set of feedback.

Project 2: iPad Design - Dynamic Visualization

Dynamic Visualization Video

Link

Project 2: iPad Design - Artwork and Storyboards

Digital Storyboards / Artwork

Story Select Page:

  
Setting Sub-Menu:

Story Intro:

 Loading Screen (Just in case):

First Page (Story version select):

Second Page (Example of branch off points):

Project 2: iPad Design - Crit and Changes Made After

Crit Feedback

During crit I was told that i do not have to draw out each page of my story as my story has to many variables. Also I was told to stop drawing them by hand and do some digitally instead. 

It was suggested that I get a thorough flow chart done so I know exactly where my story is going at which point, it will also give others looking at my work some knowledge into what part of the story they are looking at and where I am trying to take the story.

Some other comments where that they liked the style of drawing and the overall layout of the story.

Changes After

After crit I have gone an scanned in all my storyboards and wireframes. And i have made some of them digitally using Illustrator and Photoshop. 

I had already produced flow charts but did not have them at hand to show at crit.

Project 2: iPad Design - Research (Wireframes and Storyboards)

Wireframes

Google Definition: 

A skeletal three-dimensional model in which only lines and vertices are represented.

Other Definition: 

Wireframes are a visual guide to elements on a page. They represent function, content elements and features, and express navigation and wayfinding.

Though wireframes underpin the visual design, they are not one-to-one layouts of the future creative design composition; rather, they serve to influence and guide the design process. 

In development and coding, wireframes transition into a functional specification for the build.

Wireframe Examples

While looking for wireframe example i came across this (Link) flickr group which has helped alot with understanding what wireframes are and how i need to go about doing my own.


Storyboards

Google Definition:

A sequence of drawings, typically with some directions and dialogue, representing the shots planned for a movie or television production.

Other definition:

A storyboard visually tells the story of an animation, film or interactive media panel by panel, kind of like a comic book. 

Interactive Story Storyboards

For an interactive story the storyboards need to have alot more information on them compared to a normal storyboard. They need to have full notes so when you give them to the developer they will know exactly what to do.

Project 2: iPad Design - Art Inspiration

Some art references for the style, feel and character design I would like / am going for.

Style / Feel

For this I am aiming for a black and white / greyscale style to the pages with one colour per story. The only colour i can use for the Little Red story is Red. (It will be similar with other stories in the series but it may be another colour, i.e. Cinderella = Blue).

I also would like it to be further towards the dark end of greyscale, unlike this first picture which is to light. 

But more like these other 2 pictures.

Also this last picture has a slight fade to black around the edges. And i would like to do the same on my pages just a bit more than this.

Wolf Design

Like in these to picture I want my Wolf (Ogre / Warewolf) to be just a black shadow with eyes. Though I want it do be more like a smoke with no real bodily shape or form.


Little Red


My main inspiration for Little Red has been an old desktop background i had year ago, this:

Like the Wolf i want the cloak / hood to be like smoke, like a shadow that is not actually there. Another image from the same artist:

With my Little Red i want her to have no face or specific features. Just be a completely black figure with a red smoke like cloak.

Project 2: iPad Design - Story Flow Charts

Here are my flow charts to help me know which parts of the story branch off to other stories and how many pages there are.

Story A = By Charles Perrault (Wolf)
Story B = By Brothers Grimm (Wolf)
Story C = German / Polish Version (Wolf)
Story D = Italy / Austria Version (Ogre)
Story E = French Version (Warewolf)


Flow Chart 1

This is stories A, B + C. As they are quite similar, they interlink and share alot of pages. In total there are 9 different paths to get to 5 different endings.



Flow Chart 2

This is stories D + E. They are completely different to each other and the other 3 stories. Also they are very liniar and there are less opertunities to change the path of the story. I have decieded to keep these 2 more linear because they have a darker, more morbid storyline.

Project 2: iPad Design - Inspiration (Stanley Parable Mod)

Idea Inspiration

For my idea i have taken inspiration from a 'Half-Life 2' game mod called 'The Stanley Parable.' 

A brief summary of the game:

'The Stanley Parable is an experimental narrative-driven first person game. It is an exploration of choice, freedom, storytelling and reality, all examined through the lens of what it means to play a video game.

You will make a choice that does not matter,

You will follow a story that has no end,

You will play a game you cannot win.'

Even briefer:

'Think of it as a choose-your-own-adventure book where you can stop and stare at the walls if you'd like. '

Game Walkthrough (with all endings)

The game has a narrator all the way through it that guides you in the direction of the normal path/ending. But there are multiple opertunities to disagree with the narrator and choose a different path. In all the narrator will give you an opertunity to go back to the normal path but if you choose not to the narrator gets more irrate with you. There are a total of 6 paths or endings.

The choices you make are simple:

Left or Right door. Follow or Not.

For my story i want to use simple decisions like this aswell, where in Little Red the wolf says take the left path and the user can choose to follow what the wolf says or not.

Project 2: iPad Design - Research (Stories)

Picking Stories

As i have said before i would like to design a app from a series of stories as well as the particular one i pick for this project. Also as I wish to design for teenager i want to pick stories that can be for both younger and older teenagers. My initial thought is to do Fairy Tales and Nursery Rhymes but a more mature, slightly dark versions of the stories. 

Thinking of this I would like to do the Grimm's Fairy Tales. In total there are 209 tales collected by the brothers Grimm. And are translated from German to English. Their versions of the stories are more violent and Crude than the more familiar modern versions. (Information Sourced From Link.)

Going through the stories on this page I have reduced the list of 209 down to 6 that i will look at further to pick my final story. These are:
- Repunzel (Link)
- Hansel and Gretel (Link) 
- Cinderella (Link)
- Little Red-Cap (Link) 
- Little Snow-White (Link) 
- Rumpelstiltskin (Link)   

For my idea the story i choose will need more then 2 versions of it. I have done further research into these 6 stories and have found that Cinderella and Little Red-Cap have got the most versions, with 5 each. Though the Cinderella ones are alot similar to each other the Little Red. 

I have decieded to Little Red as my story. The versions i have found of Little Red can be found here. I am going to specifically design for the Germany/Polish version as that is the closest to the modern version that there is but with branching points were the story can change to the others. Three versions of Little Red have a Wolf in, one has an Ogre and the other has a Warewolf. I think this diversity in the stories will make it interesting to discover the different stories through interactivity.
 

Project 2: iPad Design - Research (Usibility and Interface)

IOS Human Interface Guidelines

'OS Human Interface Guidelines describes the guidelines and principles that help you design a superlative user interface and user experience for your iOS app.'

Here i have looked through the guidlines and pulled out information that i feel is relevent to the brief and what i want to pruduce.

Platform Characteristics

The Display:

- iPad = 768 x 1024 pixels

- The comfortable minimum size of tappable UI elements is 44 x 44 points.

Gestures:

- Tap = To press or select a control or item.
- Drag = To scroll or pan. / To drag an element.
- Flick = To scroll or pan,
- Swipe = With one finger, to reveal the Delete button in a table-view row or to reveal Notification Center. / With four fingers, to switch between apps on iPad.
- Double Tap = To zoom in and center a block of content or an image. / To zoom out.
- Pinch = Pinch open to zoom in. / Pinch closed to zoom out.
- Touch and Hold = In editable or selectable text, to display a magnified view for cursor positioning.
- Shake = To initiate an undo or redo action.

Human Interface Principles

Aesthetic Integrity


'An app that encourages an immersive task, such as a game, users expect a beautiful appearance that promises fun and encourages discovery. Although people don’t expect to accomplish a serious or productive task in a game, they still expect the game’s appearance to integrate with the experience.'

Consistency

'A consistent application is not a slavish copy of other applications. Rather, it is an application that takes advantage of the standards and paradigms people are comfortable with.'

User Control

'People, not applications, should initiate and control actions. Although an application can suggest a course of action or warn about dangerous consequences, it’s usually a mistake for the app to take decision-making away from the user.'

Here i have highlighted this because this is a key part of my new idea that i wish to design. Where the app(Narrator) suggests where to go in the story but the user is the one who decides what happens in the game.

User Experience Guidelines

Focus on the Primary Task

'Analyze what's needed in each scree. As you decide what to display in each screen always ask yourself, Is this critical information or functionality users need right now?'

Elevate the Content that People Care About

'People care about the experience; they don't expect to manage, consume, or create content. If you're developing a game, you elevate content by enhancing the experience with a satisfying story, beautiful graphics, and responsive gameplay.'


De-emphasize Settings


'Let users set the behavior they want by using configuration options in in your application.'

Consider Adding Physicality and Realism

'When appropriate, add a realistic, physical dimension to your application. Often, the more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.'

Project 2: iPad Design - Research (Art Style)

Initial Art Style Idea

I want my app to be one in a series of apps, for this I am thinking that i design characters that can have multiple brother or sisters where each sibling can be another separate story.

My initial thought is to design bunny rabbit characters as bunnies do tend to have many children/siblings. When considering this idea i remembered an artist i follow on DeviantArt (D.A) called Celesse has bunny characters called Puddle Bunnies.
Here are some examples:

 

 I like the variations in these but i prefer the art style of the bunnies another person i follow on D.A SilentReaper has:

Project 2: iPad Design - Research (Interactive Stories)

Initial Thoughts

My initial thoughts when hearing our brief was about an interactive stories was, 'Arn't interactive stories for kids.' I really want to aim my story at Teenagers/Young Adults but without making the interactivity to much of a novelty thing.

Initial Research

In my initial research into interactive story apps i found that there are many aim at young children and learning. For example:

Here is an app for the Princess and the Pea, it is aimed at 3 - 7 year olds. And promotes the fact it is entertaining and educational. This app also uses the iPad 2's Gyroscope.



Here is an app for Twinkle Twinkle Little Star, a beautiful interactive picture book, music video, and counting activity all in one app. The apps description says it includes:

Story features:
- "Read to me" option with clear, calm, easy-to-understand narration
- "Read myself" option so you can go at your own pace
- "Auto-play" option for automatic page turning and narration
- Fun touch animations on almost every page 
- Wonderfully rich animation and illustration

Music video features:
- Enhanced version of the YouTube classic "Twinkle Twinkle Little Star"
- Choose the original child vocals, or the calming adult vocals of the story narrator.

Counting activity features:
- Touch the stars to see them light up and spin around
- Count to 20 for a special surprise

It also says it is aim at ages 2 and up. 

So far i have only found interactive stories apps aimed at young children.

Further Research


As i said before i wanted to aim my app at Teenagers/ Young Adults, during my research into existing interactive story apps i found this one:

The Amazing Spider-Man app has no specific age on it. I believe it would be aimed at all ages but specifically young Teenagers as the interactivity is not to engaging for older ages. The app description says the app includes:


- Narrated by comic book legend and Spider-Man co-creater Stan "The Man" Lee!
- Interactive story-themed spider-games throughout: Help Peter Parker learn to use his powers -- test your strength, swing through the city, use your web-shooters to stop a burgler and much more!
- Secret Spider Hunt to win your very own "No-Prize!"
- Multiple Reading Modes: Read to Me, Read to Myself, Auto-Turn Pages, and Younger Reader Mode.
- Action-packed artwork throughout!
- includes Spidey sound effects and music!



Another app i have found aimed at older children / young teenagers is this Wizard of Oz app. Again this app has no age on it but i believe it is aimed at older children. This app also uses the iPad 2's gyroscope. The app description says it includes:

Features:

- A 45-page app, with 35 pages of innovative interactions.

- Revised story with newly written text.

- All-new art in two styles: 7 pages of masterful line artwork, and over 35 pages of full-color, paper-cut illustrations.

- Interactions that relate to the plot, so that you further the story.

- Illustrations with complex animations not previously seen in other iPad apps.

- An array of fun sound effects to immerse you in Dorothy’s world.

Project 2: iPad Design - Brief

We recieved our brief today and for our second project we have to design an interactive story for an iPad. We don't have to code it however.

From the brief we have to:

Design an interactive story for the ipad. Take an existing short story and adapt it to be interactive. This can be aimed at any target audience and can be fictional or non-fictional.

- Wireframing (flow diagram) and storyboarding your app, with details of events that need to take place on each page. Your storyboard could be hand drawn/painted, or you could choose to use a digital method to produce your storyboard.

- Produce a dynamic visualization.

- Consider why your chosen story will benefit from being interactive.

- Consider the usability and user experience.

Project 1: Aquapax - Final Piece

Project 1: Aquapax - Animation

Link
This is my piece so far. There are a few things that I will be changing.
The music stops to abruptly at the end.
The end screen is horrible i will make a new one.
The website on the end screen is wrong.
And the whole end screen needs to be on screen longer.

Project 1: Aquapax - Crit

During crit i presented what i had produced so far. (Link)

Client Feedback

The client loved the idea and what i had done so far.
They suggested i round off the sharp corners of the artwork to make it softer.
To slow down parts of the animation as well as to have the QR code on screen for longer)
And i use the tag line "The Pure Revolution" at the end.

It was also suggested that i change the begining part (the QR code animation), to gently fade to blue, instead of breaking apart sharply.

I also asked the client weither he thought a white or blue background would be better. He said i could choose depending on which i thought best.


Niels Comments

"Water 'reveal' of packaging.

Visually elegant, simple response to brief which could be effective when finished with attention to detail.
Consider whether the speed of masks revealing could be more varied to make more interesting.
Clever use of QR code becoming water droplets - we could see this for a bit longer at the beginning if finessed more.
Think carefully whether the strapline used emphasizes one of Aquapax's unique selling points.


Changes

I have done alot of what the client has asked during the crit but not all.
I have not lengthed the time the QR code is on screen at the begining because when the video is loading the QR code will be on screen at the begining. And as it is designed to be on a mobile device the loading time (the time the QR code is on screen for) will be quite long anyway.
I did not change the smashing of the QR code as i like the speed and impact of it breaking at the begining and getting quickly into the animation.
And in the end i have gone for a Blue background simply because it shows up all the masking that is happening. Where as a white background hide all the white areas being un-masked.

Project 1: Aquapax - Research

Other Water Adverts


Volvic - I like the art style of this advert but it is very childish. It is more of a funny viral advert, aiming itself at kids rather then adults.To produce a sophisticated advert for Aquapax i will not be using this style.


Evian - Again this is more of a funny viral then a sophisticated advert but it is one of the most well known water adverts / set of adverts. Evian is the largest competitor to Aquapax.
Link - This advert is also for Evian and has a similar colour sceme to the one i want to use for my Aquapax advert, it is a bit more sophisticated than the Evian babies but still has a viral aspect to it.


Sairme - This has a more sophisticated style, quick cuts keep everything looking like a coherent piece. The dancing and music go perfectly together.


Student Piece - Anther student piece for a D&AD brief, uses a key message that also reflects the Aquapax brand.

Link - This is a Youtube playlist of a few more water adverts which i have looked at and taken inspiration from some.

Project 1: Aquapax - Pitch

My Pitch

My presentation for my pitch can be found at dft.ba/--LG.

With the password being: AQUAPAX (in all caps.)

During my pitch i showed a piece of previous work (dft.ba/--LL) which the client said resured him that i could pull the current piece off.

Comments On Pitch

Can easily appeal to women.
90% of Aquapax customers are women.
Can i put the website on the end screen.

Project 1: Aquapax - Branding

What is a brand?

"A name, term, design, symbol, or any other feature that identifies one seller's good or service as distinct from those of other sellers."

A brand can take many forms, including a name, sign, symbol, color combination or slogan. 

The word brand has evolved to encompass identity — it affects the personality of a product, company or service. It is defined by a perception, good or bad, that your customers or prospects have about you.

Aquapax as a brand

Name - Aquapax

Colour - Blues, White and Silver

Slogan - "A Pure Thurst For The Environment"

Others - Unique Packaging

Project 1: Aquapax - Brief

We recieved our brief today and for our first project we will be working for Neil Tomlinson who owns the company Aquapax.

From the brief we have to:


The brief requires you to interpret the fundamentally positive brand attributes of a real live new challenger beverage brand, 'Aquapax'. You will be asked to design and animate key elements of a creative communication capable of capturing the public's attention and being distributed as a web video that will go towards building the brand's image in the public domain.


The choices of mediums that we have are:
- Video
- Animation
- Motion Graphics


The video will be accessed from a QR code printed on the back of the packaging.


What is Aquapax? (From their site)


"At Just Drinking Water we produce Aquapax, one of the purest natural mineral waters on the planet. It’s packaged inside a beautiful 500ml carton that’s mostly made of wood, a natural and renewable resource.
Aquapax natural still mineral water tastes amazingly fresh and pure, just as natural water should and won the 2008 QATRAH award as Best Bottled Water in the world. With a near perfect pH balance, it is low in minerals (that’s a good thing) and ultra low in nitrates, making it even suitable for infants. Try it and taste for yourself."


"We produce, market and sell, wholesome quality, portable, drinking water; packed in more environmentally sustainable and fundamentally renewable paper cartons, with practical pack attributes that facilitate a long and efficient storage-life."


What is the packaging? (From Tetrapak site)


"We offer you the most attractive and complete carton packaging range for consuming fresh products. All our packages offer consumer convenience, easy opening, optimal shelf life – and the ability to give your brand maximum exposure. They protect flavours, protect brands, and protect the environment."