FA102b Professor Tom Klinkowstein x3-5635 fatik@hofstra.edu course blog: https://fa102bspring2018.wordpress.com/ Multi-Part Assignment Plan and design a trans-media (various screen-based media) package of designed components to include research, a user experience map, a research groupware website, branding elements for a proposed product or service, social media and related editorial calendar, user website visual prototype and print and screen-based presentations. Software Photoshop, Illustrator, Mobilize, Invisionapp, Quora, Facebook and PowerPoint Steps in the Assignment, Summary *Create a slide presentation format to document in a professional business-like manner all the major elements of the project throughout the semester. Present to the class periodically from the slide presentation as well as your blog (the blog documents your class and project notes as well as initial project results before they are embedded in the slides). *Research and select theme from a posted article or file at http://www.IFTF.org/futurenowblog. Use Quora for additional research. *Envision a potential service or product arising from this first-stage research *Create a User Experience Map showing where users of this product or experience might encounter it and in what trans-media forms. *Create a Mobilize research group (‘network’ in Mobilize parlance) with required content to gather ideas from a cohort (community) you form to find a name and features of the proposed product or service.

*Based on results from the Mobilize comments and poll results, and all other research to date, create a more detailed description of the proposed product or service. *Create a logotype for use in later parts of the assignment. *Create an editorial calendar for a Facebook page for your product or service and execute that calendar. *Create a consumer website prototype. *Create a professional quality display print portraying all major elements of the project. -- These steps mimic the process I follow with clients with my company Media A, and although software tools and some procedures differ from project to project and between agencies and practices, this methodology is the template for professional-level trans-media research, planning, design and prototyping. Be diligent, patient and thorough. Staying on schedule, keeping track of everything in a clear organized manner is vital. If you mislabel or misplace files, you most likely will not finish the project successfully. Do not skip ahead or just assume you know what I am asking without reviewing each step a number of times and working in a directed, mindful manner. Steps in Assignment, Details (dates subject to change) 1) Create a slide presentation format to portray all major elements of the project. Use this template with the noted characteristics:

-Banner at the top for your name, course number; your name in the upper right -Use two different but compatible sans-serif font families from the Preferred Sans-Serif list posted on the course blog. Use one sans-serif font family for the text in the banner at the top and another sans-serif font for the content area of the slide. You may experiment with other fonts but check with me to assess the results. -Differentiate the two portions of the slide with different neutral backgrounds or one neutral and one light “natural” (not saturated) color. -Use the example above as a guide for font size and weight (use bold and normal weights; never thin weights since they do not read well from a distance). -In the content area of the slide, set the step name (header) in a smaller size font then for the content; under that, as needed, the sub-step (sub-head) text in the same size but bolder version of that font. -Keep all the elements of the slide in exactly the same place on all slides; this facilitates professional-level communication when presenting (keeps the slide design from interfering with the message).

Veronika Kostova fa102b

Research from the WebExcerpt

“We were able to have an idea, manifest a physical artifact of it, catalyze a social experience, and engage in a micro-learning moment that left us all feeling awestruck.”

Professor Klinkowstein

-Always use flush left justification. Do not center text. (Flush left text reads faster.) Keep track of your research on your blog and with the slide deck. The blog is for casual notes and where everything you do in this class goes first (a sort of notebook). The slides are more formal and for presentations. A slide deck (PowerPoint or similar for business-based presentation), is a device used by professionals to show development of an idea over many steps and media. They are useful in working in teams and with outside partners and when presenting to clients. They are also useful to you as part of a capabilities package when looking for an internship or your first employment. Use the directions embedded into most of the steps as a guide to what goes in your slides. 2) Theme Selection, Research and First Attempt at Product/Service Proposal All of the research steps exist to help you arrive at a proposal for a new product or service for which you will later create various trans-media elements (social media, website, etc.). To begin, look at the Institute for the Future’s website at http://www.IFTF.org/futurenowblog Select one of these posts or reports; then, select a quote or paraphrase an important concept from that post or report. Summarize your research process on your blog and on the slides to include: -IFTF.org article title and url -a quote or a paraphrasing from an important element of the from the IFTF post or report All of these steps go in your slides under the header of, “Research from the Web and Quora”.

