1

FA102d, Design for Smartphones and iPads Professor Tom Klinkowstein x3-5635 fatik@hofstra.edu Course blog: https://fa102dspring2018.wordpress.com/ Peer Teacher: Deanna Brusca <dbrusca1@pride.hofstra.edu> Purpose This course introduces the procedures necessary for researching, planning, creating content and designing a user experience / user interface (ux / ui) for mobile devices. You will learn the basics of ethnographic research, wire-framing and the aesthetic and design-related considerations needed to successfully complete the course assignment. Class Structure Class time is used for presentations, lectures, software demonstrations, critiques and working on the assignments. You must work approximately two hours outside of each class to get the work done for a passing or better grade level. When we use class time to work on assignments and there is no lecture or group critique, you are encouraged to discuss that assignment with others in the class in a respectful and helpful manner. Do not use phones (turn them off), check email, text or hold non-class related discussions during class time. Ignoring this rule will cause a grading penalty up to and including not passing the course. If you need to leave the classroom during class, please inform me before leaving and always return to the classroom afterwards. Absences, coming late or leaving class early will also result in a lower grade. Project There is a semester-long assignment with multiple components, plus one team project, both with multiple components. Ample time is given to complete the assignments to learn the necessary skills as well as to iterate files numerous times to achieve superior aesthetic results. If you finish an assignment module before we begin the next one, use that time to improve your results or complete an additional version of the same module.

2

Grading Based on the successful completion of all assignments, the blog, final exam, as well as class participation (asking and answering questions), portfolio site and attendance. Weighted as follows: Project results: 5/16 Group Triangulation Presentation:3/16 Blog including embedded slideshare presentation showing project progress: 3/16 Exam: 3/16 Portfolio: 2/16 Once or twice during the semester we meet individually in the office adjacent to the lab or in my office and discuss tour grade thus far. -- Grading meeting dates (subject to change): February 27 April 10 You are required to attend your grading discussion. If you do not attend, your grade will be marked as an F for that period. If you miss you grading discussion because of illness, bring a doctor’s note to the next class. Class will continue to meet during the individual discussions. During the meeting for the final exam, turn in a CD or USB stick (cloud-based or email submissions not possible). Include your final presentation as a ppt and pdf files, plus other related final files (the Blueprint app prototype files for instance). Additionally, include your blog url listed on a Word doc. Notes on the Course Structure Please review this syllabus carefully to familiarize yourself with all its special characteristics since it may be structured differently from other courses you have had at Hofstra.

3

If you have taken courses with me previously, there may also some differences compared to past course structures. Course Organization: -The first third of the course is used for research -The second third is for design-related planning and visual design assets -The last third is for applying all previous work to creating a mobile device app prototype and finalizing a presentation that summarizes the entire project. All the above is encapsulated in a semester long assignment specified below, under, “Multi-Part Semester Long Assignment”. There is also a Team Triangulation Presentation–a presentation project you make and present as a team. See below. You will present your research and design work as documented on your blog and in slides to the class throughout the semester. -- Office Hours I am available during office hours by appointment: Tuesday / Thursday, 2:00-3:00 and 5:00-6:00. Peer Teacher The Peer Teacher works with me to maximize your enrichment from the course by assisting you individually (in class tutoring) and short co-presentations with my assistance to the group as appropriate. The Peer Teacher does not teach the course, create or administer tests or do any of the grading, and is always under my supervision. Blog All students create a free Wordpress blog, which is used as an electronic notebook where you keep your class notes, research notes, research images, links to projects where possible and the reading, writing and other tasks related to the group presentation triangulation project (see below).

4

