YoUthXDesign: Designing Mobile Apps - Printable

1. Designing Mobile Apps User Experience Design Activities for High Schoolers Patricia Basuel · medium.com/@pbasuel

2. Get Started Put your app ideas through the design process to come up with a product that people will love! ❏ Do some user research to ﬁnd out what they want ❏ Create concepts and prototypes with interaction design ❏ Make your app’s visual design appealing and engaging ❏ Get your designs ready for coding Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel

3. Supplies List Must Have ❏ Sticky notes ❏ Drawing pad or paper ❏ Pens or pencils Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel Nice To Have ❏ Color markers or pencils ❏ Smartphone ❏ POP (Prototyping on Paper) mobile app installed

4. Activities 1 Find An Opportunity 1.1 Discovery 1.2 Problem Statement Deﬁnition 2 Find An App Idea 2.1 Individual Ideation 2.2 Group Brainstorming 2.3 Ideas Prioritization 3 Sketch Your Idea 3.1 User Flow Diagramming 3.2 Wireframing Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel 4 Test Your Design 4.1 Usability Testing 4.2 Iterative Design 5 Polish Your Design 5.1 High-Fidelity Mockups 6 Get Ready To Code 6.1 Design Deliverables

5. Activity 1 - Find An Opportunity Need an app idea? Find a problem to solve that aﬀects a group of people or personas. Is there a problem that you and your friends share? Try the example below. Theme: Homework Persona: Student Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel

6. User Research Activity 1.1 - Discovery Write down as many pain points or problems within a theme. Gather ideas separately and as a group. Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel I have to stay up late to get projects done I can’t have fun after school and still do my homework My parents take away my games so I can finish homework Homework takes too long to do Theme: Homework Persona: Student

7. User Research | Activity 1.1 - Discovery Theme: _________________ Persona: _______________ Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel WORKSHEET One sticky note per pain point

8. User Research Activity 1.2 - Problem Statement Deﬁnition Group similar pain points together. Work on what the group cares about most and write a problem statement. Identify the personas aﬀected and what the main issue is about. Problem statement: Students need help managing their time so they can have fun and still be able to do homework after school. Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel

9. User Research | Activity 1.2 - Problem Statement Deﬁnition Problem statement: ______________________________ ______________________________________________ ______________________________________________ ______________________________________________ Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel WORKSHEET Sticky notes of common pain points

10. Activity 2 - Find An App Idea With a problem to solve, think of new and unique concepts to address the issue. Ideate individually, group similar ideas, and build on each other’s ideas. Use the guidelines below. 1. Welcome lots of diﬀerent ideas (even wacky ones!) 2. Stay focused on the theme or topic 3. Be visual and draw ideas when possible 4. Timebox your session (set a time limit) Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel

11. Interaction Design Activity 2.1 - Individual Ideation Quietly write down ideas on a sticky note on your own. Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel Problem statement: Students need help managing their time so they can have fun and still be able to do homework after school. Useful tips every day to stop procrastinating Timers for down time and homework Recommend a repeating schedule to follow Automatic reminders for when to stop playing games

12. Interaction Design | Activity 2.1 - Individual Ideation Problem Statement: ______________________________ Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel WORKSHEET One sticky note per idea

13. Interaction Design Activity 2.2 - Group Brainstorming Build oﬀ of each other’s ideas. Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel Useful tips every day to stop procrastinating Timers for down time and homework Recommend a repeating schedule to follow Automatic reminders for when to stop playing games …and turn off the game if you don’t stop …and other types of activities …and time management skill building …and customize when it’s needed

14. Interaction Design | Activity 2.2 - Group Brainstorming Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel WORKSHEET Add to each other’s ideas and group stickies with similar ideas

15. Interaction Design Activity 2.3 - Ideas Prioritization Narrow down to a few original and feasible ideas. Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel Common Idea Original Idea Very Hard To Do Very Easy To Do Useful tips every day to stop procrastinating Timers for down time and homework Recommend a repeating schedule to follow Automatic reminders for when to stop playing games …and other types of activities …and time management skill building …and customize when it’s needed …and turn off the game if you don’t stop Now Wow How Matrix © Teo Yu Siang and Interaction Design Foundation

16. Interaction Design | Activity 2.3 - Ideas Prioritization Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel WORKSHEET Common Idea Original Idea Very Hard To Do Very Easy To Do Now (Feasible but not original) Wow! (Feasible & innovative) How? (Not feasible) Now Wow How Matrix © Teo Yu Siang and Interaction Design Foundation

