Prototype Project. Table of Contents PROPOSAL APPENDIX A & B USER PERSONAE (APPENDIX A) USABILITY TEST PLAN & REPORT (APPENDIX B) APPENDIX C & D

Transcription

1 Prototype Project Table of Contents PROPOSAL APPENDIX A & B USER PERSONAE (APPENDIX A) USABILITY TEST PLAN & REPORT (APPENDIX B) APPENDIX C & D PRINT RESUME (APPENDIX C) GANTT CHART (APPENDIX D) APPENDIX E - J HOME PAGE WIREFRAME & NOTES (APPENDIX E) PR WRITING WIREFRAME & NOTES (APPENDIX F) GRAPHIC DESIGN WIREFRAME & NOTES (APPENDIX G) RESUME WIREFRAME & NOTES (APPENDIX H) ABOUT WIREFRAME & NOTES (APPENDIX I) CONTACT WIREFRAME & NOTES (APPENDIX J)

2 TO: Jeff Ritchie FROM: Megan Schoch RE: Proposal and Paper Prototype DATE: December 12, 2011 Dr. Ritchie, M E M O R A N D U M The following proposal outlines the details for the development of Megan Schoch s digital portfolio. These documents regard all of the written content, research, features, and functions of the site. The proposal is presented in five parts: an introduction, problem analysis, audience analysis, project description, research plan, qualifications, work plan with schedule, resources required to complete project, budget, works cited, closing, and appendices. The appendices include user personas, a usability test plan, my print resume, and the paper prototypes with notes. Each of these sections assist in representing that the site fulfills its purpose for the client as well as meeting the needs and expectations of the audience. Please write me an at mjs011@lvc.edu or contact me by phone ( ) if you have any further questions. Thank you for your time and consideration. Sincerely, Megan Schoch Attached: Proposal Proposal: The Development of Megan Schoch s Digital Portfolio The following proposal and paper prototype represents all of the information that is needed in order to represent to Simon and Co. and other advertising companies that the client s digital portfolio will meet all of their needs and expectations. It provides specific information regarding the content, graphics, and features that will be included on the site. It also includes the methods and research tactics that were used in order to gather information for Simon and Co. and similar audiences. Finally, it includes all schedules and plans that were needed in order to develop and complete this project. Problem Analysis The client is attempting to represent their qualifications and skill level to their audience in order to obtain an interview and possibly a future employment position. They are

3 searching for a way to catch and keep their audience s attention. A website will best demonstrate the client s collection of work, their technological abilities, and their HTML knowledge. A website would be the best portfolio technique because it is relatively inexpensive compared to print or CD-ROM. Due to various changes and substitutions on a portfolio, constant change is necessary at all times. Websites give the client the opportunity to easily add or subtract any unwanted information with relatively no cost. Print and CD-ROM will become expensive after several copies and revisions that are made to the portfolio. A domain name would cost approximately $12 per year and hosting would cost approximately $60 per year, these costs combined are relatively small compared to those of print or CD-ROM s. Audience Analysis The audience groups includes both the primary and secondary audiences: The primary audiences are individuals who are responsible in the hiring and firing of applicants in the field of advertising. These people are always looking for a fresh set of eyes and ideas. They need interns and employers that they can rely on and that can also bring creative ideas to the table. They need to keep their employees focused, organized, working to their full potential, and also continually learning. To accomplish this, their employees must be willing to work hard and also should have some experience and a lot of knowledge in the field. They must be willing to take instruction and follow orders, as well as working independently. Based on the field of advertising, the primary audience should have a background in the field, have the ability to manage their employees, and follow leadership roles. Jennifer Simon of Simon & Co. is interested in the project in order to determine whether the client fulfills her needs and qualifications. She will use this project in order to determine whether she would like to contact you for an interview, then possibly a position at Simon & Co. The secondary audience includes individuals who have affect or impact on the primary audience. These people include Karyn Andersen, whose profile is included within this section. They have to understand what the primary audience is doing in order to do their job. These are people such as other employees within the company or other workers in the branch of advertising. They especially need to know any knowledge about any new developments so that they are able to perform their job effectively. The secondary audience, such as Karyn Andersen, will use this project in order to determine whether the client fulfills their needs and qualifications in the field of advertising PR. The successfulness of this project will then determine whether the secondary audience would whether like to contact you for an interview, then possibly a position at their company. This section also includes a full user personae s in Appendix A, which includes the audience s name, age, home, bio, motivations, needs, and technology/platform.