When setting up your blog choose a free theme (appearance of the blog), which does not include a default image. In design, we know that every choice of font, image, etc. influences the message and total impact of what we see, use, read, etc. “You cannot not communicate”, as designers say. That is to say, we want the content you place in the blog (notes, research, etc.), to be the focus of attention, not a decorative image regardless of how expressive it may be. Team Presentation Everyone will, as a member of a team, plan, create, iterate and present a 10 minute, slide presentation, on the theme, “Mobility”; with the final goal being to propose a new app derived from “desk research” (assignment sources and other sources you find online). Using the assigned urls and found sources, the team will “triangulate (derive a new concept for an app out of the sources your find and read as a team. -- Why Mobility? Mobility is one of the underlying reasons for the existence of portable devices and apps (the subject of this course). For the purpose of the presentation, Mobility may be interpreted freely, for instance: to do with a sense of place, where one considers “home”, new forms of mobile-centric business, the nature of connections, cultural affiliations across distances, etc. There will be three presentations per team on the same theme, with each successive presentation refining the content, quality and related design elements of the previous presentation. -- Using the assigned reading sources (see below), plus other vetted sources you find as a team, you will: - Research and present existing efforts regarding the chosen mobility-related theme / condition.

5

- Raise new questions and speculative “solutions” regarding the identified mobility theme / condition, including supporting visualizations. -Propose a new app, name it and show a wireframe (contents and layout of the screen). -The app should have only one screen. -- -- Each member of the team is required to participate, devoting approximately 15-20 hours to the task of the group presentation over the course of the first 2/3 of the semester. -- A significant part of this exercise and related learning, is to figure out as a team, how to self-assign and self-organize the tasks necessary for a successful presentation. Meet in-person and use virtual groupware tools as needed. It is your responsibility to agree on the timings for meetings and the manner and use of groupware. -- The reading resource assignments per team are as follows: Team 1 http://www.psfk.com/ https://www.sypartners.com Team 2 https://twitter.com/thnkclrly?lang=en https://www.artefactgroup.com/ Team 3 https://www.fastcodesign.com/

6

http://designobserver.com/ Team 4 http://www.garrygolden.com/blog/ http://99u.com/ Team 5 http://sethgodin.typepad.com/ http://designmind.frogdesign.com/ Schedule: A) Initial “jump start” presentation. Each team member reads at least two different articles from within the assigned urls. Freely speculate on any (plausible) connections which in any way might imply ‘mobility’. Don’t be confined to simple extrapolations. Create three or four slides in total per team, with bullet point talking points regarding the possible connections between the articles read, as might pertain to mobility. You may choose to highlight one or both of the articles you read. Maximum 20 words per slide as talking points (do not read aloud the talking points when presenting—rather use them as cues). Given the short amount time to work together and create the first presentation, this first presentation is intended to be rough and tentative and a very early first draft. During the initial presentation (February 1), you will have present in the form of a dialog with your team members and the audience, guided by your slides. This, in order to begin to ascertain your team’s initial triangulated ideas as to a new mobility-related theme / condition. You must, as a team, create the presentation and present (even if you are uncertain that, “you are doing it right.”) --

7

Example first presentation. Use a slide format inspired by the examples but with your own variations. Use short phrases not long sentences as talking points. Use a consistent format through-out all the slides, with the title (1-3 words regarding the problem condition) in the upper left corner and the team member names in the upper right corner, both in a horizontal banner across the top 10-15% of the screen area. No more than 20 words per slides. Bold type consistently implemented in size, usage and placement on all slides. No more than 2 font families.

Slide 1

8

Slide 2

Slide 3

9

Slide 4 February 1 -- B) interim presentation from each team. -Goal for this stage of the team presentation is to begin to complete the triangulation: Mobility + (theme you derived from first presentation; for instance, low-carbon services) = (what new low-carbon mobility-related invention / app ) While the individual assignment in this course creates a prototype app based upon an idea which comes from direct ethnographic observation of a particular cohort, the team project proposes an invention / app derived from triangulating “desk research” (legitimate new sources found online and ideas from the assigned urls). -Each team member finds at least one outside related source (no marketing materials), inform the new triangulated proposal for an invention / app.

10

