|
|
Contextual Learning Portal UX Design Mobile App
Basics- Project TitleUX Design Mobile App
- Employer SiteOld Colony RVTHS
476 North Ave, Rochester, MA 02770 - Submitted By (Teacher Name)Erin M. Murray
- SchoolOld Colony RVTHS
- Brief Description and RationaleStudents will gain a basic foundation of UX through the creation of a Mobile App.
How do we create an effective and engaging experience for our audience. -
View/Download File: /project740_2527/Mobile_App_Unit_Plan.pdf - Grade Level12
- Materials / ResourcesMaterials/Resources needed are: pencil, sharpies, sketchbook, sticky notes, computer, internet access, design software (InDesign, Illustrator, Photoshop, Adobe XD and/or Figma).
Also, check out some helpful websites:
https://uxplanet.org/4-lessons-on-teaching-ux-design-5a945c90a1eb
and
https://blog.prototypr.io/a-common-product-ux-design-process-55af4ab5665e
If you have time and when available take a workshop through Adobe Education Exchange called UX Design and Prototyping for Educators. https://edex.adobe.com - Duration of lessonAt least 10 related periods @ 45 minutes block class, plus 2 weeks of shop time while juggling other projects
- Key Vocabulary / Word WallPersona, Behaviors, Userflow, Wireframe, Prototype, Mood Board, Style Guide, Logo, Continuity, Target Market, UX Design, UX Research, Interface, A/B Testing, Accessibility, End Users, Usability Test
Quizlet:
https://quizlet.com/_8kwybv?x=1qqt&i=2iyyz6 -
View/Download File: /project740_2527/UXD_Vocab_Study_Guide.pdf - Pre-Requisite KnowledgeStudents must have knowledge of principles and elements of design, plus know how to apply that knowledge in an effective way prior to learning UX design.
Also, students must have prior knowledge of design software: InDesign, Illustrator, Photoshop, Adobe XD and/or Figma
Other skills that are essential are: teamwork, sketching skills, brainstorming, communication (be able to explain what it is you are trying to achieve in an articulate manner) - Strategies to promote equityStudents will receive an overview of the Unit Plan and lessons. For each lesson students will:
listen to lecture from instructor
be shown examples
class exercises will be performed in groups
We hone in on students soft skills as well as hard skills.
Students are required to have a sketchbook at all times to brainstorm ideas independently as well as in a group to develop good communication and teamwork skills.
At the end of each lesson reflect on all final ideas through critiquing where students will articulate their problems and solutions to each lesson. Critiquing builds effective communications skills and helps develop critical thinking. Plus, it helps students break down that barrier of talking in public which can be uncomfortable. More so, providing a safe and welcoming environment through positive critiquing and kindness helps build confidence.
Technology is used at the end of each lesson to build upon students hard skills. Students are held responsible for using technology appropriately.
Accommodations are put in place for any student with an IEP so they can work toward their individual success. I will refer to their IEP for individualized accommodations. - Instructional ObjectivesCritiquing - Teacher and peer feedback
Direct Instruction
Lecture
Class Discussions
Vocabulary Review
Daily Activities Group Exercises
Brainstorming
Independent study, reading and sketching
Project-based learning
Multimedia/Visual Strategy
Demonstration
Lesson #1 | UX Design - Establishing Personas
Explore the basic principles of UX Design, get started identifying and understanding your users.- Lesson Plan 1 TopicUX Design - Establishing Personas
Explore the basic principles of UX Design, get started identifying and understanding your users. -
View/Download File: /project740_2527/Mobile_App_Personas.pdf - Lesson plan 1 objectivesStudents will be able to:
Identify users and create personas
Understand user behaviors
Design a persona template using Adobe InDesign - Anticipatory set or lesson opening (to activate students` prior learning or draw student interest or involvement)Open up the lesson by introducing UXD.
Explain UXD
Introduce Unit Plan
Show examples of different Mobile Apps
(simple color theory study guide app and travel app) -
View/Download File: /project740_2527/Mobile_App_Unit_Plan.pdf View/Download File: /project740_2527/Mobile_App_Examples.pdf - Direct InstructionLecture, examples of persona templates
(Attach any relevant documents)
Introduce personas. Explain how essential personas are to your UX experience. Show examples of a persona and an effective design template. -
View/Download File: Vanessa View/Download File: /project740_2527/Joseph.pdf View/Download File: /project740_2527/Cameron.pdf - Guided PracticeDemonstration of students understanding through project.
Class activity - activity enclosed with example on page 2. -
View/Download File: /project740_2527/Mobile_App_Persona_Activity.pdf - Independent Practice/Differentiated ActivitiesAll students learn differently. In order for all students to be successful
pair students in groups (a strong leader who can help with someone less "creative" so they can learn from each other)
let the students come up with the idea for an app
let them problem solve and help if needed
get to know your students and their abilities (we are all good at something)
positive feedback
understand their needs and accommodate - Reflection on Employability SkillsThe design world is evolving and designers have to evolve with it. Many companies are choosing to go digital for their marketing and advertising initiatives. UX is just another graphic specialization that is at the forefront of the design industry. It only makes sense that educators give students the resources necessary to gain an appreciation for the whole industry.
Overall, the exposure we give to our students will hopefully get them excited about learning, post-graduation and contributing to society in a meaningful and effective way. - Lesson ClosurePersonas are the very essence of the UX experience. Understanding your target audience and learning the behaviors is step 1 to a successful mobile app (in this case).
- Summative/end of lesson assessmentHands-on Template Design using InDesign
- References / Resources / Teacher PreparationList the references, such as textbook, website, publications, etc.
UX workshop was taken
Instructor created Mobile app study guides and hypothetical Travel app to guide students through
Notes and guidance from externship employer helped shaped the overall lesson
Also, check out some helpful websites:
https://uxplanet.org/4-lessons-on-teaching-ux-design-5a945c90a1eb
and
https://blog.prototypr.io/a-common-product-ux-design-process-55af4ab5665e
Lesson #2 | Lesson 2: Creating a User Flow & Wireframe- Lesson Plan 2 TopicLesson 2: Creating a User Flow & Wireframe
-
View/Download File: /project740_2527/Mobile_App_User_FlowWireframe_Prototype.pdf - Lesson Plan 2 Objectives Learn about the user testing process and conduct a simple user testing exercise
Start thinking about how your users will interact with your app
Determine intended functionality in the interface - Anticipatory set or lesson opening (to activate students` prior learning or draw student interest or involvement)Introduce User Flow, Show Examples
I have attached user flow examples on the attached lesson. You can also review user flows on the internet.
If you have a chance check out MURAL.
A visual "white board" collaboration workspace. I am still learning this software and hope to implement this into my curriculum. May be a helpful resource for instructors/students working remotely. - Direct InstructionCreate a User Flow & Wireframe Prototype
Using sticky notes or index cards create your user flow.
First, make a categorized list of any content that youre thinking of including in your product
(this will take some thought focus on your App objective)
Next, experiment get a users input on how best to categorize your content (make changes if necessary)
You can also start thinking about your Mobile app name
- Guided PracticeLecture, examples of user flows
As a class come up with a hypothetical user flow - Independent Practice/Differentiated ActivitiesWork in a team, collaborate and brainstorm together
- Reflection on Employability SkillsTeamwork
Collaboration
Respect
Ownership
Timeliness
Productivity - Lesson ClosureThe user flow is an essential lesson to UXD. If the user flow is confusing then the user is not engaged and hence you don`t have an effective product. The user flow must be tested, edited and tested again and again to make sure it makes sense. The wireframe is the next step and created from your user flow. The sketches are essential before you go into Adobe XD to complete a final wireframe.
Check out wireframe sketch examples on the internet.
Side note: it can take years for an app to be developed. The product is tested and tested again numerous times to make sure it works! -
View/Download File: /project740_2527/Mobile_App_Wireframe_Phone_Template.pdf - Summative/end of lesson assessmentHands-on group project
- References / Resources / Teacher PreparationList the references, such as textbook, website, publications, etc.
UX workshop was taken
Instructor created Mobile app study guides and hypothetical Travel app to guide students through
Notes and guidance from externship employer helped shaped the overall lesson
Also, check out some helpful websites:
https://uxplanet.org/4-lessons-on-teaching-ux-design-5a945c90a1eb
and
https://blog.prototypr.io/a-common-product-ux-design-process-55af4ab5665e
https://www.experienceux.co.uk/faqs/what-is-wireframing/
Lesson #3 | Lesson 3: Creating a Mood Board and Style Guide
- Lesson Plan 3 TopicLesson 3: Creating a Mood Board and Style Guide
- Lesson Plan 3 Objectives Collect creative information (colors, photos, typography)
Create and illustrate icons using Illustrator
Select and identify appropriate typography
Explore color theory
Design professional layouts using design software - Anticipatory set or lesson opening (to activate students` prior learning or draw student interest or involvement)Introduce a mood board & style guide
Students must have previous knowledge in color theory, typography, principles and elements of design skills
-
View/Download File: /project740_2527/Mobile_App_Mood_BoardStye_Guide.pdf - Direct InstructionCreate a Mood Board (show examples)
First, as a team decide what the mood should be for your Mobile app. What is the feeling you want to convey? (remember color plays an integral role)
Recap on color psychology
Next, collect photographs, textures and colors that convey that mood - use google docs to save images
The final mood board and style guide will be completed in Shop: (students will need access to a computer)
Create a digital collage of your mood board, save as a pdf and upload to the classroom (all team members will create their own mood board, however, collaborate as a team as to what that "mood" should look like/feel like)
Create a style guide. As a team you will:
Choose the appropriate colors, imagery and textures that will work best for your app
Choose appropriate fonts and label (Headers, body copy etc...)
Create icons for your app
Design and develop buttons
Identify the mood you are trying to achieve
(Think modern, bright, simple, bold, youthful, clean, fun)
Consider your navigation and dont forget to list all styles
Design a template that includes all the above in InDesign, save as pdf and upload to classroom
- Guided PracticeLecture, examples of mood boards and style guides
Oversee students collaborating, teamwork building while making sure everyone is accountable for his/her part. - Independent Practice/Differentiated ActivitiesWork in a team, collaborate and brainstorm together
- Reflection on Employability SkillsTeamwork
Collaboration
Respect
Ownership
Timeliness
Productivity - Lesson ClosureStudents will present their mood boards and style guide to class. As a class we will critique. Critiquing enhances communications skills while learning. Students will go back and make any necessary edits - A real-world experience.
- Summative/end of lesson assessmentHands-on group project
- References / Resources / Teacher PreparationList the references, such as textbook, website, publications, etc.
UX workshop was taken
Instructor created Mobile app study guides and hypothetical Travel app to guide students through
Notes and guidance from externship employer helped shaped the overall lesson
Also, check out some helpful websites:
https://uxplanet.org/4-lessons-on-teaching-ux-design-5a945c90a1eb
and
https://blog.prototypr.io/a-common-product-ux-design-process-55af4ab5665e
Check out canva.com for inspiration on mood boards and style guides
Also, your educational institute most likely has a style guide specific colors, logo and typestyle etc...
Lesson #4 | Lesson 4: Design a Mobile App logo- Lesson Plan 4 TopicLesson 4: Design a Mobile App logo
-
View/Download File: /project740_2527/Mobile_App_App_Logo.pdf - Lesson Plan 4 Objectives Design a logo using Adobe Illustrator
Explore color theory (refer to your style guide)
Choose appropriate typography - Anticipatory set or lesson opening (to activate students` prior learning or draw student interest or involvement)Students will have previous logo development and branding experience.
Attached is a branding project I do with my students. Understanding branding and logo development is helpful and advantageous prior to UX development. There is a class exercise, homework, assessment, study guide and project attached with gift bag and gift card envelope templates if you choose to use them)
Have students read Chapter 11 Branding and Visual Identity
Graphic Design Solutions by Robin Landa 6th edition (great textbook)
-
View/Download File: /project740_2527/Branding____.zip - Direct InstructionIntroduce Lesson 4: Mobile app logo
(previous lesson on logo and branding must be learned prior to developing logo for app)
Recap on logo design and branding...
Principles to consider in order to create an effective logo design for your Mobile app:
Clearly clarify what your brand stands for
Design for Flexibility (see examples below)
(Dont just focus on a single static execution of an icon or logo, consider the branding system at large)
Go Beyond the Surface-Level
(For example, the smile in the Amazon logo extends from A-to-Z)
Factors to think about:
A unique shape or symbol
Keep it simple
Overview of lesson....
Design a Mobile App Logo
Have a design meeting and brainstorm ideas
Each student is accountable for creating 10 thumbnail sketches and one final logo in Illustrator
Create final designs on the computer (blk & wh and color - use your style guide!)
Save as pdf and upload to classroom
Critique final logos. Does it work? As a group we will help determine the final logo for your app
Simplify your logo, turn it into an app icon:
Simplify your logo
Dont include words
Choose appropriate colors (refer to your style guide)
Final size will be 120 pixels x 120 pixels
Save as pdf and upload to classroom
(Students can sketch ideas in their sketchbook for app icon or use attached templates) -
View/Download File: /project740_2527/Mobile_App_App_Icon_Templates.pdf View/Download File: /project740_2527/Mobile_App_App_Icon_Examples.pdf - Guided PracticeLecture (recap) on logo development, show examples of effective logos and then show the simplified app icon
(you can search the Internet for examples)
Oversee students collaborating, teamwork building while making sure everyone is accountable for his/her part. - Independent Practice/Differentiated ActivitiesWork in a team, collaborate and brainstorm together
- Reflection on Employability SkillsTeamwork
Collaboration
Respect
Ownership
Timeliness
Productivity
Design skills (principles and elements of design) - Lesson ClosureStudents will present their logos as a team, however, each designer will communicate their logo idea. As a class we will critique and help the teams decide on the most effective logo for their product.
Critiquing enhances communications skills while learning. Students will go back and make any necessary edits - A real-world experience. - Summative/end of lesson assessmentHands-on project
Rubric
Group Work/Classwork -
View/Download File: /project740_2527/Mobile_App_App_Logo_Rubric.pdf - References / Resources / Teacher PreparationList the references, such as textbook, website, publications, etc.
UX workshop was taken
Instructor created Mobile app study guides and hypothetical Travel app to guide students through
Notes and guidance from externship employer helped shaped the overall lesson
Also, check out some helpful websites:
https://uxplanet.org/4-lessons-on-teaching-ux-design-5a945c90a1eb
and
https://blog.prototypr.io/a-common-product-ux-design-process-55af4ab5665e
App icon examples:
https://www.pinterest.com/pin/145170787958388207/
https://www.underconsideration.com/brandnew/archives/abstract_sports.php
https://www.idownloadblog.com/2020/02/13/white-app-icon-trend/
Lesson #5 | Lesson 5: Explore UXD Design a Mobile App - Lesson Plan 5 TopicLesson 5: Explore UXD Design a Mobile App
-
View/Download File: /project740_2527/Mobile_App_Mobile_App.pdf - Lesson Plan 5 ObjectivesStudents will design an effective prototype and share their Mobile app for review
- Anticipatory set or lesson opening (to activate students` prior learning or draw student interest or involvement)Introduce students to Adobe XD (or Figma)*
(I am assuming most schools that have a design department have the Creative Suite license. Adobe XD is a perfect software program to teach the students the basic`s of UX).
Show students Travel app example. (keep in mind not all frames will work as this is just a introductory lesson in Mobile app design and students are required to only do a minimum of 10 frames - more if they want, adjust your lesson to fit for you!)
* Figma is a digital design and prototyping tool. Some companies are choosing to work in Figma because of it`s collaboration features and cost effectiveness. I am still learning Figma and hope to implement this software into my curriculum.
Another resource to check out is Sketch. - Direct InstructionIntroduce Lesson 5: Finalizing your Mobile App
Overview of Steps
Demonstrate Adobe XD
Show examples (hard copy of Frame 1 of 3 different ideas, plus, a couple functional apps)
Simple Color Theory Study guide app: (students also received hard copy of color theory study guide)
https://xd.adobe.com/view/51f37410-ba61-4afc-6d98-c275d42a9884-27c2/
Hypothetical Travel app:
https://xd.adobe.com/view/2befe6ce-d0b8-458e-56a2-1cebcfa262d2-5dde/
(Please note: The travel app is a rough example to show the students and to demonstrate Adobe XD, not all elements are functional)
Side note: The color theory study guide worked wonderfully. Students had a hard copy and the app to study from and all were successful on their final assessment. Students mentioned, having the app study guide was perfect as they are constantly losing hard copies of study guides. However, they don`t lose their phones! This is something I plan to do more of as I learn Adobe XD more effectively and hopefully Figma. -
View/Download File: /project740_2527/Mobile_App_Examples.pdf - Guided PracticeDemonstration of Adobe XD.
Oversee students collaborating, teamwork building while making sure everyone is accountable for his/her part.
Offer guidance to students working on new software.
1:1 feedback - Independent Practice/Differentiated ActivitiesWork in a team and collaborate.
Work will be divided up so that each member of team is responsible for his/her part take ownership. - Reflection on Employability SkillsTeamwork
Collaboration
Respect
Ownership
Timeliness
Productivity
Design skills (principles and elements of design) - Lesson ClosureStudents will present their Mobile apps as a team, each team member taking turns explaining their product. As a class we will critique and offer effective feedback.
Critiquing enhances communications skills while learning. Students will go back and make any necessary edits - A real world experience. We hope to present our ideas to the Fidelity UXD team, faculty members and family.
Some questions to think about asking during critique: (will help generate ideas for their reflection)
What did students learn throughout the whole design process?
What did students not expect? Any happy surprises? Frustrations?
How would your app possibly look if you were to continue beyond the 10 frames and complete it?
- Summative/end of lesson assessmentRubric
Writing Reflection (The writing guideline attached is something we use at Old Colony RVTHS and is very helpful)
Vocabulary Quiz
-
View/Download File: /project740_2527/UXD_Reflection.pdf View/Download File: /project740_2527/UXD_Vocab_Quiz.pdf View/Download File: /project740_2527/Mobile_App_Mobile_App_Final_Ruberic.pdf - References / Resources / Teacher PreparationList the references, such as textbook, website, publications, etc.
UX workshop was taken
Instructor created Mobile app study guides and hypothetical Travel app to guide students through
Notes and guidance from externship employer helped shaped the overall lesson
Also, check out some helpful websites:
https://uxplanet.org/4-lessons-on-teaching-ux-design-5a945c90a1eb
and
https://blog.prototypr.io/a-common-product-ux-design-process-55af4ab5665e
Recommended Strategies / Instructional Techniques - Reading StrategiesPlease read the attached information regarding your Unit Plan and UXD.
Check out medium.com -
View/Download File: /project740_2527/Mobile_App_Unit_Plan.pdf - Multimedia/Visual Strategy (f.e. slides)Instructor will show examples of personas on the overhead
- Graphic organizers or handoutsStudents are required to have a sketchbook and folder for class. Sketchbooks for all their ideation and folder for any handouts.
Plus, all students have an AdobeSpark page to keep a journal and portfolio of their work. - Writing StrategiesStudents will be required to write a reflection at the end of the Unit Plan.
- Speaking and Listening StrategiesAfter every lesson the final project will be critiqued as a class. Critiquing builds effective communication skills while learning.
- Family: Any opportunities to involve parent/guardians and other family members in this project?Instructors/students will share the final Mobile App with family members and the possibility of presenting to Fidelity Investments is in the works.
(Fidelity Investment is my externship employer where I learned so much more about UXD)!
Detailed Outline- Since all schools have a different cycle plan instructors will have to work the lesson to accommodate their schedule.
This is an example of my cycle at Old Colony RVTHS...
Two Week Related Academic Cycle
Two Week Shop Cycle
I see my grade 12 sThis lesson make take more than 3 days, it is hard to gauge how fast the students work. Since the problem statement and personas are a critical part to the project you might want to take the time to really develop the users and Mobile app idea.
Subject = Arts, Technology, CVTE | Grade Level = HS | Time Period = Summer Program | Program/Funding = | Externships-2020 |
Direct website link to this project: http://ContextualLearningPortal.org/contextual.asp?projectnumber=740.2527
|