Feb. 1 2a) Quora Research Use Quora.com to ask a question regarding your selected theme and to view related questions. This, in order to help crystallize your theme and propose a product or service arising from that theme. Summarize the Quora research process on your blog, then on the slides to include: -Quora question and any answer(s) -Related Quora questions and answer(s) All of these go under the step name in your slides of, “Research from the Web and Quora”. Example slide contents for this step: (selected post from IFTF.org) “Urgent Futures” (excerpt) “Researcher Jake Dunagan challenged the group to envision a new form of governance... “ (Quora question you ask): “What product or service might facilitate an updated version of democracy?” (related Quora question) “What has prevented technology from making Federal and State governments more transparent?" (excerpt from answer to related question): ‘Government operations are often opaque to people within the government itself. There's no real incentive for governments to become more transparent.” Note: it is possible you will not get an answer to your question on Quora. If that is the case, leave out this part from your presentation slides and just show the related Quora questions and answers. Feb. 6 2b) Draft proposal for a product or service relating to the research thus far.

Use the research thus far to write a short (no more than 12 words) product or service description based on the IFTF theme and the Quora research. Example: “A game in many formats that encourages transparency in government.” Slide to make: Step name: “Draft Product or Service Description” (with the description underneath). Feb. 6 3) User Experience Map Make Team Presentations (10-20 slides) regarding User Experience (Journey) Maps. Summarize the assigned reading briefly. Site additional related references you find (at least three). Raise three related questions (just raise the questions, no need to answer). For your team’s slides, use a format similar to the one we are using for the multi-part assignment. Team 1 http://uxmastery.com/how-to-create-a-customer-journey-map/ Team 2 https://blinkux.com/blog/the-fine-art-of-creating-experience-maps/ Team 3 http://mappingexperiences.com/ Team 4 https://www.nngroup.com/articles/customer-journey-mapping/ Team 5 http://www.tandemseven.com/journey-mapping/5-essentials-for-customer-journey-maps/ Teams

Team 1

Team 2

Team 3

Team 4

Team 5

Feb. 8 3a) Plan User Experience Map Write the text you will use in the user experience map. See provided user experience maps for typical text used in this context. You may use up to 50% of what is on the examples but at least 50% must be your own text. When completing this step in the assignment, consider your product to be a representation of a brand, not just one product. The examples of user experience maps on the course blog assume the product being portrayed in that map to be a brand or part pf a brand. A brand (the character of a company), is encountered in many more instances than one specific product. Include in your text: -Three to five bullet point descriptive phrases of the product’s users. -Three to five bullet points about the product as you currently envision it. -On and off-line instances where the user/customer would encounter the product or service in both realms. Show two to five instances for each for the following from the user’s point of view: *Consideration (of the product) *Use (of the product) *Post (product use) Slides to make for this step: Step name (header): “User / Customer Experience Map”, with these sub-headers:

Audience About the Product Encountering the Product On-Line (indicate Consideration, Use, Post-Use) Encountering the Product Off-Line (indicate Consideration, Use, Post-Use) Make as many slides as you need to list all the text (no more than 20 words per slide). Feb. 13 3b) Design a User Experience Map, Sketch Use the information above to create a User / Customer Experience Map (file size setup = 24x36”). Use the provided examples of user experience maps as s a guide, but do not copy them. Before making the digital version, make a pencil sketch of the general configuration and layout of the map, plus all of the content written in by hand (or mostly so). Use a letter-sized page as the sketching frame. Make a photo of the sketch when done to place in a slide (see below). Feb. 15 3c) InDesign file of the User Experience Map Add two or more photos to represent your users / audience. Use photos you make; photos from your own social media or stills from “indi-films”. (Do not use photos from general internet image searches.) Include simple graphic elements (circles, squares, lines, etc. or other) as needed. Add as appropriate existing and (only if time permitting) self-made icons you find or make to represent the various activities, media, etc. for the Consideration, Use and Post-Use phases.

Include a simple legend as needed. -- After the sketch is approved, execute the design in InDesign. In a new InDesign file, place the user experience map within a light gray (10-20%) 1 pt. ruled frame, with this text in the lower right-hand corner: Your name, Professor Klinkowstein Fa102B Social Media and Web Design User Experience Map Make this text 10 pt. Helvetica, flush left, longest line touching the right margin and lined up with the right edge of the light gray ruled line around the user experience map. See example below.

Print at 12x18” Slides to make:

Your Name, Prof. Klinkowsteinfa102B, Social Media and Web DesignUser Experience Map

