Level 1

This is how the boards looked before the developers came and soon we started shifting around the images to create and package new interactions that made sense.



















































































After the talk with the developers, we figured we could divide the app into two parts. Level 1 gives a brief introduction and preview of what the app is about, where the user engages in discovering and sharing new guidelines. Level 2 gets a little more complex, with a location based service of finding people and finding guidelines.
This also helps in the problem being caused by asking the users to sign up at an early stage without getting to even know the app. Sign up also require personal data to be received by us and tracking each person and their activities.

The following is more or less what Level 1 is about:


Home page, 150 guidelines-

Notification: unlock your personal guideline by answering correctly.

If you answer incorrectly-
You can’t enter that guideline again

If you answer correctly –
Notification: Congratulations! You have also received 10 free guidelines but you must unlock them first. You have only 10 chances. Think before answering, with 3 consecutive mistakes, you lose out on 1 guideline.

Two options- view guideline, collect more
1. View guideline-
You receive the guideline card(page with cross stitch figure, speech bubble with the guideline, three functions below-like, website, share)
Flip the card and it says YOU (enter your name?)
Back to home page- Notification again - You have received 10 free guidelines but you must unlock them first. You have only 10 chances. Think before answering, with 3 consecutive mistakes, you lose out on 1 guideline.

2. Collect more
Click on guidelines and answer questions to unlock other guidelines.
The collected guidelines change colour to pink after being answered correctly and guideline cards appear with their functions

After you are done with the 10 free vouchers, it does not show any questions answers- if you click on empty guidelines- it goes to the empty guideline card with unclickable functions- (is the website one still unclickable?)

Notification: To view and collect more guidelines, you must share the ones you already have. (does this appear on home page or guideline card page)
Every 3 times you post different guidelines on facebook (on your wall)/email to a friend, you will receive a guideline.

Every time you send a warning, you will receive a guideline. Be careful not to overdo sending warnings- you cannot send warnings more than thrice a day.(Notification appears telling you so if you try to)

Guideline card page-

Share-
1. Facebook- share/warning
Number 55 has shared guideline number 74 (posts on your wall)
Number 55 thinks you have not been following appropriate e-etiquette and has sent you a Number 74 warning!(post on friend’s wall)

2. Email-share/warning

3. Bump your phones to collect the other’s personal guideline

Create guideline-

Enter a guideline card from 102-150 and write in the same typeface
Two options - Save, submit, (share?)
1. Save-
Stores in your grid of guidelines- changes to pink and becomes a real guideline

2. Submit-
Notification: Thank you for submitting. Your guideline has not been submitted on the website. Click on website icon to view other suggested guidelines and vote for the best!

Click on website – direct link to website- suggested guideline list

Like the guideline-

Click on like button- heart appears on face

You can view favourites together while scrolling, swiping through grid.

(Does this get submitted to the eE?)

Meeting with developers

Sign up

• Get a starter pack of free guidelines when signing up

• Sign in process necessary? What stage?

• Storing data- login credentials. If you forget password- fall back- the whole process is a hue package

• Option to be visible or not- status notification



Game

• 101 vs 150 guidelines

• What’s the starting home page in which page?all same?

• Suggested guidelines-new created ones should go up on the website-up for voting.

• After submitting new guidelines- notification thankyou for submitting, your guidline is up on the website

• German / English

• What is different and important about your personal guideline-your personal information or identity becomes the guideline

• Level 1: Discover and sharing , Level 2: sign up location activity

• App updates- with new suggested guidelines incorporated in ee style

• A score or history of what has happened so far

• About page- talk about level 1 and coming soon level 2

• Explanation at each stage is important

• Visuals to indicate how man vouchers you have received, how many left



Sharing

• eE App- different channnels- facebook, email-eE App

• Direct digital sharing via eE App?

• Start sharing via fb, email and direct bump only

• Promotional aspect- it should not restrict sending etiquette warning through internal messaging then only people with the apps can receive it.

• Facebook-
o 1 post on your wall
o 2 send a message to someone
o 3 post on someone else’s wall
o 4 fb as a platform for viewing what others have collected or unlocked

• Twitter, google plus, foursquare(difficult)?

• Anonymous sharing will be misused

• You need to share to get more guidelines



Incentive

• Get points when sh
• aring guidelines-incentive

• 10 vouchers- answer 10 questions relating to 10 guidelines correctly and receive them. If you answer thrice incorrectly, you lose one voucher

• If guidelines are given as reward/bonus at random then must select the most popular guidelines to give an incentive to share

• Look for a distinct selection of a guideline- eg. post 10 guidelines on fb to receive guideline number 100



Map

• Map also shows guideline interactions between people- white x for interactions, pink x for people. Shows the context, places, hot spots where guidelines were exchanged and doesn’t involve tracking a person(privacy affected)

