1
Portland, OR | May 19, 2013
Webvisions Social Good Hackathon
Project: The Heart-Shaped Toolbox
WEBVISIONS HACKATHON | MAY 19, 2013
OVERVIEW
Agenda
• Overview
• Design Concepts
• Appendix:
- Brand Values
- Heart-Shaped...
WEBVISIONS HACKATHON | MAY 19, 2013
OVERVIEW
Let’s Get Hackin’
3
• 8 hours
• 7 designers and developers
• 1 application
WEBVISIONS HACKATHON | MAY 19, 2013
OVERVIEW
Objectives
4
• Continue to build upon the Heart-Shaped
Toolbox concept
• Thin...
WEBVISIONS HACKATHON | MAY 19, 2013 5
10:00am
Get ready, get set, go...
WEBVISIONS HACKATHON | MAY 19, 2013
OVERVIEW
Core Experience Principles
6
• Target audience:
- Teachers (primary)
- Parent...
WEBVISIONS HACKATHON | MAY 19, 2013
OVERVIEW
Engagement Model
7
Engagement(Model(
Featured(Content( Ac3vity(Finder( Heart8...
WEBVISIONS HACKATHON | MAY 19, 2013
OVERVIEW
Sample Scenario: Curious Teacher
8
• Goes to heartshapedbox.org
• Looks to HM...
WEBVISIONS HACKATHON | MAY 19, 2013
OVERVIEW
Sample Scenario: Caring Teacher
9
• Goes to heartshapedbox.org
• Looks to act...
WEBVISIONS HACKATHON | MAY 19, 2013
OVERVIEW
Sample Scenario: Concerned Parent
10
• Parent opens email from teacher with l...
Design Concepts
WEBVISIONS HACKATHON | MAY 19, 2013 12
1:00pm
Sketching. Hacking.
WEBVISIONS HACKATHON | MAY 19, 2013
DESIGN CONCEPTS
Site Map
13
• Tagline: Growing heart-mind education within the communi...
WEBVISIONS HACKATHON | MAY 19, 2013
DESIGN CONCEPTS
The Site - Home Page
14
WEBVISIONS HACKATHON | MAY 19, 2013
DESIGN CONCEPTS
The Site - Results Page
15
WEBVISIONS HACKATHON | MAY 19, 2013
DESIGN CONCEPTS
The Site - Content Page
16
WEBVISIONS HACKATHON | MAY 19, 2013
DESIGN CONCEPTS
The Site - Home Page (HMI)
17
Future Considerations
WEBVISIONS HACKATHON | MAY 19, 2013
FUTURE CONSIDERATIONS
Future Considerations
19
• Review site concept with educators an...
Thank you.
Appendix: Brand Values
WEBVISIONS HACKATHON | MAY 19, 2013
BRAND VALUES
Thinking about the brand
Brand Values
Scale means relinquishing control.
...
WEBVISIONS HACKATHON | MAY 19, 2013
BRAND VALUES
How?
Simplicity
Modularity
Connectivity
23
Appendix: Heart-Shaped
Toolbox Background
Heart-Shaped Toolbox
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
Toolbox Intention & Goals
• Deliver information to help people be...
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
Inside the Toolbox
• Activities
• How-to Guides
• Dialogue
• Comm...
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
Toolbox Shapes and Sizes
Poster Website Mobile Hand-out
WEBVISIONS HACKATHON | MAY 19, 2013
Topics:
• About
• Activities
• Talking Points
• How-To Guides
• News
Audiences:
• Pare...
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
Meet Teacher Tamara
Background and context:
• Tamara has witnesse...
WEBVISIONS HACKATHON | MAY 19, 2013
Teacher Tamara can:
• Learn about the benefits of
mindfulness in a friendly and
access...
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
Get Along with Others
Compassionate and Kind
Peaceful
Secure and ...
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
Comment
Pretend to be an animal.
Be an animal for a minute. Then,...
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
BRAIN BREAK
Pretend to be an
animal.
WEBVISIONS HACKATHON | MAY 19, 2013
Teacher Tamara can:
• Find exercises and
inspirations suggested by
peers and practitio...
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
3. Tell stories, spread the word.
Teacher Tamara can create
talki...
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
WEBVISIONS HACKATHON | MAY 19, 2013
HEART-SHAPED TOOLBOX
Summary
IS:
• Descriptive
• Collaborative
• Point of departure
• ...
Upcoming SlideShare
Loading in...5
×

The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

2,161

Published on

The Heart Shaped Toolbox was one of the ideas generated by a talented team of designers at UX for Good 2013 in support of our partner, the Dalai Lama Center, and their educational and community mission to further develop empathy and mindfulness in children.

Honoring our commitment to identify ways to continue pushing the ideas forward, the Heart Shaped Toolbox was entered into the Webvisions Hackathon for Social Good in May 2013. As part of that event, members of the UX for Good team, the Dalai Lama Center and Portland native designers and developers banded together to create a functional prototype. The purpose was to further explore the idea of the toolbox and create product that the Center could continue to examine and begin including in their immediate short and long term plans.

Published in: Design, Education, Technology

The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

  1. 1. 1 Portland, OR | May 19, 2013 Webvisions Social Good Hackathon Project: The Heart-Shaped Toolbox
  2. 2. WEBVISIONS HACKATHON | MAY 19, 2013 OVERVIEW Agenda • Overview • Design Concepts • Appendix: - Brand Values - Heart-Shaped Toolbox Background 2
  3. 3. WEBVISIONS HACKATHON | MAY 19, 2013 OVERVIEW Let’s Get Hackin’ 3 • 8 hours • 7 designers and developers • 1 application
  4. 4. WEBVISIONS HACKATHON | MAY 19, 2013 OVERVIEW Objectives 4 • Continue to build upon the Heart-Shaped Toolbox concept • Think ‘container’ not fully functional and completely chock-full-of-content • Identify paths for future exploration
  5. 5. WEBVISIONS HACKATHON | MAY 19, 2013 5 10:00am Get ready, get set, go...
  6. 6. WEBVISIONS HACKATHON | MAY 19, 2013 OVERVIEW Core Experience Principles 6 • Target audience: - Teachers (primary) - Parents (secondary) • Key activities: - Gather information related to heart-mind education (Heart-Mind Index) - Explore content, engage their peers and build educational activities - Tell stories and spread the word
  7. 7. WEBVISIONS HACKATHON | MAY 19, 2013 OVERVIEW Engagement Model 7 Engagement(Model( Featured(Content( Ac3vity(Finder( Heart8Mind(Index( Recent(Ac3vi3es( I’m(looking( for(help(w/( For( Get(Along(w/(Others( Compassionate(+(Kind( Peaceful( Secure(+(Calm( AJen3ve(+(Engaged(Results( Problem(|(Grade(Level( |(HMI(|(Par3cipants(|( Format( Index(Spotlight( Ac3vity( Resources( Ac3vity(Ac3vity( Resources( Share(/(Comment( Share(/(Comment( Share(/(Comment( Ac3vity( Resources( Share(/(Comment(
  8. 8. WEBVISIONS HACKATHON | MAY 19, 2013 OVERVIEW Sample Scenario: Curious Teacher 8 • Goes to heartshapedbox.org • Looks to HMI Index - Clicks on “Peaceful” - Sees talking points - Sees related activities - Sees related research - Clicks to review a certain article - Reminds her of an activity, which she adds to the site
  9. 9. WEBVISIONS HACKATHON | MAY 19, 2013 OVERVIEW Sample Scenario: Caring Teacher 9 • Goes to heartshapedbox.org • Looks to activity finder - Clicks that he is looking for help with bullying - 4th grade - Sees bring an infant to the classroom - Clicks to share with parent
  10. 10. WEBVISIONS HACKATHON | MAY 19, 2013 OVERVIEW Sample Scenario: Concerned Parent 10 • Parent opens email from teacher with link to an activity • Parent clicks on link to view the activity - Looks at related activities and picks one - Looks at community feedback surrounding activity - Decides to try at home
  11. 11. Design Concepts
  12. 12. WEBVISIONS HACKATHON | MAY 19, 2013 12 1:00pm Sketching. Hacking.
  13. 13. WEBVISIONS HACKATHON | MAY 19, 2013 DESIGN CONCEPTS Site Map 13 • Tagline: Growing heart-mind education within the community • Main Navigation - Learn More (Content about heart-mind education, the index, key principles, etc.) - Find Activities (browse with key categories, takes user to the results page) - News and Research (latest news and research posted to the site) - Community (shared, commented, reviewed and user generated content) • Utility Navigation - About the Toolbox - Search (keyword) - Login  - Sign Up • Footer Navigation - All main pages listed - Privacy Policy / Code of Conduct
  14. 14. WEBVISIONS HACKATHON | MAY 19, 2013 DESIGN CONCEPTS The Site - Home Page 14
  15. 15. WEBVISIONS HACKATHON | MAY 19, 2013 DESIGN CONCEPTS The Site - Results Page 15
  16. 16. WEBVISIONS HACKATHON | MAY 19, 2013 DESIGN CONCEPTS The Site - Content Page 16
  17. 17. WEBVISIONS HACKATHON | MAY 19, 2013 DESIGN CONCEPTS The Site - Home Page (HMI) 17
  18. 18. Future Considerations
  19. 19. WEBVISIONS HACKATHON | MAY 19, 2013 FUTURE CONSIDERATIONS Future Considerations 19 • Review site concept with educators and parents • Identify existing successful educational content and resources for publishing (content gating) • Establish a curation or ambassador team • Monitor usage and adoption, building out ‘Community’ features based on proof of concept • Continue developing ideas for mobile usage
  20. 20. Thank you.
  21. 21. Appendix: Brand Values
  22. 22. WEBVISIONS HACKATHON | MAY 19, 2013 BRAND VALUES Thinking about the brand Brand Values Scale means relinquishing control. Teach mindfulness by being mindful, not preaching mindfulness. Appeal to emotion to tell the story of the importance of emotional education. Both branding and mindfulness are exercises in subtraction, removing clutter to get to foundational truths. How? Use language and terms that appeal to broad or global audiences; avoid trigger words that can impact the implementation of the tools, programs and products. Implement using the tools and resources that you have. Don't try to create new policy frameworks. To achieve your goals, the messaging platform needs to take a neutral, secular focus. 22
  23. 23. WEBVISIONS HACKATHON | MAY 19, 2013 BRAND VALUES How? Simplicity Modularity Connectivity 23
  24. 24. Appendix: Heart-Shaped Toolbox Background
  25. 25. Heart-Shaped Toolbox
  26. 26. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX Toolbox Intention & Goals • Deliver information to help people better understand the benefits of mindfulness. • Centralize resources to help people easily infuse mindfulness into their lives and classrooms. • Facilitate sharing to help people find and use ideas and activities that encourage mindfulness. • Jumpstart conversations to help people introduce mindfulness within their community. • Foster engagement to move people from awareness, to implementation to advocacy to evangelism.
  27. 27. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX Inside the Toolbox • Activities • How-to Guides • Dialogue • Community • Support
  28. 28. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX Toolbox Shapes and Sizes Poster Website Mobile Hand-out
  29. 29. WEBVISIONS HACKATHON | MAY 19, 2013 Topics: • About • Activities • Talking Points • How-To Guides • News Audiences: • Parents • Teachers • Administrators • Adult Advocates • Policymakers HEART-SHAPED TOOLBOX Toolbox Focus Tasks: • Search • Explore • Donate • Contact • Contribute Content & Ideas
  30. 30. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX
  31. 31. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX Meet Teacher Tamara Background and context: • Tamara has witnessed the benefits of mindfulness in the classrooms of her peers and would like to learn more. • Her goal is to learn the basics and find quick and easy ways to experiment. • Tamara doesn’t have much time to take away from the classroom to implement a program. • She needs to see how mindfulness can fit into her existing approach. • If she gets positive results, she’ll be back to learn and explore more.
  32. 32. WEBVISIONS HACKATHON | MAY 19, 2013 Teacher Tamara can: • Learn about the benefits of mindfulness in a friendly and accessible way; Read stories about its impact. • Utilize teacher, how-to and implementation guides explaining process, concepts and intended outcomes. • Find classroom activities organized by categories of the Heart & Mind Index. HEART-SHAPED TOOLBOX 1. Gathering Information
  33. 33. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX Get Along with Others Compassionate and Kind Peaceful Secure and Calm Attentive and Engaged
  34. 34. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX Comment Pretend to be an animal. Be an animal for a minute. Then, sit down and be still for a few moments. Breathe in and then release letting out an “Ahhh...” Suggested Duration: 2-3 Minutes Suggested Frequency: Weekly Suggested Age: 4-8
  35. 35. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX BRAIN BREAK Pretend to be an animal.
  36. 36. WEBVISIONS HACKATHON | MAY 19, 2013 Teacher Tamara can: • Find exercises and inspirations suggested by peers and practitioners. • Provide feedback and testimonials on the exercises she incorporates. • Contribute her own experiences and ideas. HEART-SHAPED TOOLBOX 2. Explore content, engage peers.
  37. 37. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX
  38. 38. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX 3. Tell stories, spread the word. Teacher Tamara can create talking points intended to: • Engage inquisitive parents • Support peer teachers • Advocate to administrators
  39. 39. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX
  40. 40. WEBVISIONS HACKATHON | MAY 19, 2013 HEART-SHAPED TOOLBOX Summary IS: • Descriptive • Collaborative • Point of departure • Open-Source • Ever-changing IS NOT: • Prescriptive • Authoritative • Final destination • Proprietary • Ever finished
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×