IMAGINE CUP 2012 WINDOWS METRO STYLE APP CHALLENGE

Team QUARINOS – SAVEGREECE

LET US RE-IMAGINE . . .• Inspired by Microsoft’s re-imagine campaign,

we thought to take a successful idea and implement an application for it, and starting from

– reimagining the way users can interact with the application,

– reimagining such an application for Windows 8,

– reimagining the possibilities an application can benefit from the use of the new OS,

• we decided to balance the technological

innovations with human centric design and an

incentive based framework

. . . VOLUNTEERING• So, we reimagined the way people can help

each other through volunteering:

– By making simple the way the application works through the use of metro style features

– By making the application follow the user everywhere,

allowing to be always connected– By putting human in the center rather that the

technology tools

– By building not just a social network app, but an app

inspired by social systems for social actions

– By simplifying the way you can join and act in our

volunteering ecosystem

RATIONALE

Hung

er

Pollution

Discriminati

on

Poverty

Mortality

Diseas

es

Illiterac

y

Thirst

Lack of

infrastructures

Deb

t

Disasters

The problem(s) The plan The implementation

RATIONALE (CONTINUED)

To some, (especially those that come from technologically advanced

countries), the previous slide may not say that much.

LET US S

EE

IT A

GAIN

RATIONALE (CONTINUED)The problem(s) The plan The

implementation

VOLUNTEERS

(64,2Million in USA, 93 Million in

EU etc. )[“Volunteering in the United States -2011””United States Department of

Labor, 2012][“Study on Volunteering in the European

Union” GHK Consultants and the European Commission, 2010.]

RATIONALE (CONTINUED)• No matter what the need, our team help is the only way

to address it

• Many different organizations, associations, institutions, unions

• Still, common goals: help, save, relieve, sustain, support• Technology cannot help by its own

• Technology is just the means• The solution is always one:

HUMAN CENTRIC

APPROACH

APP SUMMARY• Let’s for one moment leave aside all Web 2.0, Social

Networks, mobiles, SMS, MMS, e-mail, tweets, and all technological stuff

• Let us wonder who/what is the driving force behind any volunteering effort?

• What is the payback of every volunteering contribution?

• Are there any successful social examples so far?

• And let us re-imagine the use of technology to help

us repeat success, bigger, better, united

APP SUMMARY (HOW WE STARTED)

• Not a technological platform, but rather an

ecosystem, in which volunteerism can grow

• Able to scale in participants, but also in event importance

• Oriented towards self sustaining the idea of volunteerism (both contribution and rewards should benefit the common good)

• Volunteers and volunteering organizations

• Corporate responsibility

• Social networks• Ubiquitous access• Global coverage

• An of course, a new powerful tool in the form of Windows 8

What we need

What we have

APP SUMMARY (THE IDEA)• So what is the idea?• Build a volunteering ecosystem, assisted by

internet, web and mobile technology, on the basis of social welfare systems.

• The ecosystem will serve one purpose only: Common good.

• For this, there will be two types of benefits:

–Reputation credits that will return to the ecosystem as contributions (donations), while the ecosystem will “radiate” to everyone outside it , the measure of its success (in other words, the reputation of its participants)

–Prizes, that can be distributed to the volunteers. These can be injected to the ecosystem for a specific event and will all exit after the completion of the event (the prizes are not part of the ecosystem credits equilibrium)

APP SUMMARY (HOW IT WORKS)• Each participant in the volunteering ecosystem is

credited reputation marks• Each contribution you make to the system will give

you back credits that will raise your reputation. It may even provide other types of benefits (i.e prizes)

• Volunteers with high reputation have more chances to get their proposal being selected for implementation, as the credits that they will cash, will be distributed among the volunteers that will implement it (this way participants have incentive for ranking high in order to get their proposal being implemented)

• The history of a volunteer is the metric of his/her contribution

APP SUMMARY (HOW IT WORKS)• Volunteers with low reputation are awarded

more credits if they perform same actions with these that have higher reputation (this gives an incentive for new volunteers to contribute more)

• Each volunteer can cash their credits by proposing a volunteering event (that will in turn give back credits, according to the adoption it will get from the participants in the ecosystem)

• Each proposal may receive a number of credits from the volunteer that proposed it or even others that liked it, while

according to the popularity, the ecosystem subsidizes it with extra credits. These are divided among participating volunteers according to their reputation factor and the importance of their contribution to the particular event

APP SUMMARY (WHY UNITE ?)• Who can join and how? Why should someone join• Individuals can join as volunteers and help implement an event, propose

or promote an event

• Companies and organizations can join for supporting a event. This is the case of

an outsider entering the ecosystem by providing prizes. No direct link between prizes and credits is supported. However, the bigger the prizes, the more acceptance is expected that the particular proposal will have, earning this way more credits to the proposer

• Both individuals and companies/organizations will be rewarded according to their contribution to a particular event. In case the event calls for material

support (i.e. cash prize), companies and organizations can again earn credits

(and reputation) by contributing large amounts of the requested items

• One cannot get materialistic rich by participating, but rather reputational rich

• This is both a reward for individuals since their status can be “radiated” inside and outside the ecosystem, but also for companies and organizations that can take benefit of the reputation of their brand name

APP SUMMARY (SO ARE WE GOOD?)• So where why is the idea a good one?

• The idea of the volunteering ecosystem around which the platform is built, takes into account the experience for social welfare or health insurance systems

• A newcomer to the system is expected to contribute less for the same benefits (because of the young of age is less probable to get something back from the system).

• An old to the system is expected to have gathered a benefits status that can be used (and is most probable to be used in the system)