• Only see adopted guidelines on map?

• Approximate location of people logged in

• Show my X differently

• Location – server which collects data exchange between devices-time consuming

Retain and Revive

Open publication - Free publishing - More app

Manage and Organise

Open publication - Free publishing - More app

Create and Consume

Open publication - Free publishing - More app

Share and Exchange

Open publication - Free publishing - More app

Try and Explore

Open publication - Free publishing - More app

Access and Join

Open publication - Free publishing - More app

Doubts

- changing landscape to portrait-all pages layouts
- change the name of home to something more holistic-game, play
- maybe the four corner categories should include a category for directly visiting your own personal guideline card
- should it start with a handful of guidelines already open to make the user want to collect more and give an idea of what its all about
- making the cross stitch figures come alive especially when the guideline in concern is discussed a lot or plays an important role- to bookmark
- what could be bonus rewards?
- what is the end reward of the competition
- notification pages- the background becomes grey or less opacity?
- drop shadows/inner glows? or very simple language?
- even if the user doesn't play the game and go collecting guidelines, can he still access all the guidelines by going to the website icon?
- is there a notification if someone posts a guideline or your personal guideline on facebook twitter?
- what can be a reaction of the app to a nice interaction or gesture by the user to reward him?
- writing text for the about page as well as generating content for the questions relating to each guideline

Service Journey- defining interactions

Testing on the Iphone

Testing the size of fonts and cross stitches to see which ones work and are recognisable from a standard distance.

The two cross stitch font that I'm using - Tant Gertrud - is not very legible at smaller font sizes and when used as body text, it's readability reduces. Thus, we have incorporated another font -Klavika for these two purposes.

For making the cross stitch icons, I have to follow a particular grid, similar to the real cross stitching process. The smaller the cross stitches, the more accurate and defined the form looks. But after testing on the iphone I saw that at first glance you don't realise they are made out of cross stitches, only when you zoom in do you see. But for this app, we want the entire look and feel of these stitches and thus I had to settle on one size of the cross stitches as the least I could reduce it to while building icons.

There is a scaling problem with these cross stitch icons as the same icon if scaled up will not look as good and refined as another one made out of smaller sized cross stitches but as big as the scaled up icon.

Review with Katrin

test the font on the iphone

give a digital look and feel even to the stitches

getting simple with shapes and colour

scaling problem with the cross stitches

white background or grid- analogue to website

klavika type

on/off of elements rather than new elements

xxx grid link to map- same zooming in and out structure

screensaver?

link to content

user perspective vs eE perspective

specify target group

connecting people with guidelines

moving cross figures- for most alive and discussed guideline- link to content

defined form for the guidelines

where/how do the guidelines always appear? where do the functions always appear- keep the interaction simple and similar

Icons and Detailing

Service Journey

Insights from a previous project at Creation Center called Community 3.0

Become Aware and Discover
Success Factors:
Having an engaged community promoting via word of mouth(analog and digital)
Winning opinion leaders/testemonials/blogosphere
Rating/ Positioning in App store/Marketplace
Invitation Schemes
Marketing cooperation with Mobile Operators/Known Brands
Search Engine Optimization


Access and Join
Key challenges:
Make signing up experience simple and fun/playful
I possible avoid signing up at all
'Auto fill in tools' transparency
Share user data with other services
Alternative ID processes via voice recognition/Sim
Provide data care, meeting legal issues

Success Factors:
Placing signing up as late in the process as possible
Profile transfer from other services eg Fb, my space
Profile input: start small, grow later


Try and Explore
Key challenges:
Critical moment:1st sight counts

Success factors:
Try and explore without signing up
Keep start as simple and fun as possible
Direct social link create stickiness, eg your friends welcome you on an application
Free content/teaser/trial budget


Create and Consume
Key challenges:
Experience clear and unique application characteristics

Success factors:
Customizing opportunity
Permanent feedback channel
Local exclusive events/offline activities to strengthen communities - real&virtual interaction/take the application experience to the real world
Environment should encourage honesty for future accountability


Manage and Organise
Key challenges:
People are like messies, at the beginning they gather everything
Limitation of amount of friends/content as management support

Success factors:
Ideally no direct management within applications needed
Sub organisation eg. sticker album(aka aki)
Different structures for different user behavior
User generated structures eg. personal city guides from community members are accssible for all
Profile indication management
One access to various social networks, one source for many


Share and Exchange
Success factors:
Social bookmarking
User rating and recommendation
Community moderation
Aggregation
Hyper targeting/Multiple profiles
Targeted ads
Cross app advertising


Retain and Revive
Success factors:
Involvement of community in future service development
Images are the key, too much text is no fun
Competition/scoring/gaming
Bonus System
Integrate user feedback and take it seriously, handle it sensibly
Create sub groups
Local Newsletters
The more personal content, the better
Entertainment/Fun