MIKIMOTO AMERICA: CUSTOMER EXPERIENCE MAP

AUDIENCE• 36-55 female• Expect premium shopping experience• Arrive at Mikimoto committed to buy • Seek for what they have in mind• No longer tied to one retail location

• 40-65 male • High net worth individuals• Purchase jewelry as gifts• Need guidance for gift selection • Handles payment if shopping with a significant other

ABOUT MIKIMOTO• Superior quality high-end Japanese pearl jewelry• Provides different types of pearls and collections • Dominates 3% pearl market share in the high-end jewelry market • The brand aims to embody ‘Confidence’ in women

THE AFFLUENT THE GIFT PURCHASER

Organic search

Banner ads

Social channels

Paid search/ referral links

Desktop

MikimotoAmerica.com

TabletMobile

Store location Search for nearby stores or stores in a specific city/area

Pick up at the storePick up online-ordered

piece(s) at the store

Get inspirationsView new products, expert recommendation, and style advice

Browse & discoverBrowse all products by collection type, pearl type, and product type

ShareShare a product with friends and family for advice or as a way to let them know what she’s interested in

Learn about pearlsLearn about different types of pearls, quality measurement, production process and history

Wishlist Add favorite items to your ‘wishlist’ and save it for later purchase

Purchase onlineSave CC in your account. Reinforce the security during delivery. Given an option to pick up at the store.

OF

FLI

NE

ON

LIN

E (

PR

OP

OS

ED

)IN

FLU

EN

CE

R

Mikimoto retail store

Word of mouth

Season catalogue

Magazines

Browse & discoverProducts are displayed by collection type at the retail store. Explore new collections, products, and different pearl types.

Gift recommendationAsk store staff for gift recommendations

?

Events

Try-onAsk store staff to prepare and help with try-on. Understand details such as size, length, and luster of product(s)

Ask questionsStore staff would answer any questions with a deep knowledge of pearls and their products

?Learn about pearl careGet educated on how to take care of the pearls

PurchasePay with a credit card

Enter the storeWarmly welcomed by the doorman and the staff talks to you “Let us know if you need any help”

Wear the piece(s)

My collection View all pieces purchased and recommendations on complimentary piece(s)

RECOGNITION PURCHASE POST-PURCHASECONSIDERATION

Product updates & Event invites

Purchase confirmation Receive a ‘Thank you’ message and information on how to take care the piece(s)

HIGHLIGHT

- Brand promise- Exclusive product offering

Customer service-driven, premium shopping experience

- Product quality - Product exclusiveness- Product availability

- Ease of purchase - Security guaranteed

Trustworthy relationship with the store staff

Personalized recommendations based on customer’s purchase history

Legend: Offline Online Customer data

“User / Customer Experience Map” with the image of the final map (omit the rule around the map and your name etc. in the lower-right corner). Sub-heads: Planning Sketch Final Design -- InDesign file and print due Feb. 22 -- 4) Create a Mobilize Community / Group (research site) to Generate Further Research which may assist in Generating a Name for the Product of Service and also Gather Suggestions for Possible Features or Alterations to what was to this point envisioned. Go to https://mobilize.io/ to create a free account. Mobilize is a groupware website tool used by organizations to create ad hoc communities for (among other things), research. This site is not a consumer / promotional site but a group discussion tool. -In Mobilize Groups are part of a Community, each community can have multiple groups. For this assignment, you just need to have one group which is automatically created upon signing up for Mobilize and naming your community. -Choose a simple (maximum three words) name for the Mobilize Community (research site). This is not the product name, but a short descriptive statement regarding the general theme of your product or service (for instance, “Transparent Governing”).

-For Network Type, choose “Other” and for members, “0-500”. -Skip the Invite Your Team dialog box (this would be for a situation in a company where you had others managing the Community; in our case, you manage the community).

-From the next screen, invite *any combination of five class members and those outside the class to be part of your community / group. (*At least one member has to be from outside the class.)

-Click Send Invite to the new members

Once they respond to the invite, they will appear as members.

-Click on the Lounge icon

-Under Files, upload your finished User Experience Map

-Under Feed, post (and send) a message asking your members to post comments in Feed regarding your User Experience Map, and also asking them to take the poll. Don’t use my questions / words, make up your own.

-Create a Poll

Don’t use my questions / words, make up your own.