-Show the slides from the first presentation, plus create five additional slides: *Two slides for each outside source (four slides in total): One showing the title, url and related screen shot One with a 20-word or less excerpt or paraphrase from the outside source article *One slide with: Short description of the proposed invention / app February 22 -- C) Final Presentation -Show the slides from the first two presentations, plus create two additional slides: *One slide with a working-name for the proposed invention / app and justification for the name (the manner of justification is up to you) *One slide showing a wireframe for the proposed one screen app March 6 -- Other Presentations In addition to the triangulation, you will periodically present to the class your progress regarding the multi-part semester long assignment. In these instances, you will either present from your blog or a slide deck you compile that corresponds with the research, design and production phases of the assignment. Portfolio Everyone in this course makes an online portfolio using Behance.net or similar portfolio site with work from this class as well as others design classes (if you have taken them). An online portfolio is useful for internships and applying for your first professional position after Hofstra (even if this position is not a design-related position, since

11

working with designers and thinking like designers is now nearly ubiquitous in most disciplines). Required Materials At least 3 GB of storage space on an external USB or FireWire drive or a cloud-based backup. Important: Backing up Work Back up your files after every class. No grading consideration will be given for lost files. Exam The Final Exam will be held on the university-designated exam day. -- Semester-Long Assignment Summarized Description of the Project Research, conceptualize, design and make a prototype of an application for a phone that answers an unmet need / desire within a group you belong to, have some connection with and/or have access to. The goal is to develop a solution that simultaneously addresses a true need and creates engagement. The app must include links, a splash screen and three sub level screens appropriate to its function. Place all in-progress artifacts of the project your blog and then in a slide presentation you will present to the class. Software Photoshop, Illustrator, PowerPoint, Blueprint Steps in the Assignment Ethnographic Research (Ethnography is the study of groups.) Conceptualize ideas for the App Ideation Session

12

Research Smartphone Apps Tighter Application Description Create Name Create Logo / Logotype Create Wireframe Create Visual Screen Design Presentation Create Prototype in Blueprint App (iPad) Add Prototype Documentation to the Presentation --- Procedure (Dates subject to change) 1) Ethnographic Research (“need finding”) Conduct ethnographic research (observations, interviews, photos and/or videos) of a group you belong to or have contact with (for instance, groups of students you study with, students you socialize with, people you live with at the dorm or at home, social circles inside or outside of school, your family, etc.). Through a series of observational sessions (spending time observing the group), infer or discover, an unmet need or desire in regard to that group. Next, identify an “extreme user” within this group. Extreme users are part of the group but may be a more frequent or more enthusiastic participant in the activity being observed. They are also usually more accessible and more articulate and may have the potential to more obviously benefit from the application you will be proposing. Document this as follows: 1a) Photo journal of 10-20 medium and close-up images of the people in your research (especially the extreme user) Identify cohort to be observed: February 6 Complete photos: February 6

13

Post the photos on your blog and be prepared to present them to the class as called on to do so. 1b) 20-40 words of your own anecdotal observations. February 13 1c) 30 seconds to a minute of edited video comprised of an interview with one or more members of the cohort, including (if available), the extreme user; this, in regard to an unmet need or desire. February 13 Be prepared to show your results thus far from your blog. (There will be a more formal presentation with slides next month). 2) Conceptualize ideas for an App From your ethnographic research, infer / conceptualize a draft idea (one to three sentences), for an app which meets a need or uncovers a hidden desire. Example app, draft description: “A collaborative workspace among students of a specified course. Purpose is to provide a screen-based meeting space for impromptu assignment critiques from fellow classmates to supplement those received from the professor.” February 15 3) Ideation Session Plan and facilitate an ideation session to further develop the application concept. The session should have three others present (minimum four including yourself). At least one of the participants should be from outside of the class. Goal of the session is to review you draft concept(s) and / or to generate a changed (or even new) concept; then to specify: -The unmet need or desire -Who the app is intended for -Draft idea on the functionality of the app as expressed in a home screen and three sub-level screens. --

14

Use post-it notes and (optionally) a white board and/or a large white flip pad to facilitate and document the results of the ideation session. Review and use the tips in the Brainstorming_Ideation session pdf on the course blog (starting with slide 6), as a guide to your ideation session: -30 minutes per session -Defer judgement (don’t filter or say why something is not possible) -Encourage wild ideas -Build on the ideas of others -Stay focused on the task at hand -One conversation at a time -Use text and simple drawings -Go for quantity Use photos to document the session. February 20 4a) Research Regarding Phone Apps Review at least 5 existing apps as research for the visual and interaction design of smartphone apps. Use screen shots to document your research. February 22 4b) Interim presentation Create a PowerPoint presentation that includes the all the steps in the assignment thus far (your numbering may vary slightly than noted below but should be in the same sequential order listed). You will present this to the class. (A mid-project presentation is a common and extremely important part of all professional careers including design.) -- All slides should have your name and, “App Research and Development” on all slides in the same place, font and size.