4 Project Description This project is for Megan Schoch so that she can forecast her qualifications to Jennifer Simon at Simon & Co. and any other potential employers in the field of advertising PR. I will present the project in an HTML format using Adobe Dreamweaver. The following ordered list contains the sections I plan on including into the project: 1. Megan Schoch s Digital Portfolio a. Home Page: will contain the most important information on the site, which is the client s work. It will provide thumbnails and short summaries of the work presented on the page, if the user clicks on the thumbnail then it will take them to either the graphic design or writing samples sub-page to see more examples and read more. b. Writing Samples Sub-Page: will contain 3 categories of writing samples, under each category lies an example summary and thumbnail. Users may either read more or click the thumbnail in order to see the document in full. c. Graphic Design Sub-Page: will contain thumbnail examples of graphic design work completed by the client. It will be clickable in order to make the image larger, also will include the name of the piece and an option to read more which will describe the piece in full. d. Resume Sub-Page: will contain with a summary of the client s education, experience, skills, and references relevant to the field of advertising. Icons for both PDF and HTML files will be provided so that the user can open the document into another window. e. About Me Sub-Page: will contain a short biography as well as a picture so that the audience is able to put a face to a name. f. Contact Sub-Page: will contain the client s address, telephone number, address, and social networking links. Research Plan In order to gain more knowledge about the audience, research was not only necessary, but also required. Most of my research was done on the web through trade journals, professional organizations, social networking websites, and also several career databases. Researching through trade journals helped me determine what is involved in the field of advertising. Social networking websites such as Facebook, allowed me to read a brief synopsis of advertising companies who had internship or employment position opportunities. These social networking websites then provided the organizations website link so that I was able to research further. Finally by researching on career databases, I was able to get a more detailed description of what the audience is requiring, preferring, and descriptions of the position itself. In order to investigate further, a usability test plan was performed on similar audiences. This usability test is presented in Appendix B, which outlines a proposed usability test and provides a brief script for the test.

5 Qualifications My qualifications for this project are as follows: My education and experience has equipped me with several types of skills and knowledge, which relates to the field of advertising. I have developed strong communication, presentation, and software skills through my education and former experience. My software skills include experience in Adobe Creative Suites as well as Microsoft Office. o My knowledge in Adobe Dreamweaver is especially necessary for this project. By majoring in a communications field, the courses that I have completed pertain to several of the client s needs. By majoring in Digital Communications, the courses that I have completed have assisted me in acquiring knowledge about each field of digital communications. o These fields include design, communications, business, and programming. o For example, courses such as Principles of Information Design and Writing for Digital Media have taught me the principles of user-center design and customer behavior. These courses have taught me several skills in order to meet specific customer goals and how to target specific audiences. These principles that I have learned and practiced will be helpful because I will be able to contribute to social networking, create new marketing opportunities, and assist with marketing opportunities for you target audience. The entire list of courses and their descriptions are enclosed in my resume information. I have also held several positions in customer relations and sales, which has allowed me to excel in my communication and presentation skills. Also, being a collegiate athlete has provided me with leadership skills, how to work efficiently in large groups, and how to compromise with other individuals. This section also includes a print resume in Appendix C, which includes the client s education, experience, skills and references. Work Plan with Schedule The process of creating and completely the project will require a great deal of research and time. In order to work efficiently, I must use my time management skills and develop a work plan with a schedule. The following includes a comprehensive list of all tasks that are needed in order to complete this project. This section also includes a GANTT chart in Appendix D, which indicates important milestones and scheduling task. Research Phase 1. November 29: Hold a client planning meeting 2. November 29: Storyboard a concept to the client 3. November 30: Get concept approval

