1. IMAGINE CUP 2012
WINDOWS METRO STYLE APP CHALLENGE
Team QUARINOS – SAVE
GREECE

2. 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

3. . . . 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

4. RATIONALE
Pollution Diseases
Thirst Disasters
Mortality Hunger
Discrimination Debt
Illiteracy Poverty
Lack of infrastructures

5. RATIONALE (CONTINUED)
To some, (especially those that come from
technologically advanced countries), the
previous slide may not say that much.

6. RATIONALE (CONTINUED)
“Study on Volunteering in the European
Union” GHK Consultants and the European
Commission, 2010.

7. 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

8. 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

9. APP SUMMARY (HOW WE STARTED)
• Volunteers and
• Not a technological platform, but volunteering organizations
rather an ecosystem , in
• Corporate responsibility
• Social networks
which volunteerism can grow • Ubiquitous access
• Able to scale in participants, but • Global coverage
also in event importance
• Oriented towards self sustaining
the idea of volunteerism (both • An of course, a new
contribution and rewards should powerful tool in the
benefit the common good)
form of Windows 8

10. APP SUMMARY (THE IDEA)
• So what is the idea?

11. APP SUMMARY (HOW IT WORKS)

12. APP SUMMARY (HOW IT WORKS)

13. APP SUMMARY (WHY UNITE ?)
• Who can join and how? Why should someone join

14. 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.

15. 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 app
The 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.

16. APP SUMMARY (IMPLEMENTATION)

17. METRO
STYLE
DESIGN AND
USER
EXPERIENCE

18. TAILORED USER EXPERIENCE
• What are the specific user goals of our app?

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

20. 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

21. 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.

22. 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

23. 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

24. FAST & FLUID
• How is your app designed for touch interaction?
• As regards animation, we tried to keep the
(so as to comply with the goal of the application).
• Nevertheless, animation was used when adding a
comment, where an effect has been applied

25. WINDOWS 8
PLATFORM

26. VIEWS (SNAP)
• Snap is used to make the user to have our application open
all the time and interact with it.

27. VIEWS (LOW RES TABLET)

28. 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.

29. CONTRACTS (A NICE VIEW)

30. TILES

31. NOTIFICATIONS

32. 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.

33. 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.

34. THANK YOU!
Team QUARINOS – SAVE
GREECE