• External contribution to the system is distributed as extra benefits to the participants (this is the case of prizes)

• And of course all the above are supported through internet, web and mobile technologies.

APP SUMMARY (IN A NUTSHELL)• What problem are you solving as it relates to the Imagine Cup theme?Through the particular application we are trying to

provide the platform (in the form of a volunteering ecosystem that could help address all 8 goals of UN)

• Name and description of your appThe name of the application is SAVE (Social Actions Volunteering Ecosystem) and inspired by the way retribution in social systems operates (i.e. in social security), reimagines and reinvents the way volunteering can be supported.

APP SUMMARY (IMPLEMENTATION)

• Application has been built from scratch without the use of pre-existing code

• Apart from the use of Microsoft Libraries, no pre-existing code was used.

METRO STYLE DESIGN AND USER EXPERIENCE

TAILORED USER EXPERIENCE• What are the specific user goals of our

app?–Event based rather than profile based design of

UI

–Matching of event types to profiles for enhanced

personalization– Easy to find events

–Area/goal based categorization

– Incentive based system rewards users in a way beneficiary to the volunteering ecosystem

TAILORED USER EXPERIENCE• Use of the app through a comprehensive scenario

– Linda opens SAVE and tries to locate an afforestation event that takes place near her. As she used a bicycle, she could like the event to take place within a range of 20 Kms from her residence• Since she is interested in environmental protection, only the events

that correspond to this category will be used for her search• special Distance selection bar, she selects the rage and views the

available events• she points to one to select it, and through the AppBar, also selects

tocontribute some of her credits to the event, making it more appealing

– Jimmy also interested in afforestation• He simply types afforestation in the Charm Bar, and sees the

corresponding events• He selects the same event to participate • As he knows that Wendy would also be interested, he shares the

event through mail with her

METRO STYLING AND LAYOUT• The app is chrome-free using mat colors that doesn’t tire

the eye and that don’t distract the user from the events

• It uses colors that contrast so reading is easier with a small color palette that is used by Windows 8

• Bigger font size is used in places where we wanted the user to concentrate

• We make strong use of GridViews,ListViews and

Flipviews to make an fast and fluid app that gives a sense of continuity

METRO STYLING AND LAYOUT• Commands specific to a

particular view are placed in the

left area while more global commands are placed in the right

area of the bottom AppBar.

• The use of contracts make the app to be easily identified as an

Metro app by the user and leverage the ecosystem of

Windows 8 so we can Win as One.

INTERACTIONS

• Several ways of interaction with the content– By volunteering to an event

– By rating an event

– By commenting on it

– By contributing points to an event

– By sharing the content in numerous ways

NAVIGATION• The content driven design of the UI allows

the user to directly access events matching his

profile categorized according the millennium goals

• Profile based categorization is also

supported at a second level.

• Navigation elements include Buttons and the

Charm Bar• More importantly, Event based navigation

is on the core of our UI design

FAST & FLUID• How is your app designed for touch interaction?

– Large buttons were adopted for easy selection by touching

– Button design attracts finger tapping– Semantic zoom is used to enable users to navigate

through our content easily and fast.

– Big buttons are placed in the “Green” thumb area as proposed by Microsoft to invite user to intact with them

– Swipe (both horizontal and vertical) is used to rotate across events

• As regards animation, we tried to keep the design minimal (so as to comply with the goal of the application).

• Nevertheless, animation was used when adding a comment, where an “Ease in” effect has been applied

WINDOWS 8 PLATFORM

VIEWS (SNAP)• Snap is used to make the user to have our

application open all the time and interact with it.

VIEWS (LOW RES TABLET)• The application works equally well in high and low

resolution screens and in different screen orientations and formats

CONTRACTS• Use of Contracts to enhance functionality

– Search is used for easy access to our events via the Search Pane filtered by the Millenium Goals

– Setting is used to enable Roaming of the user account and to persist state

– Share Source is used to raise awareness about an event as

well as enabling the user to share interesting events through any Metro Application that he wants

– File picker is used for sign up of a new user to choose a

profile picture as well as to enable users to choose a photo for their events from their picture library

– Since the application generates content, we did not consider necessary to support Share Target at the current version.

CONTRACTS (A NICE VIEW)

TILES• The use of Live Tile is adopted in order to alert

about notifications concerning the user by using

the Message Glyph

NOTIFICATIONS• The application makes use of

toast notifications and badges.

• It informs the user about a new comment on one of his events or

comments on his profile.

• It notifies about the new events proposed by a “united” user.

• It informs when someone has

contributed to my event by sharing points

ROAMING• Roaming data and settings across PCs

– The application keeps a session so that your actions on one

device can be continued on another.

– The application supports user profiles, so that you can change your settings on one device, and these can be applied on an other.

• A comprehensive scenario on enhancing user’s experience– You are at the Metro, and you see an advertisement for a

campaign of the Red Cross. You open your tablet, enter SAVE and you search for the corresponding event. You find it and read the details. You decide to participate by taking part (donate blood). Right when you confirm your participation, the Metro arrives at your station. You close the tablet and exit. On the road home, you think that you should do more than just take part. Once you get home, you open your PC, you continue from the confirmation page, and just add some of your credits to support the event.

APP-TO-APP(MORE THAN USUAL)

• The application is ready to support App-to-App

• A possible scenario– A big company, not participating in SAVE, decides to

reward ordinary people for their sensitivity and support to the environmental protection. Using their custom Windows 8 application, it simply connects and gets the information from SAVE about the most credited people on the topic and (upon their consent) rewards them.

THANK YOU!Team QUARINOS – SAVE

GREECE