6 4. December 2: Determine the client requirements and preferences 5. December 4: Define the project scope 6. December 10: Determine strategy 7. December 13: Determine technical and hardware materials needed Design Phase 1. December 15: Create a site map and workflow determining the overall design of the site and the audiences thought process 2. December 16: Create page layouts 3. December 24: Perform a usability test on each of the wireframes 4. December 27: Determine what needs to be changed on the wireframe when writing the usability test report 5. December 28: Run a final usability test in order to determine the wireframes effectiveness and to make final changes 6. December 30: Hold client meeting in order to determine final page layout Production Phase 1. January 2: Determine the all graphics, content, and final layout that will be used for the site 2. January 3: Finalize page details such as colors, font type, placement, font size, etc. 3. January 6: Prepare materials/recourses needed in order to complete the project 4. January 7: Develop the project in Adobe Dreamweaver 5. January 19: Revise and edit the project 6. January 21: Hold a client meeting in order to show the client their final product 7. January 25: Determine whether the project meet the client s needs and requirements These dates are not set, but are tentative around Megan Schoch s schedule. Resources Required to Complete Project In order to complete this project, I will need to use my laptop that has both Adobe Creative Suites and Microsoft Office. These programs will be used in order to develop the workflow, site-map, graphics, and eventually to develop the final product. Finally, I will need to purchase both a hosting and domain name in order to present the final project. Budget I calculate the cost to develop this project by assuming that labor will cost $50.00 per hour. Approximately 80 hours will be spent and will therefore cost approximately $4,000 in labor expenses. The cost of a domain and hosting name will run at approximately $72.00 total per month. Also indirect costs such as the client s computer and software are calculated to cost approximately $2,200. The project will cost $6, total:

7 Website domain and hosting name ($72.00/year) $72.00 Labor (80 $50.00/hr) $4,000 Indirect Costs $1, & $700.00) $2,200 TOTAL $6, Works Cited ANA - Association of National Advertisers N.p., n.d. Web. 7 Sept < AAF-The Unifying Voice for Advertising. N.p., n.d. Web. 7 Sept < "Digital Communications - Courses." Lebanon Valley College. N.p., n.d. Web. 28 Sept < IAA. IAA. N.P., n.d. Web. 7 Sept < Internships and Internship Guidance Internships.com. "Marketing/Sales/Advertising Intern For Online Retailer Opportunity. N.p., n.d. Web. 13 Sept < Online-Retailer>. Simon & Co. - Simply Delicious. Get To Know Us. N.p., n.d. Web. 13 Sept < Closing Thank you for your consideration of this project, I look forward to your evaluation of the proposal and paper prototype. I would love to have the opportunity to sit down with you in order to further explain my qualifications and reasoning s for why I believe I would be successful in developing this project. Please write me an at mjs011@lvc.edu or contact me by phone ( ) if you have any further questions. Appendices The following appendices include all external documents that are referenced in the proposal: A user personae (Appendix A), which will include the audience s name, age, home, bio, motivations, needs, and technology/platform. A usability test plan and report (Appendix B), which outlines a proposed usability test and provides a brief script for the test. A print resume (Appendix C), which will include all experiences and qualifications of the client.

8 A GANTT Chart (Appendix D), which will indicate the schedule of tasks and milestones. In their own section, paper prototypes and prototype notes are included and will be labeled as an appendix (Appendix E-J), this section will include the proof of the concept that the proposal is illustrating.

9 Appendix A: User Personae (Primary Audience) Name: Jennifer Simon Age: 32 Home: Wilmington, DE Bio: Jennifer is a white 32- year-old woman who works and lives in Wilmington, DE. She graduated from Temple University in Philadelphia with a BA in Communications. After college, she then spent two years studying advertising at the Portfolio Center in Atlanta, Georgia. She started her career with the intention of developing product lines and improving marketing efforts for well-known companies in New York. She began and continued to work within the food industry. Due to significant improvements in the industry, she was featured in the 2002 holiday edition of O, The Oprah Magazine. Before opening her own company, Jennifer was the Senior Product Manager for the gourmet food and gift basket division of 1800Flowers.com. She had a huge impact on the department and its sale numbers. She achieved huge amounts of success with her innovative designs and products, including the Martha Stewart gift basket and food line for 1800Flowers. After working in New York City for 11 years, Jennifer decided that she was ready to move back to her hometown and develop her own company, Simon & Co. Motivations: Jennifer is looking for an intern who can contribute to daily website operations, create social networking opportunities, and monitor/post on blogs, forums, and social networks. They should assist in creating new marketing and advertising opportunities. Including open houses, promotional events, and networking events. They should be able to market to potential customers and communicate with current customers. Assistance with s, promos, and advertising is desired. Needs: Jennifer wants an intern who has strong communication skills, written and verbal. They should be majoring in communications, marketing, journalism/pr, business/entrepreneurship, or advertising. They need to be able to work independently but also able to take direction. Must be organized and interested in