-Customize your community / group with a Group Logotype Use a closely cropped image (100 x 100 px) of the first letter(s) of the name of your network as the logo for the site. Choose a font which is easily legible at this small size, but which is also distinctive. Choose a font which may lend itself to being legible and distinctive when the entire name for the product or service is spelled out as a full logotype in the later stages of the assignment. Try at least three versions before settling on one. Keep all versions to post in your slides. Use Photoshop to create the group logo, 100 x 100px with a solid or other background (remember, the logotype needs to be legible).

-- Create a welcome message explaining the purpose of this research website and include a description of the product or service as adapted from the text you used for this in the User Experience Map.

-- Make slides (one for each using screen shots): -Showing the home page -Showing your announcement to members in Feed soliciting feed-back and poll-taking -All the Members -The name and logotype on the first page of your Mobilize site. -Poll Results Have all your Mobilze research group results by March 8 5) More Detailed Product or Service Description Based on results up to and including step 3 (everything from the Mobilze site, plus all the research previous to it), write a more detailed 25-50-word product (or “company”) description which you will later use on your Facebook product page to be activated with an editorial calendar. Look at examples from other established companies and what they have to say about themselves in their Facebook pages. Examples: 1) “Tesla’s mission is to accelerate the world’s transition to sustainable energy by designing and manufacturing the best electric vehicles and energy storage systems.” 2) “SpaceX designs, manufactures and launches the world’s most advanced rockets and spacecraft. The company was founded in 2002 by Elon Musk to revolutionize space transportation, with the ultimate goal of making life multiplanetary. In 2010, SpaceX became the first commercial company in history to send a spacecraft into orbit and

return it safely to Earth. In May 2012, SpaceX again made history when its Dragon spacecraft became the first commercial vehicle to successfully attach to the International Space Station, something previously accomplished only by governments. In October 2012 and March 2013, Dragon again successfully delivered cargo to and from the space station in its first two official cargo resupply missions for NASA.” -- Slides to make: Find three existing FB product (company) descriptions. Show these on three slides with the header, “Product or Service Description FB Page Research”. Also make a slide with this header and content: “More Detailed Product Description” (Add your new product or service description underneath.) March 13 6) Create Logotype Create a logotype (not a logo) from the name which came from your Mobilize research group. A logotype is composed of letters (not a symbol). Create at least three alternate logotypes with three different fonts. Justify your choice of the fonts by comparing your font choice to three other products or services that you suspect will appeal to a similar segment of the population. -- Create the logotype first in black and white. Once the logotype is finalized, choose one color plus one or more neutrals to apply to the logotype. Slides to make: Under step name, “Logotype”, show: -“All logotypes” (one slide of all three logotypes you created).

-“Final Logotype and Justification” (one or more slides with justification as to why that logotype was chosen, include the three similar-population-segment logotypes you found). March 13 7) Create an Editorial Calendar and a Branded Facebook Page to Launch the Proposed Product or Service Use the example below as an organizational template to create a plan for three days, maximum five days of posts on a branded Facebook page for your proposed product or service. Include at least one of each of these sorts of posts in the three-day campaign: -Teaser: choose words, links, visual, videos, etc. so as to build interest/suspense -Engagement: giveaways, games, discounts, etc. -Product Information: “reveals” over multiple days as to the specifics of the new product or service. Do not replicate my example; think of your own plan and fill in the editorial calendar to engage the target cohort with the launch of the proposed product or service. (Make the calendar in Word, Excel, InDesign or Illustrator)

March 15 7a) Facebook Page Create and populate the branded Facebook page with your logotype. The logotype should be 180x180 pixels. Brand the page with the logotype (assignment 8) on the first page. Use the detailed product description text from 5 above for the “About” text. As a cover photo, choose a quality image you make, or one from your own other social media sources, or one from an unknown film still which exemplifies a typical user as you envisioned her/him for the User Experience Map. Don’t use generic internet images. This should be 851 pixels wide and 315 pixels tall, 72dpi (check online for most current FB specs for the cover image, since these tend to change often). Get at least 10 people to Like the branded Facebook page. Execute your editorial calendar, day by day. Slides to make: Under step name, “Facebook Page”, show: -Facebook homepage -All three postings -Any representative comments received Finish by March 29 7b) Print of all slides to date 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 (20 slides per print). In the lower right, longest line flush with the right edge of the right most column of slides, include this text in Helvetica Medium, 10 pt.:

Your Name Fa102b, Professor Klinkowstein Transmedia Research and Design If you need to make more than one print to accommodate all of the slides, do that.

8) Create a user website visual prototype Plan and design a user website homepage for your proposed product or service. Begin by locating three existing contemporary-design websites, which match the demographic of your product but not necessarily the product category. Use these as design inspiration.

Example:

April 3 8a) Make a “wireframe” of the homepage as a planning device to show position and content, but not visual design (see wireframe example). Use Illustrator or InDesign. Use your reference sites as inspiration but do not copy them.

Wireframe example:

The homepage design should incorporate: -Your logotype -At least five links that make sense for your product offering -Appropriate image(s) you make, or you find in your own social media feeds. You may also use indi-film stills. -Any other features that add to the design aesthetic and/or are appropriate to the product offering. -Make the wireframe 1280 x 780 px. Use Illustrator or InDesign. April 5 8b) Closely study the kind and type of font used in your examples as a guide in your design. Make the website homepage prototype 1280 x 780 px. Use Photoshop. April 12

Photo 1

Photo 2 Photo 3 Photo 4

Logotype Watch Sections Photos Videos Topics Crime Politics Opinions Cuture Art More Social Media Links

8c) Make a secondary page (lower level screen), which would result from scrolling down or selecting one of the homepage links. -- Create slides for all the above: Three slides with the header, “Website Research” One slide with the header, “Website Wireframe” Two slides with the header, “Website Prototype Design” April 17 8d) Use Invisionapp.com to make a clickable prototype employing the home screen and one or more lower level screens. Invisionapp.com Tips: -sign on: -sign up for free -Click plus sign upper right to start

-Create new prototype

-Choose Desktop

-Add a project name

-Select build mode at middle / bottom of screen to add hot spots / link screens

-Drag and drop to upload secondary screen(s)

-Link to secondary page(s)

-To make a URL from the finished prototype, select Share

-Then, Link Settings lower right

Then Copy to get the URL that will make the prototype accessible via a public URL

April 19 9) Create a professional quality display print to show a summary of project results. Using the template below as a guide, design a 12x18” print that summarizes the elements in the project. Display prints are used in client and partner presentations to show the sweep of work within a project that has numerous media components. The template shows suggested / approximate placement. You may try other layouts. Note: The outlined rectangles in the template below are to show approximate positioning only. When you make your InDesign file, do not draw outlined rectangles, except when there is no tone at the edge of an image. In that case (in order to define the edge of an image), show a one point, medium to light gray rule at that edge.

Include these elements in your display print: -At the top of the layout as an introduction / header, show this text: Transmedia Projects, including research, research website with embedded video and poll, branded social media with editorial calendar for future product or service and prototype website. FA102B, Social Media and Web Design, your name, Professor Klinkowstein. -- Set this text in 14 pt. Helvetica Bold, flush left. Include these elements (below) in an aesthetically appropriate layout (each element in the layout should be surrounded by a light gray 1 pt. rule if the image itself does not define that space completely (i.e., one or more edges are white). Make all the captions 8 pt. Helvetica (not bold). What to include in the display print under the introduction / header text: -IFTF.org screen shot of article title and associated image. -Quora logo screenshot, screenshot of Quora question, any answer(s). Also: screen shot of related Quora questions and answer(s). Under these three elements one caption that reads: Research using Institute for the Future website and Quora. -Each slide from the Mobilize group site-embedded slide presentation (omit the banner at the top of the slides). Caption under reads: Embedded slide show video. -Screen shot of Mobilize research group site’s main page. -Screen shots of three of the most useful comments from the Mobilize research group site.

-Screen shots of poll and poll results. Caption under these: Mobilize research group site. -User Experience Map (without your name, etc. in the lower right corner). Caption under: User Experience Map -Branding elements, including the naming process and final name. -Logotype Caption: Branding elements -Facebook Editorial Calendar -Facebook product page including logo, cover photo and one or more of the postings as per the editorial calendar. Caption: Editorial calendar and Facebook page for proposed product or service. -Website prototype Show wireframe and two visual design screens. Caption: Website wireframe and visual design. Print at 12x18”.

10) Behance 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. (Hand-in URL on a Word doc. on USB stick or CD at the time and day of the final) April 24