Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

YoUthXDesign: Designing Mobile Apps - Printable

234 views

Published on

Are your high schoolers learning to code this year? Then download this free crash course on user experience design tailored just for them.

Read the article
https://medium.com/@pbasuel/round-out-your-kids-stem-activities-this-summer-with-youthxdesign-for-mobile-apps-631247f1479d

Published in: Design
  • Login to see the comments

  • Be the first to like this

YoUthXDesign: Designing Mobile Apps - Printable

  1. 1. Designing Mobile Apps User Experience Design Activities for High Schoolers Patricia Basuel · medium.com/@pbasuel
  2. 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 find 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. 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. 4. Activities 1 Find An Opportunity 1.1 Discovery 1.2 Problem Statement Definition 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. 5. Activity 1 - Find An Opportunity Need an app idea? Find a problem to solve that affects 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. 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. 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. 8. User Research Activity 1.2 - Problem Statement Definition Group similar pain points together. Work on what the group cares about most and write a problem statement. Identify the personas affected 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. 9. User Research | Activity 1.2 - Problem Statement Definition 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. 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 different 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. 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. 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. 13. Interaction Design Activity 2.2 - Group Brainstorming Build off 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. 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. 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. 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. 17. Activity 3 - Sketch Your Designs Sketch the main feature or idea by thinking through the user flow or how people will be taken through your app. 1. What is the first 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. 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 profile 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. 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. 20. Interaction Design Activity 3.2 - Wireframing Sketch the UI (user interface) or screens based on your user flows 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 flux 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. 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. 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 flux continuum. Restore the balance by acquiring the Timeless Gems. But beware... New Event ______________ Start ______________ End ______________ ADDDONE
  23. 23. User Research Activity 4.1 - Usability Testing Interview at least five 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. 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. 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. 26. Activity 5 - Polish Your Design Refine 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. 27. Visual Design Activity 5.1 - High-Fidelity Mockups Create your final 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 flux 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. 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. 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 Profile Manual Events Setup Messages and Videos Storyline Game Game Settings Puzzles Puzzles Settings User Settings
  30. 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 flows ❏ Mockups ❏ App sitemap ❏ Functionality Functionality
  31. 31. Designing Mobile Apps · User Experience Design Activities for High Schoolers · YoUthXDesign © 2020 Patricia Basuel medium.com/@pbasuel Hooray!

×