10 online marketing. They must be able to commit to a semester and she would prefer a junior or senior undergrad. Technology/Platform: Jennifer owns a 15-inch MacBook Pro OS 2010 and uses the company wireless connection. Jennifer needs an intern who is familiar with the web, social networking sites, Microsoft Office, Adobe creative suites, and is able to format/efficiently use databases. User Personae (Secondary Audience) Name: Karyn Andersen Age: 29 Home: Naperville, IL Bio: Karyn is a white 29-year-old woman who works and lives in Naperville, IL. She graduated from Indiana University in Bloomington with a BA in Advertising. After college, she held a few jobs in downtown Chicago doing some works in PR and Customer Service. She now works in the advertising sector of RR Donnelley in Illinois. She helps develop advertising campaigns for clients, whether they are big or small. She strives to get maximum results from client s investments, keep the campaign cost efficient, and effectively target the client s intended audience. She is looking for an intern who will become a part of the creative team of RR Donnelley, as well as being eager to learn in the field of Advertising. Motivations: Karyn believes that those in the field of advertising should of majored in the field of communications, marketing, journalism/pr, business/entrepreneurship, or advertising. They should have a passion for advertising, traditional and non-traditional. Needs: Karyn believes that someone in advertising needs to have very strong communication and presentation skills. They should be able to communicate verbally and in written form, and should be very persuasive in their presentations. They should pay close attention to detail and come to work with the knowledge of critical thinking skills. They need to be able to work independently, in a work atmosphere, and also take direction. Lastly, they need to be organized individuals.

11 Technology/Platform: Karyn owns a 13-inch MacBook Pro OS 2011 and also a ipad 2, provided through RR Donnelley. She uses wi-fi and 3G in order to use the Internet and applications. She needs an intern who is comfortable with Microsoft Office, Adobe Creative Suites, and basic computer functions such as web surfing and . Appendix B: Usability Test Plan -Who will be the test subjects? The first test subject will be a current LVC student who is a digital communications major that held an internship position. The second test subject will be an LVC student who is a DCOM major but has not obtained an internship position. Lastly, I will perform a test on one non-dcom student in order to compare results. I will perform the test on three students total, one being a non-dcom student and the two others being DCOM students. -What is the purpose of the test? The purpose of this test is to determine whether the wireframe satisfies the users motivations. It needs to be focused, organized, and easy for the user to navigate to the information that they want. This will also determine whether the wireframe has relevant information and this information is located in places whether users can easily find and identify it. -What specific test tasks will the users perform? Users will identify which areas that they would visit first; this will determine whether I have placed this information in a spot of importance or hierarchy. I will then continue to have them determine which places of the site they would plan on traveling to. I would have them time them to see how long it takes them to get to what information was most important in my opinion, then have them provide a rational for why they did or did not chose this location first. -What is data going to be collected? I would collect likert scales, which they would determine on a 1-4 scale of how their overall experience was using the wireframe. -How will you evaluate the data?

12 By performing likert scales, I am able to determine what the users overall experience was of the wireframe (site). I will be able to determine how effective the wireframe is and if the most important content is placed correctly. By performing tests on both DCOM and non-dcom students, I will then be able to compare and analyze these results and determine what needs to be removed or changed on the wireframe. -Provide a script of the usability test. 1. Introduction: tell the subject This test will be used in order to determine the effectiveness of the wireframe itself and how it is used by its subjects. It will not be a determination of your particular performance using the wireframe. 2. Action: Users will sit down and begin evaluating the wireframe. 3. Question: What do you believe to be the most important content on the page? Why? 4. Action: I will be timing them on how long it took them to arrive at my expected subpage or piece of important information. 5. Action: Then will have them continue determining which areas of the wireframe that they would visit based on its importance. 6. Question: Does the wireframe present easily understood labels? If not, explain on which ones are not clear. 7. Question: Based upon the labels, what content do you expect to be presented in each of them? (Have them tell me the label and the expected information that will be provided). 8. Question: Do you believe that the layout and setup of the wireframe is easy to navigate? If you would change anything, what would you change? 9. Question: Do you believe that the most important content is prominently featured? If not, what do you believe I can do in order to accomplish this? 10. Action: After the evaluation is done, I will have them fill out a likert scale ranging to 1-4 in order to determine their overall experience with the wireframe.