17. Activity 3 - Sketch Your Designs Sketch the main feature or idea by thinking through the user ﬂow or how people will be taken through your app. 1. What is the ﬁrst thing they have to do? 2. What are the steps after that? 3. What is needed before each step? 4. What happens if something goes wrong? Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel

18. Interaction Design Activity 3.1 - User Flow Diagramming Sketch a diagram of how your app idea will work. Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel Idea: A game that teaches you about time management Edit user proﬁle Add calendar? Yes No New user Log in to Google Calendar Enter events, activities Setup complete +50 points Watch learning video? Yes No Earn +10 points

19. Interaction Design | Activity 3.1 - User Flow Diagramming Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel WORKSHEET Screen User action Choice Functionality

20. Interaction Design Activity 3.2 - Wireframing Sketch the UI (user interface) or screens based on your user ﬂows that shows what happens at each step Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel The Game of Time NEW GAME The Evil Mages have pierced a hole in the ﬂux continuum. Restore the balance by acquiring the Timeless Gems. But beware... Wizard Name ______________ Select Magic ______________ ______________ SUBMIT Connect Google Calendar? ✓ Yes No Google Account ______________ GO +50 Points A message has arrived from Master Serifa.

21. Interaction Design | Activity 3.2 - Wireframing Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel WORKSHEET Screen: _______________Screen: ________________ Screen: ________________

22. Activity 4 - Test Your Design Cut out your UI screens to make a paper prototype or use the POP mobile app to build a digital prototype. Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel +50 Points A message has arrived from Master Serifa. Connect Google Calendar? ✓ Yes No Google Account ______________ GO Wizard Name ______________ Select Magic ______________ ______________ SUBMIT The Game of Time NEW GAME The Evil Mages have pierced a hole in the ﬂux continuum. Restore the balance by acquiring the Timeless Gems. But beware... New Event ______________ Start ______________ End ______________ ADDDONE

23. User Research Activity 4.1 - Usability Testing Interview at least ﬁve participants for each persona by asking them to “use” the prototype and give you feedback. 1. If they ask what something does, don’t tell them. Instead, respond with “What do you think?” 2. Ask neutral, unbiased questions 3. Have them talk aloud about what they’re thinking 4. Take good notes and record if possible Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel

24. User Research | Activity 4.1 - Usability Testing Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel WORKSHEET Name: ________ How easy was it to use? 1 2 3 4 5 Very Very Hard Easy Name: ________ How easy was it to use? 1 2 3 4 5 Very Very Hard Easy Name: ________ How easy was it to use? 1 2 3 4 5 Very Very Hard Easy Name: ________ How easy was it to use? 1 2 3 4 5 Very Very Hard Easy Name: ________ How easy was it to use? 1 2 3 4 5 Very Very Hard Easy

25. Interaction Design Activity 4.3 - Iterative Design Take what you learned from testing and improve upon your designs. When making changes, consider who the feedback is coming from and how many others feel the same way. You can always make a design better so just keep moving forward. Get your design to a point that is satisfactory enough to build something that people can start using. Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel

26. Activity 5 - Polish Your Design Reﬁne the UI screens so that it’s even easier to use. 1. Interactive elements look like you can do something with it, like tap or scroll it 2. Text is easy to read and buttons are big enough 3. The layout, styles, and colors make logical sense and are pleasing to look at Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel

27. Visual Design Activity 5.1 - High-Fidelity Mockups Create your ﬁnal designs with better UI detail. Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel The Game of Time NEW GAME The Evil Mages have pierced a hole in the ﬂux continuum. Restore the balance by acquiring the Timeless Gems. But beware... Wizard Name ______________ Select Magic ______________ ______________ SUBMIT Connect Google Calendar? ✓ Yes No Google Account ______________ GO New Event ______________ Start ______________ End ______________ ADDDONE +50 Points A message has arrived from Master Serifa.

28. Activity 6 - Get Ready To Code Now you can start programming! What are the screens to be built? Which functionalities are needed? 1. List of unique screens 2. Map of how the screens relate to each other 3. List of software functionality to make the app work, like maps, camera, or third-party apps Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel

29. Information Architecture Activity 6.1 - Design Deliverables Have a sitemap of how the app will be structured along with your prototypes and related documents. Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel Home / Timeline Google Calendar Setup New User Setup User Proﬁle Manual Events Setup Messages and Videos Storyline Game Game Settings Puzzles Puzzles Settings User Settings

30. Information Architecture | Activity 6.1 - Design Deliverables Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel WORKSHEET App Sitemap App Name _____________ Checklist ❏ Prototypes ❏ User ﬂows ❏ Mockups ❏ App sitemap ❏ Functionality Functionality