15

In general, keep font usage consistent throughout. (Slide numbers are an estimate-you may have a few more or less and therefore, the numbering may be slightly different.)

Examples of an appropriately formatted slide presentation --

16

Slide numbering below is approximate; your numbering may vary. Slide 1: Title slide with your name and “Welcome”. Slide 2: A draft, one-phrase description of the unmet need or desire. Slide 3: A one-phrase description of the observed group. Slides 4-9: Five selected images from the photo journal. Slide 10: 30-seconds to one-minute edited video showing the context and behavior you are tracking and video interview(s) with user/extreme user as unmet needs or desires. Slides 11, 12, 13: Excerpts from these interviews as bullet points (up to four bullet points). Slides 14, 15: Four bullet points of your own anecdotal observations. Slides, 16-18: Draft idea for an app that meets the identified need or hidden desire. 20-60 words. Slides 19-22: Documentation from the ideation session including: *1-3 photos of the session itself *1-3 good quality photos of the post-it notes and/or white boards contents *3 bullet points summarizing the best contents from the post-it notes that identify: -The unmet need or desire -How the app would work -Who the app is intended for Slides 23, 24: Documentation from research on smartphone apps. Show research (screen shots of key screens) as to the most relevant two existing apps you researched. 5) More Complete Application Description More completely describe the proposed application. A) Bullet point description of home screen features with news feed (or other features), plus bullet point list of features of three, sub-level screens.

17

February 23 B) Visual user scenario (three or more screens). A story about the proposed app, showing the unmet needs the app would fulfill, who the users are, what context it would be used in and how it would work. March 1 6) Create a name for the application Make a list of three words you collected during the ethnographic research phase of the project, From these words, invent a name that seems right for the app. Document your name creation process. March 6 7) Create a logo for the application Use the same words from the previous step as image search terms. Use one of the found images as a basis for a SIMPLE logo (choose just the essential, bold shapes), 6 x 6 inches, 326 dpi. Save as a png. Use Photoshop or Illustrator to simplify the selected image in order to facilitate turning them into a logo for your app. Set the name in an aesthetically appropriate font (review preferred fonts lists on the course blog as a starting point). Position the logotype near the logo (most likely just underneath). March 8 8) Sketched wireframes Sketch or use illustrator to make five “wireframe” schematic representations of the content of the five required screens in the app. These are outlined rectangles (in black or medium gray) to indicate approximate positioning of content and links. They DO NOT show visual design. Make all the wireframes 640 wide ×1152 high pixels each.

18

The five wireframes are of these screens: -Splash screen (see below for what goes in the Splashscreen) -The home screen containing a menu bar at the top and/or bottom of the screen with links to three sub-level screens appropriate to your app. In the area below and/or above the menu bar, show home screen functionality (or a news feed which is often the home screen functionality) -Three screens that have the same menu as the home screen and which are graphically consistent with the home screen. Based upon your previous research, you determine what goes in these two screens. March 13 9) Splash screen Make a splash screen with the logo and name on a neutral tone or appropriately chosen one-color background. The logo and name generally occupy 30-50% of the splash screen. Make the file 640×1152 pixels at 326 dpi, png format in Photoshop or Illustrator. March 15 10) Presentation Create a PowerPoint presentation that includes the all the steps in the assignment thus far (your numbering may vary slightly than noted below but should be in the same sequential order listed). This will be used as part of a mid-project presentation (a common and extremely important part of all professional careers including design). -- All slides should have your name and, “App Research and Development” on all slides in the same place, font and size. In general, keep font usage consistent throughout. (Slide numbers are an estimate-you may have a few more or less and therefore, the numbering may be slightly different.)

19