13 Usability Test Report According to my findings, the test subjects had an overall pleasing experience when using the wireframe. The believed that the wireframe labels were easy to understand and clear enough that users could predict accurately what content would be provided under these labels. They also believed that the layout and setup of the wireframe was logical and easy to navigate. By presenting clear and focused labels, users were able to determine where information was stored. Users believed that presenting a preview into my student work on the home page was a smart decision. Each test subject agreed that the student projects would be the most important content provided within the wireframe. Therefore, by promoting it on the home page was a smart and effective way to prominently feature the most important content. After the test was performed, subjects were asked to rank their overall experience with the wireframe on a likert scale. All threetest subjects ranked their experiences as a 4, meaning most pleasing experience. Therefore, I believe that my wireframe is proven to be effective for not only my target audience, but also for other audiences who may be looking at the online portfolio. After performing the tests, I determined that my wireframe is close to its final draft. Although it is lacking the final content and graphics that will be included, the test subjects seemed to have a pleasing experience when using the paper wireframe. One test subject brought up the rule of 7 +/- 2 in terms of the local navigation labels. Although I believe this is a valid point, I do not think I would add three more tabs to my wireframe. Instead, I subtracted the student projects label and made PR writing and graphic design tabs. I want the users to have clear, focused, and condensed labels that will allow to them

14 to easily navigate and determine what content is located in each section. The other aspect that I changed from my previous usability test is in terms of the data collection. In my previous test plan, I believed that it would be most effective to perform a likert scale and stopwatch metrics on each test subject. After testing, I determined that it took the test subjects hardly any time to determine the most important content on the page; therefore performing stopwatch metrics was close to pointless. I will soon develop the final wireframe in Photoshop in order to insert the required content, graphics, and layout aspects to the wireframe.

15 Appendix C:

16 Appendix D:

17

18

19 Appendix E: 1.1: The brand bar will include the client s first name in the format of a logo 1.2: The local nav. will include the labels: writing samples, graphic design resume, about, and contact The PR writing section will include examples of persuasive writing, public service announcements, and press releases. The graphic design section will include examples of projects developed in programs such as Photoshop, InDesign, or Illustrator. The resume section will include the clients experience, education, skills, references, and also an external link for a PDF and HTML versions of the resume. The about me section will include a biography/personal information about the client as well as a picture of them. The contact section will include the client s address, phone number, , and social networking links so that the audience is able to reach them easily. 1.3: The four thumbnails present the audience with a picture/preview of the clients writing samples or graphic designs. The thumbnail will be clickable in order to bring the audience to the actual writing samples or graphic design sub-page to see more and also to view the images larger if they chose to do so. 1.4: The area of space next to each thumbnail includes an abstract/summary for each thumbnail and the work that is include. The thumbnails will be clickable in order to bring the audience to the actual PR writing or graphic design sub-pages so that they can see more works, view the thumbnail in full-size, and read more descriptive summaries about the works. 1.5: The footer will include the client s name and a link to their contact information, which will include their address, phone, , and social networking links. This section will be constant on every home and sub-page of the website.

20 Appendix F: 1.1: The brand bar will include the client s first name in the format of a logo 1.2: The local nav. will include the labels: writing samples, graphic design resume, about, and contact The PR writing section will include examples of persuasive writing, public service announcements, and press releases. The graphic design section will include examples of projects developed in programs such as Photoshop, InDesign, or Illustrator. The resume section will include the clients experience, education, skills, references, and also an external link for a PDF and HTML versions of the resume. The about me section will include a biography/personal information about the client as well as a picture of them. The contact section will include the client s address, phone number, , and social networking links so that the audience is able to reach them easily. 1.3: These labels describe what kind of writing sample the client is presenting. 1.4: These short descriptions provide the user with a summary of what the writing sample is about. They then have the option of read full text in order to read the entire writing sample. There are also sample thumbnails that correlate with the type of writing sample that is presented. 1.5: The footer will include the client s name and a link to their contact information, which will include their address, phone, , and social networking links. This section will be constant on every home and sub-page of the website. 1.6: The header will include a short and focused label to describe the content that is included on the page.

