1) Using your journey map and wireframes for reference, create a wireflow diagram to help you identify all the screens you need to design in order for your user to accomplish the main tasks that the app helps with.
2) Once you've identified the screens you need to design, revise your thumbnails to reflect any necessary updates and changes.
______
3) Using Sketch (or Adobe XD if you're working on a PC), digitally design the screens you identified necessary for getting the user through their experience of using the app.
• We will be adapting Material Design for this. In order to understand Material Design, read and study the following sources:
- Material Design Guidelines
- Expressing Brand in Material
• Follow the Material Design guidelines to design the individual screens of your app using Sketch.
- For now, follow Material Design as closely as you possibly can. (It's an amazing system!)
- Don't worry about Motion yet. We will be designing motion interactions and animating screen transitions next.
- To see examples of specific screens look places like here and here
_____
4) After you've designed all your screens, export them as PNG or JPG files and upload them in InVision to create an interactive prototype that you can tap and swipe, and test on any mobile device.
• To get started in InVision:
- Using your school email address sign up for unlimited use of InVision here: http://www.invisionapp.com/education-signup. Use this code: 56-73-13-19
- Watch this short video to get started: Interactive Prototypes with InVision
- If you want to learn more, you could also do this tutorial: InVision for UX Design
• After you're learned the basics of InVision, build your interactive prototype.
_____
Due March 14th
Upload to Dropbox and bring to class:
1. Your InVision link
2. A folder with your individual screen designs as PNG, JPG, or PDF files
This is two weeks worth of work.
Bring all working materials and files to class.
