Homework: Due March 14th (no class March 7th)

Digital Interactive Prototypes (this is two weeks worth of work)


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.

Homework: Due February 28th

1) Create a User Journey Map (like we did in class). 

• Use your persona as your user.
• Include: Phases, Actions, Thinking, Feeling, Pain Points, and Opportunities.

_____

2) Wireframes 

• Read:
- Basic Patterns for Mobile Navigation and
- UI/UX Navigation Design Glossary

• Draw: 
- When drawing your wireframes, figure out what needs to be on each screen and what the flow is between different screens. Draw every important screen and figure out the order that you move between screens.

- Think of the overall experience of the entire app. Don't get caught up designing every detail the login process.

- Use these iPhone sketching templates to hand-draw your wireframes. Or if you prefer use graph paper.

- Cut up your 8.5x11 pages so you can  put your individual wireframes in the proper order – like a stack of cards)

- When you have all the important screens draw and have established the flow between screens, re-draw your wireframes so they look good for presentation. Use black and grey felt-tip pens in different weights. Focus on your craftsmanship as a draftsman.

- Draw at the resolution of the examples below, and look at reference to help you articulate your screen designs (i.e use and study similar apps, and look to inspiration at places like here and here. 

_____

3) Do these tutorials: Sketch Essential Training and  Sketch for UX Design. We will be using Sketch in class next week and throughout the semester. 

* If you are using a PC and Adobe XD, do similar Lynda.com tutorials for Adobe XD. 

_____

Due February 28th (at start of class) 

Bring these things to class and upload pics to your Dropbox folder: 

• User Journey Map 

• Wireframes

Also be sure to complete the Sketch tutorials. 

Homework: Due February 21st

Now that you have begun to see what your app looks and feels like from the perspective of your prospective user, it's time to learn from real people so you can gain insights into what they want and need from a product like the one you're designing.

Homework

1. Speak to at least 5 real people. Find as many people as you can that fit the demographic you are designing for. Spend at least 10 minutes learning from them. When possible get them to show you what they are talking about. 

- To help prepare for interviewing, read pages 9 and 10 (Interview Preparation and Interviewing for Empathy)

2. Empathize and understand what the people you speak to need and want

3. Write down the key observations and insights from each interview. 

- These are short, direct phrases and sentences that capture what you are seeing and hearing. 

4. Create a new persona and empathy map to accurately reflect the people you spoke to. 

5. Create a new storyboard to reflect your new personas wants and latent needs. 

- Really work through the entire sequence of the person using the app to accomplish the task the app helps with. 

- Use storyboarding as a high-level design tool: Identify the “pain points” – the places that the experience isn't good for the user – and redesign them to be better.  

6. Update your app name, definition statement, bullet-pointed list of key features to reflect the changes to your app. 

_____

Due February 21st 

Bring to class and upload pics to dropbox: 

• Key Insights from interviews 

• New Persona and Empathy Map

• New Storyboard

• New Definition statement & bullet-pointed features list

Homework: Due February 14th

1) Research similar apps to yours and identify how your app will innovate and be different. 

• Make a list of similar apps and understand what they are doing and how they are similar and different from each other.
_____

2) Begin to identify who you're designing for and what makes them tick. 

• Create a Persona based on who you think this person is you are designing for (once you know more about the actual people you are designing for we'll revise our personas, but this is a good place to start).
- Read: How To Create UX Personas
- Based on the reading, create a user persona for your app
- Keep in mind: Revise the questions as needed to be most relevant and helpful for the design of your specific app.
- Also keep in mind: the "needs and goals" should be related to the goal of what your app does for the people using it.

• Fill out this Empathy Map, based on your persona (who you think you are designing for).
- Again, keep in mind: these answers should be related to the goal and features of your app.

• If you have multiple players (such as Uber, that has both riders and drivers) design multiple Personas. 
_____

3) Create hand-drawn storyboards as a way to prototyping the experience of your users using your app.  

• Read AC4D Storyboarding PDF. Follow directions. Here's the worksheet too.

• If you're not comfortable drawing, here's a nice little crash course.

• If your work is messy, create a nicer final version on a new piece of paper for presentation – use a Sharpie and/or a fine-point Sharpie so we can see it clearly in-class.

• If you have multiple players (such as Uber, that has both riders and drivers) create storyboards from multiple points-of-view.

• Explore the complete cycle of needing to solve a problem and using the app to solve that problem. Create multiple storyboards if you need to.


_____

4) Revise your app definition statement and bullet-pointed list of key features to reflect your new understanding of what apps already exist, and the people you are designing for. 

_____

Due February 14th (at start of class) 

Bring these things to class and upload pics to your Dropbox folder: 

• App name, definition statement with bullet-pointed list of key features

• Personas

• Empathy Map

• Storyboards