21 Appendix G: 1.1: The brand bar will include the client s first name in the format of a logo 1.2: The local nav. will include the labels: writing samples, graphic design resume, about, and contact The PR writing section will include examples of persuasive writing, public service announcements, and press releases. The graphic design section will include examples of projects developed in programs such as Photoshop, InDesign, or Illustrator. The resume section will include the clients experience, education, skills, references, and also an external link for a PDF and HTML versions of the resume. The about me section will include a biography/personal information about the client as well as a picture of them. The contact section will include the client s address, phone number, , and social networking links so that the audience is able to reach them easily. 1.3: These thumbnails are examples of several works that the client has made on Adobe Programs. If the user clicks on the thumbnail then the graphic will be maximized to its full size. An icon is provided in order to inform the user that the image can be enlarged. 1.4: These short descriptions explain the projects name and a link that the user can read more about the project. 1.5: The footer will include the client s name and a link to their contact information, which will include their address, phone, , and social networking links. This section will be constant on every home and sub-page of the website. 1.6: The header will include a short and focused label to describe the content that is included on the page.

22 Appendix H: 1.1: The brand bar will include the client s first name in the format of a logo 1.2: The local nav. will include the labels: writing samples, graphic design resume, about, and contact The PR writing section will include examples of persuasive writing, public service announcements, and press releases. The graphic design section will include examples of projects developed in programs such as Photoshop, InDesign, or Illustrator. The resume section will include the clients experience, education, skills, references, and also an external link for a PDF and HTML versions of the resume. The about me section will include a biography/personal information about the client as well as a picture of them. The contact section will include the client s address, phone number, , and social networking links so that the audience is able to reach them easily. 1.3: The headers will include labels to describe the sections that are included on the page. 1.4: This text is a full representation of the clients resume. 1.5: The footer will include the client s name and a link to their contact information, which will include their address, phone, , and social networking links. This section will be constant on every home and sub-page of the website. 1.6: The header will include a short and focused label to describe the content that is included on the page. 1.7: These icons present the user with the option to open the resume in a PDF or HTML file.

23 Appendix I: 1.1: The brand bar will include the client s first name in the format of a logo 1.2: The local nav. will include the labels: writing samples, graphic design resume, about, and contact The PR writing section will include examples of persuasive writing, public service announcements, and press releases. The graphic design section will include examples of projects developed in programs such as Photoshop, InDesign, or Illustrator. The resume section will include the clients experience, education, skills, references, and also an external link for a PDF and HTML versions of the resume. The about me section will include a biography/personal information about the client as well as a picture of them. The contact section will include the client s address, phone number, , and social networking links so that the audience is able to reach them easily. 1.3: This picture represents to the user what the client looks like. 1.4: This information includes the client s biography/personal information to the client. 1.5: The footer will include the client s name and a link to their contact information, which will include their address, phone, , and social networking links. This section will be constant on every home and sub-page of the website. 1.6: The header will include a short and focused label to describe the content that is included on the page.

24 Appendix J: 1.1: The brand bar will include the client s first name in the format of a logo 1.2: The local nav. will include the labels: writing samples, graphic design resume, about, and contact The PR writing section will include examples of persuasive writing, public service announcements, and press releases. The graphic design section will include examples of projects developed in programs such as Photoshop, InDesign, or Illustrator. The resume section will include the clients experience, education, skills, references, and also an external link for a PDF and HTML versions of the resume. The about me section will include a biography/personal information about the client as well as a picture of them. The contact section will include the client s address, phone number, , and social networking links so that the audience is able to reach them easily. 1.3: This information presents the client s address, phone number, address, and social networking information to the user. 1.4: The header will include a short and focused label to describe the content that is included on the page. 1.5: The footer will include the client s name and a link to their contact information, which will include their address, phone, , and social networking links. This section will be constant on every home and sub-page of the website.