Learn how to design and prototype mobile apps! This session will provide you with specific tools, techniques and workflows to help you kick-off your mobile app idea the right way. Join us to learn the latest strategies in brainstorming and develop your abilities to outline a project concept and present it for feedback to help you make informed design decisions. Learn techniques to help you communicate a concept, create low-fidelity wireframes, user flows, prototypes and to work within a team.

1. Des󰇮 󰇫 󰈡󰇯n 󰇫 Mo󰇩󰇮l 󰈥 A󰇴󰇵s
A FREE TECHGIRLZ WORKSHOP FOR GIRLS IN GRADES 5 � 9

2. TODAY’S AGENDA
● Introductions and Icebreaker
● Create a mobile app
● Brainstorming
● Create User Journeys
● Create Prototypes
● Sharing Your App
About Ms. CookThe 󰈑󰇰󰇧󰈡

3. About Ms. Cook
INTRODUCE YOURSELF TO THE
CLASS!
Ice󰇨󰈦󰇪󰈜ke󰇶
• What’s your name? Age? School?
• What is your favorite website or app? Why?

4. About Ms. CookOne 󰇹󰇭󰇮n󰇫 󰇩󰈥fo󰇶󰇪 󰈟󰈥 ge󰇹 󰈤t󰇧󰇶󰇺󰈥d…
LET’S LAY DOWN SOME RULES.

5. A native mobile app is one that is installed
directly on the smartphone and can work, in
most cases, with no internet connectivity
depending on the nature of the app.
About Ms. CookMob󰇮󰇰󰈥 A󰇵p󰇷 󰇾s. Web A󰇴󰇵s
A web app works via a web browser on the
smartphone but requires either a cell signal or
wi-fi to function. You can access it on a phone,
but you don’t download an app for it.
NATIVE APPS WEB APPS

6. About Ms. CookLet’s Ge󰇹 I󰈡s󰇴i󰈦󰇪d

7. CREATING
PROCESS

8. About Ms. CookBu󰇮l󰈧 󰈌󰈦󰈣up󰇷 󰈢󰈆 4-5 Pe󰈢p󰇰󰈥
IT’S TIME TO FORM
YOUR TEAMS!

9. ● What is the purpose of your app?
● What can people do on it?
● What is the name of your app?
● Does your app have a logo?
● Find competitors and analyze
Example: “It’s ‘Take One,’ a movie-making app
that lets you edit and share videos. Its logo is a
red star inside a reel of film.”).
About Ms. CookSta󰇶󰇺 󰈈r󰇧󰇯󰇳󰈤to󰇶󰈩󰇮n󰇫

10. About Ms. CookWho 󰇮󰇷 󰈠󰈣ur 󰇻󰇷󰈥󰈦?

11. About Ms. CookCre󰇧󰇹󰈥 a P󰇪r󰇷󰈣󰈡a
● Create an ideal user; a persona, tell us
about this person’s personal life
● Why would your user want this app?
● What pain point does it solve for them?
● How would this make their lives better?

12. Bre󰇧󰈫 󰈓󰇯 󰈩e!

13. About Ms. CookWha󰇹 󰇮󰈤 󰈜 us󰇪󰇶 󰈆l󰈣󰇿?

14. About Ms. Cook Exa󰇲󰇵l󰇪
● What does this user want to do?
● How does she do it?
● How does she interact with SnapChat to do it?

15. WHAT IS THE FIRST
THING USERS SEE
WHEN OPENING AN APP?

16. About Ms. CookCre󰇧󰇹󰇯󰈡g U󰇷e󰈦 Fl󰈢󰇿󰈤

17. ● What features will the app have?
● How do they use those features?
● What are the paths users can take?
● Start thinking loosely about what each
screen might look like
About Ms. CookMak󰇪 󰈜 u󰇷󰇪󰈦 f󰇰󰈣󰈟

18. Wireframes 101
● The blueprint of a visual design
● Focus on the elements of the screen and
not how elements look
● Can be as simple as a sketch or as refined
as a digital wireframe
About Ms. CookWha󰇹 󰇮󰈤 󰈜 wi󰇶󰇪󰈆r󰈜󰇲e?

19. About Ms. CookExa󰇲󰇵l󰇪󰇷 󰈣󰈆 wi󰇶󰇪󰈆r󰈜󰇲e󰈤

20. Creating a wireframe
● Each team member, choose 1-2 screens of
your app to rework
● Make a list of every element that needs to be
on the page and make sure each is
represented on your screen
● Share your screens with others to test if they
are user friendly
About Ms. CookMak󰇪 󰈂󰈣u󰈦 w󰇮󰇶󰈥󰈆ra󰇲󰇪󰈤

21. About Ms. CookMar󰇽󰇪󰇱
Go to marvelapp.com and
login.
annaecook@outlook.com
coolcat2019

22. About Ms. CookCre󰇧󰇹󰈥 󰈩oc󰈫󰇻󰇵s
Creating a mockup
● Use your wireframes to create a mockup
● Collaborate with your team on things like
colors, navigation, and font so that your mocks
work together.

23. Please take the survey!
te󰈛󰇭g󰇮󰇶󰇱z.or󰇫/su󰇶󰇾󰇪y
Thank you!