Slide numbering below is approximate; your numbering may vary. Slide 1: Title slide with your name and “Welcome”. Slide 2: A draft, one-phrase description of the unmet need or desire. Slide 3: A one-phrase description of the observed group. Slides 4-9: Five selected images from the photo journal. Slide 10: 30-seconds to one-minute edited video showing the context and behavior you are tracking and video interview(s) with user/extreme user as unmet needs or desires. Slides 11, 12, 13: Excerpts from these interviews as bullet points (up to four bullet points). Slides 14, 15: Four bullet points of your own anecdotal observations. Slides, 16-18: Draft idea for an app that meets the identified need or hidden desire. 20-60 words. Slides 19-22: Documentation from the ideation session including: *1-3 photos of the session itself *1-3 good quality photos of the post-it notes and/or white boards contents *3 bullet points summarizing the best contents from the post-it notes that identify: -The unmet need or desire -How the app would work -Who the app is intended for Slides 23, 24: Documentation from research on smartphone apps. Show research (screen shots of key screens) as to the most relevant two existing apps you researched. Slides 25-27: -Tighter application description -Specifications of the app Slides 28-30: Visual user scenario (simulation of the app in context and use).

20

Slide 31: Show the name of the app and how you arrived at the name. Slides 32: Show image used for the logo and the final logo. Slides 33-34: Show the splash screen and the four tight wireframes for the home and sub-level screens. (You decide how many wireframes to show per slide.) -- Output all the slides as Tiffs and place them in a 24 high x 36 wide” InDesign file. Use the template below as a guide.

Light gray, 1 pt. rule around all slides. Four rows of five slides each. You will most likely need successive prints, depending on how many slides you have. Eliminate any unused rectangles on the second sheet.

21

In the bottom right add (Helvetica, 12 pt., flush right with the right edge of the last slides on the right side of the five rows above): Your Name fa102D, Professor Klinkowstein App Research and Design Presentation Print at 12x18”. Then (at my request), at 24 x 36”. March 29 11) Prototype Using Blueprint on the iPad 9TO BEGIN, There are many app prototyping applications. In this last part of the assignment, we use Blueprint, which works directly on the iPad. However, if you have advanced skills, you may choose (with my permission) to use another prototyping application. If you choose to use another application, you will be on your own to master that software. -- To begin, optionally, review the tutorials for Blueprint at the urls below. (The tutorials are fairly crude, but can be useful.) (start with) http://www.youtube.com/watch?v=tszZhdzBzM0&list=UU68nokAcuUZtmgMjTbCkSkw (then look at these as well) http://www.youtube.com/watch?v=v_3ogTa6nrg&list=UU68nokAcuUZtmgMjTbCkSkw&index=13 -- Create your app prototype including: -Splash screen (logo and logotype on a neutral of appropriately colored background). -The home screen containing a menu bar at the top or bottom of the screen with a news feed (or other functionality appropriate to your app’s purpose).

22

The home screen should also contain links to three sub-level screens. -The three sub-level screens previously planned in the wireframing phase. If you finish early, do additional screens. The screens will be the same as those you planned as wireframes. Note that you may need to adjust your wireframes to accommodate the limitations of Blueprint. If you have features that are not in the Blueprint library (like a calendar for instance), create these yourself in Illustrator or Photoshop and import them via Dropbox, or change your features to accommodate what is available in Blueprint. If you create screens in Illustrator or Photoshop and bring them into Blueprint via Dropbox, add the linking between the screens using Blueprint. If you choose this route, be cautious to make sure text and graphics are readable at the larger of the iPhone screen sizes selectable in Blueprint (equivalent to a contemporary iPhone SE). Note: To place an image into Blueprint, place it in a Dropbox folder, then, open Dropbox on the iPad you are using (always use the same iPad for this assignment), then save the image from Dropbox into the photo library on the iPad. To find the image while using Blueprint: image>camera roll. -- To avoid annoying notifications when using Blueprint on the iPad, go into Settings and turn off Notifications for Blueprint. April 19 -- Add screen shots of your finished prototype as the final slides in the slide presentation and re-do the large print, showing the four screen-shots of the finished app.

23

(Maximum) five rows of seven slides each. Use the same layout as on the earlier print. In the bottom right add (Helvetica, 16 pt., flush right with the right edge of the last slides on the right side of the five rows above): Fa102D Professor Klinkowstein Phone App for an Unexpressed Need or Desire Your Name Print at 12x18”. Then (at my request), print at 24 x 36”. April 19 12) Behance.net or similar portfolio site Create a Profile and Upload five files you select from this course (do not show the banner if you use images from the slides). You may add other (design only) files from other design courses. --

24