Review with Julia

So after the review the Julia we have now finalised on the features and changed/moved around how and in what order they appear to the user. We want to keep it as simple and comprehensive and yet incorporate all the features.

And we're mostly doing BOTH the apps!

On the board!

Seeing the app interactions on the board to understand them better. Inputs from Julia on the pink post its- what works, what doesn't, and what could change.

The pink post its for the eE share app-
What is Sign up process?
What is the service journey?
Commercial aspect?
See Bump App.
Create your own guideline as a feature.
Flight seat booking process for choosing guideline?
Can person choose their own guideline?
Start at Local aspect of the map- then zoom out to the world map.
Keep the same channels for communication through the app- just like the eE guidelines suggest.
Search function for searching the number of guidelines.
Keep icons simple.
Nice voice recording feature, but maybe too advanced?
Commenting feature-link to website.

The pink post its for the Tetris app-
Cloth texture full page?
What is the meaning of the two colours
What is the sign up process - enter name? profile?
What happens in the corners of the screen
Combination of style elements?

Trying out icons eEtiquette style

Review with Anders

You should try to create an analog way of testing this, without the app.

Create different elements in paper, and create instructions for the game play. By making it on paper, you can figure how it could behave, grab elements and move them around. So any element that you have on the screen you make a paper square, or rectangle, buttons, images etc. Then you rearrange them to show how each interaction occurs.

The visual language looks good, but you know you need to test these interactions. One way is to create a keynot presentation talk them through using it. Design every state in the app. keynote is good because you can put it on to an ipad.

The second way to create a paper prototype that allows you to do the same thing.

Have a look at Sketching the User experience again. The problem with making screens on the computer is that you cant manipulate them, as easily.

You just have to try out as many different animations as possible to see which you like. When in doubt sketch.

eEtiquette in Hindi!

http://raviratlami.blogspot.com/2011/08/101-1-10.html

Tetris 101

Open publication - Free publishing - More app

eEtiquette Share designs

Open publication - Free publishing - More app

Metaphors/Symbols

For the eEtiquette share, I wanted a slight hint of the "secretive/detective" feel, where the user acts like an eEtiquette undercover agent, going on a treasure hunt of collecting more etiquettes and with different missions(like spying on friends, and teaching them the right way if they breach an etiquette)

App Workshop Documentation

Open publication - Free publishing - More app

Aka Aki

Aka Aki -a location based service we might want to collaborate with.

Interactions - Quick iterations

Categorising

From the selected three ideas, noting down the Social and Standalone interactions, the gestures and the scenarios which could later be combined with each other.

INTERACTIONS:

social/friends

Truth or dare
users confess their sins
experience the guidelines and their importance by daring to do the opposite of guidelines
features-fb connect, g sensor

Fortune nut
user made to feel like an eE pro
telling friends about digital etiquette in a fun way
features-fb connect, voice rec

Share
user starts with 1 guideline and has to collect more
each user is assigned one guideline, he becomes one guideline
feature-fb connect, location based service

Creating guidelines
user can mix and match themes to come up with new guidelines, with friends
guidelines of the future
feature-fb connect


self

Tetris
user receives guidelines when they complete a lane

Phone like simulator
user receives challenges and has to behave appropriately

Questions or Quiz
multiple choice
rapid fire
fill in the blanks

Examples
sharing good or bad examples of eE

Wheel of fortune
spinning a wheel or randomly generating guidelines


SCENARIO/METAPHORS:

Undercover eE police trying to teach eE to others

Jump and Run game, collect eE points

Steering a penguin through the slippery ice. Prevent it from falling into etiquette traps

Real life collecting eE guidelines from friends


ADDITIONS:

G sensor

Facebook/Twitter

Foursquare/Aka Aki/Location based service

Internet

Maps

Voice Recording

Touch interaction

Sound

A New Etiquette For Modern Communication

By Stowe Boyd

Recently, I missed an interview because I was 20 minutes late and the subject assumed I was a no-show. I’d been texting her about my delay because we’d communicated that way before. But it turns out that she has two mobile phones, and was monitoring the one whose number I didn’t know. Meanwhile, she was sending me e-mails, but it didn’t occur to me to look for those.

But Bruni doesn’t make concrete recommendations: he’s just scratching his head and saying aw, shucks.

So here’s my recommendations for a new etiquette of modern communication:

1. Never call a person’s phone (or Skype, etc.) without arranging a time first. Talking is a lean forward, rivalrous medium, and requires people to dedicate a block of time to that purpose, which is, generally, already allocated to some other use. The arrangement for a time to talk should be handled through a lean backward, non-rivalrous medium like texting, Twitter, or email. Many people (like me) simply never answer their phone unless they have a call scheduled, since it generally entails talking to someone who lacks modern grace, like someone from your cable company trying to sell you an upgrade, or your mother-in-law.
2. Never presume that since someone has an account on a social network, like Facebook, that they regularly check it. Even if they have recent posts there, those could be coming from some automated connection. In my case, I never post to Facebook, but things float through from other apps. Just because it’s your favorite inbox, don’t assume it’s mine.
3. Don’t use voice mail if you have any other alternative. Like a phone call, voice mail is a lean forward, rivalrous experience that requires the user to dedicate time to listen attentively to your message, and to write down any pertinent information with one hand while holding the phone to their ear with another. An imposition. I often don’t even have a pen with me. And many young people simply do not use voice mail. My son, Conrad, has never configured his voice mail, which at least has the benefit of informing callers that it is inoperative. In my case, my voice mail tells people to contact me by email, and I have configured Google voice to send voice mail to me as email, as well, just in case. Just don’t rely on voice mail, at all.
4. To the degree possible, let people know your preferred mode of communication, rather than giving them a list. One mode of communication. If you don’t want people to call without arranging it first, don’t give out your phone number until you’ve made an arrangement to talk, for example. I took my phone number out of the signature in email, for example, but I left my Twitter handle. I have my phone number on my business cards, but I think I will drop that practice that in the next batch, for simplicity.
5. If you want to initiate communication with someone, use their preferred mode of communication. I text with my kids, because that works best for them. I communicate with most of my closest friends via Twitter, but use email with my cousins. And I talk to my mother-in-law by phone because she worked at AT&T for a hundred years. Be flexible. The initiator has the obligation to take the time to work out what is best for the person at the other end of the communication.
6. Don’t presume that since you have initiated a communication with some random person, that they are obliged to respond. In the context of work, some companies have policies that employees will respond to all calls or emails of an official nature within some prescribed period of time, like 24 or 48 hours. Fine. But outside of that context, and especially in the personal realm, no one has an obligation to call you back or respond to your email, today, tomorrow, or by the end of the month. Get over yourself. Most people, especially those of us living and working out loud on the web, have just too much going on and far too many requests for our time to guarantee any response cycle. It’s best to think of an email or a tweet as being like a comment on a blog: maybe it will elicit a response from the blog post’s author, and maybe it won’t.

I know that a lot of people will disagree with all or some of these recommendations. In particular, I expect that some folks will assert that it is rude to not respond to communications from others. My response is that these are new times, when communications cost the sender nothing. They don’t have to lick a stamp to send their junk to me. Everything I receive that is potentially spam, or an annoyance, or a request for unwanted involvement can be deleted and ignored, because I owe the senders nothing.

Of course, if I have a personal relationship with someone, then other considerations apply. My close friends get a fast turnaround, while others I know less well get a somewhat slower response. But don’t think that since I met you at a conference two years ago, and you are now selling some new software product missing a few vowels, or have some scheme you’d like to discuss, that I am obligated to get right back to you to set up a time to talk. There is a great deal of spammish behavior in quasi-personal communications, and I don’t feel the need to go along with the pretense of false camaraderie.

If you want to rise above the noise of the howling world all around us, be concise and clearly explain why you are contacting me, and what would be the best and single way to get in contact if I decide to. If it is interesting, I’m likely to respond, and eagerly. I’m not a misanthrope, I’m just crazy busy.

And don’t get your feathers ruffled if I don’t reply. In these modern times, it’s not an affront, it’s just how things work

Points to Remember

Know The iPhone/iPod Touch UI

Take note of:

• How do well-designed apps navigate from screen to screen?
• How do they organize information?
• How MUCH information do they present to the user?
• How do they take advantage of the iPhone’s unique characteristics: the accelerometer, swiping features, pinch, expand and rotate functions?

Determine "Who Will Use Your App?"

If it’s a game, maybe they want to beat their high score. Or perhaps they are a first time player – how will their experience differ from someone who is getting a nice case of brain-rot playing your game all day?

If it’s a utility app, and your audience wants to find a coffee shop quickly, what actions will they take within the app to find that coffee shop? Where are they when they’re looking for coffee? Usually in the car! Do present an interface that requires multiple taps, reading and referencing a lot? Probably not! This is how thinking about how real-life intersects design.

Action: Line item out the different types of people who will use your app. You can even name them if you want to make the scenarios you draw out as real as possible.

Sketch Out Your Idea

And by "sketch" I mean literally sketch. Line out a 9-rectangle grid on an 8.5 x 11 sheet of paper and get to sketching!

Ask yourself:

• What information does each screen need to present?
• How can we take the user from point A to point B to point C?
• How should elements on the screen be proportioned or sized in relation to each other (i.e. is this thing even tap-able?)

Action: Create at least one thumbnail page of your application per screen. Experiment with various navigational schemes, the text you put on buttons, and how screens connect.