1 / 40

Let's Go Powwow: App Redesign for Algonquin Culture Learning

This project aims to redesign the "Let's Go Powwow" mobile app to enhance functionality and design for teaching Algonquin culture and language. The primary audience includes Indigenous and non-Indigenous youth aged 3-12, with teachers, educators, and parents as secondary users. Objectives include improving the app's usability, design, and capability while developing interactive features for language learning. The project is in the development phase, focusing on code organization, refining design elements, and adding new features to create an engaging learning experience. The timeline for completion involves milestones such as refining graphics, coding interactions like Drag & Drop, and finalizing animations for a holistic learning environment.

kingram
Download Presentation

Let's Go Powwow: App Redesign for Algonquin Culture Learning

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

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

  24. HOME SCREEN SVG Morphs, Screen Resize

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

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

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

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

  29. Kokum Design

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

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

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

  33. Direct Comparison FINAL ITERATION BEFORE AFTER

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

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

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

  37. Thank You! Any questions?

More Related