the heart shaped toolbox project - webvisions portland hackathon 2013

40
1 Portland, OR | May 19, 2013 Webvisions Social Good Hackathon Project: The Heart-Shaped Toolbox

Upload: ux-for-good

Post on 27-Jan-2015

108 views

Category:

Design


2 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

1

Portland, OR | May 19, 2013

Webvisions Social Good HackathonProject: The Heart-Shaped Toolbox

Page 2: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

OVERVIEW

Agenda

• Overview• Design Concepts

• Appendix:- Brand Values

- Heart-Shaped Toolbox Background

2

Page 3: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

OVERVIEW

Let’s Get Hackin’

3

• 8 hours

• 7 designers and developers

• 1 application

Page 4: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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

Page 5: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013 5

10:00am Get ready, get set, go...

Page 6: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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

Page 7: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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(

Page 8: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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

Page 9: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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

Page 10: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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

Page 11: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

Design Concepts

Page 12: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013 12

1:00pmSketching. Hacking.

Page 13: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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

Page 14: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

DESIGN CONCEPTS

The Site - Home Page

14

Page 15: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

DESIGN CONCEPTS

The Site - Results Page

15

Page 16: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

DESIGN CONCEPTS

The Site - Content Page

16

Page 17: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

DESIGN CONCEPTS

The Site - Home Page (HMI)

17

Page 18: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

Future Considerations

Page 19: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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

Page 20: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

Thank you.

Page 21: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

Appendix: Brand Values

Page 22: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

BRAND VALUES

Thinking about the brand

Brand ValuesScale 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

Page 23: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

BRAND VALUES

How?

Simplicity

Modularity

Connectivity

23

Page 24: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

Appendix: Heart-Shaped Toolbox Background

Page 25: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

Heart-Shaped Toolbox

Page 26: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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.

Page 27: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

HEART-SHAPED TOOLBOX

Inside the Toolbox

• Activities

• How-to Guides

• Dialogue

• Community

• Support

Page 28: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

HEART-SHAPED TOOLBOX

Toolbox Shapes and Sizes

Poster Website Mobile Hand-out

Page 29: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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

Page 30: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

HEART-SHAPED TOOLBOX

Page 31: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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.

Page 32: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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

Page 33: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

HEART-SHAPED TOOLBOX

Get Along with Others

Compassionate and Kind

Peaceful

Secure and Calm

Attentive and Engaged

Page 34: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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 MinutesSuggested Frequency: WeeklySuggested Age: 4-8

Page 35: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

HEART-SHAPED TOOLBOX

BRAIN BREAK

Pretend to be an animal.

Page 36: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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.

Page 37: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

HEART-SHAPED TOOLBOX

Page 38: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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

Page 39: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

WEBVISIONS HACKATHON | MAY 19, 2013

HEART-SHAPED TOOLBOX

Page 40: The Heart Shaped Toolbox Project - Webvisions Portland Hackathon 2013

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