Hofstra University Policies Academic Honesty: · Hofstra University Honor Code: “As a member of the Hofstra community I pledge to demonstrate integrity and ethical behavior in all aspects of my life, both inside and out of the classroom. I understand that I am accountable for everything I say and write. I will not misrepresent my academic work; nor will I give or receive unauthorized assistance for academic work. I agree to respect the rights of all members of the Hofstra community. I will be guided by the values expressed in the P.R.I.D.E Principles. I accept the responsibility to follow this Honor Code at all times.” · Honor Code Short Form: “I pledge on my honor that I have done this work with honesty and integrity, without giving or receiving unauthorized assistance.” · Academic Honesty: Plagiarism and other forms of academic dishonesty are serious ethical and professional infractions. For information regarding Hofstra’s statement of principles with respect to academic honesty, examples of violations, procedures for handling violations, as well as a student’s right to appeal a charge, see Faculty Policy Series #11 for undergraduate students (http://www.hofstra.edu/pdf/Faculty/Senate/senate_FPS_11.pdf) and Faculty Policy Series #11G for graduate students (http://www.hofstra.edu/pdf/Faculty/Senate/senate_FPS_11G.pdf). Student Access Services (SAS): If you believe you need accommodations for a disability, please contact for Student Access Services (SAS). In accordance with Section 504 of the Rehabilitation Act of 1973 and the Americans with Disabilities Act of 1990, qualified individuals with disabilities will not be discriminated against in any programs, or services available at Hofstra University. Individuals with disabilities are entitled to accommodations designed to facilitate full access to all programs and services. SAS is responsible for coordinating disability-related accommodations and will provide students with documented disabilities accommodation letters, as appropriate. Please note that accommodations may require early planning and are not retroactive; please contact SSD as soon as possible. All students are responsible for providing accommodation letters to each instructor and for discussing with him or her the specific accommodations needed and how they can be best implemented in each course. For more information on services provided by the university and for submission of

25

documentation, please contact the Services for Students with Disabilities, 107 Student Center, 516-463-7075 Deadlines: Please be mindful of University deadlines. See www.hofstra.edu/deadlines. Incomplete Policy: Hofstra’s policies regarding Incomplete grades, default grades, and associated deadlines can be found in the Undergraduate and Graduate Studies Bulletins (http://bulletin.hofstra.edu/). Student Policy Prohibiting Discriminatory Harassment, Relationship Violence and Sexual Misconduct Hofstra prohibits sexual and other discriminatory harassment, stalking, domestic and dating violence, sexual assault and other sexual misconduct (collectively, “Gender Based Offenses”). If you or someone you know believes they have been subjected to any of these Gender Based Offenses, help is available. To make a report, or for more information about Hofstra’s Student Policy Prohibiting Discriminatory Harassment, Relationship Violence, and Sexual Misconduct (available at http://hofstra.edu/sexualmisconduct), please contact the Title IX Coordinator at (516) 463-5841 or TitleIXCoordinator@hofstra.edu, or Public Safety at (516) 463-6606. Confidential resources and support are also available from clinicians in Student Counseling Services (516-463-6791), medical professionals at the Health and Wellness Center (516-463-6745), and clergy in the Interfaith Center. 2016-17 Academic Year: Guidelines Related to Absences for Religious Observances Absences for Religious ObservanceHofstra University recognizes that students and/or faculty may from time to time miss class due to religious observances. Students who anticipate missing class for this reason should notify faculty members in advance. Likewise, faculty members who anticipate missing class for religious observance should notify students in their classes. As per Faculty Policy Series 12 (B): “No student shall be expelled or refused admission to Hofstra University because he or she is unable to participate in any examination, study or work requirement because of his or her religious obligations and practices. However, all students are expected to complete all assignments and examinations. It is understood that no adverse or prejudicial effects shall result to any student who avails him or herself of religious observances. The University, faculty, and student shall work together to achieve a reasonable accommodation concerning any conflicts between educational and religious obligations.” Faculty are encouraged to include notice of this policy in their syllabuses

26

and announce it during the first week of each semester, and make reasonable efforts to avoid scheduling exams and/or due dates of assignments that would otherwise interfere with religious observances of students. Additionally, in accordance with New York State Law, each student who is absent from school because of his or her religious beliefs will be given an equivalent opportunity to register for classes or make up any examination, study or work requirements which he or she may have missed because of that absence on any day or days.