Project: Let's Go PowWow

1. Project:Let's Go PowWow

2. Team Introductions Malcolm Swoboda Developer Gabriel Leung Second Alex Carmichael Lead

3. Agenda • Client • Background • Target Audience • Problems • Business Objectives • Project Phase Objective • Scope • Process • Timeline • Progress • Dates • Approvals • Next Steps

4. Research Results For Powwow

5. Client Kevin & Bertha Chief • Founders of Powwow Michel Lacroix • Creative Director for Powwow • Professor at Algonquin College Website: http://algonquin.dreamhosters.com/

6. Background • Bertha Chief wanted to bring learning of Algonquin culture and Aninshinaabe language to children. • Kevin led creation of a language learning app on iTunes App Store, but it was limited in function and design. • App renamed "Let's Go Powwow", an ongoing Algonquin College IMD student project.

7. Target Audience • Primary: Indigenous Youth, Non-Indigenous Youth, age 3-12 • Secondary: Teachers, Educators, Parents • Tertiary: Beginning Language Learners

8. Problems • Mobile app needs to be redesigned to improve functionality, design, and capability for multiple future games. • It is to be developed as a hybrid app using web technology including SVG. • It is in mid-development, requiring visual designs, completed code and functional games for language students.

9. Objectives • Make a functioning learning app that will teach children the Algonquin culture and Anishinaabe language through games. • Make learning and teaching easier for native and non-native learners. • App has better design and functionality for phones and tablets.

10. Project Phase Objective • Complete a good part of remaining development of the first two screens of the app. • Revise design elements, and re-create if necessary. • Research, organize, and refractor existing code in preparation for future features and games.

11. Scope • Milestones • Define (Completed by past teams) • Define project, background, details and clients • Design (Completed by past teams) • Design visual and audio elements • Develop (CURRENT) • Organize, refactor and comment current code • Complete the necessary pseudo code, refine current code, code new features (Continue it, not complete). • Add comments to new code • Deploy • The deploy stage is not part of phase three.

12. Scope • Tasks • Coding • Analyze current progress, use existing code • Refine and animate SVG files • Code button functionality • Code Drag & Drop function • Code mouth animations • Code body part validation • Design • Revise grandmother • Revise wigwam background • Revise male character

13. Scope • Revised Graphics • Grandmother • Wigwam • Male Character • Hand-off Package • RE/ACTION Showcase Poster Deliverables • Home Screen • Buttons • Regalia • Drum • Forest • Fire • Smudging • Regalia Screen • Drag & Drop • Smudging Screen (Time Permitting)

14. Project Process Four IMD Phases

15. Phase 3 Winter 2019 One Team Art Redesigns Continued Coding Phase 1 Fall 2017 Two Teams UXD Visual Design Branding Ongoing With Client Contributions Phase 2 Fall 2018 One Team Production Design Initial Coding Phase 4 Summer 2019 One Team Continued Designs And Coding New Elements

16. Coding Validation/Return Complete Remaining Morphs Complete Wigwam Progress Timeline Week 8-10 Organized Code, Renamed Elements Continue SVG Morphs Completed Fire Morph Completed  Kokum(Grand-Mother) Mid-term Review Meeting Week 6-8 Researched Drag & Drop Started SVG Morphs Sketched Kokum(Grand-Mother) Week 4-6 Researched/Deciphered Code Research Original Designs Researched SVG Morphs Week 2-4 Project Charter Milestone Schedule Research Project Kick-off Meeting Week 1-2

17. REgalia SCREEN Coding, Organization, Refactoring, Commenting

18. Existing Application – REGALIA Screen

19. Current Progress – REGALIA Screen

20. File Structure 1 HTML File with inline JavaScript & Styling 1 HTML File, 1 JavaScript File and 1 CSS File

21. Progress - Comments / Refactoring Progress so far: • Renamed dozens of HTML IDs and classes to better suit their role • Added lots of comments to JavaScript for better understanding • Re organized code for better readability • Refactored lines of code to increase efficiency Next steps: • Add more comments if needed • Add comments to new code

22. Comments - JS

26. Progress – D&D(Drag & Drop) Progress so far: • Researched about D&D for better understanding • Organized D&D section of the code • Deciphered code to try to find ways to improve it • Currently working on validation Next steps: • Only validate on mouse up/ let go • Regalia piece returns to original position if the user misplaces it

27. HOME SCREEN SVG Morphs, Screen Resize

28. SVG Animations Smudging • SVG CSS animation • Adjusted rotation and rapid shake • Separated into rocks and bowl

29. SVG Animations Fire • SVG Morph animate function • Overlays on fire pit • Final iteration will have details, color transition

30. SVG Animations Drum • SVG CSS animation • Animated opacity and scale • Separated into layers • Timed to drum beat

31. Home Screen – Resized (1900x1000) Next steps: • Wigwam door • Trees • Arrows • Title pop • Clouds/Sun (time permitting) • Hover • Titles/arrows • Voices

32. Kokum Design

33. Thumbnail process  • Clothing designs ideas • Facial structure ideas • Hair design ideas

34.  Kokum (Grandmother) Revision What Kokum looked like before we revised her: • Too many facial details • Gradient was off-putting  • Blue clothing didn’t match the Wigwam background • Unrealistic strawberry 

35.  Kokum (Grandmother) Revised What Kokum looks like now: • Lost the braids  • Solid colors with red shadows to match the fire in Wigwam • Simplified design with fewer details • More refined appearance

36. Direct Comparison FINAL ITERATION BEFORE AFTER

37. IMPORTANT DATES • Week 01 - Kickoff Meeting • Week 02-06 - Weekly Meetings • Week 07 – Mid-term Review Meeting • Week 08-09 – Weekly Meetings • Week 10 - Final Review Meeting • Week 11 – Minor revisions and final preparation of handoff package, RE/ACTION Showcase • Week 12 – Handoff package

38. Approvals • Regalia Screen code comments and progress • Home Screen resized • SVG - Fire • SVG - Drum • SVG - Smudging • Graphics - Kokum

39. Next Steps • Approvals Project • Finalize graphics and animations • Visual prototypes for screens • Functional screens Timeline • Final Review Meeting • RE/ACTION Day • Handoff Package

40. Thank You! Any questions?