randolph portfolio, 1st iteration, usability test

?Tressa Randolph Portfolio

1

2Table of Contents

Introduction / Executive Summary

Portfolio Website

Test Plan / Method

Test Scripts / Materials

Results

Findings

Conclusion and Recommendations

Home Page

Participant Characteristics

Orientation Script

Initial Questions

Sample Portfolio Page

Method

Test Script

Assigned Tasks

Resume Page

List of Tasks

Scenarios

Additional Notes

Test Environment, Tasks of the Moderator, Data Collection & Results

Post-Test QuestionsQuestionairre Data

2

34

7

11

17

2627

3Introduction/Executive Summary

USABILITY TEST PLAN

PURPOSE & GOALS OF THE TEST: Prior to the completion and upload of the portfolio website, it has been determined that usability testing is necessary to improve both design and usability of the site. The primary purposes of this website are: to clearly communicate skills and experience to prospective employers, to provide contact information, and to provide inspiration.

THIS TEST WILL FOCUS ON THREE AREAS:

• Assess the ease of navigation and emotional response for target users• Determining the areas of focus and visual response• Determine obstacles, problems, and gather suggestions for improvement

> Table of Contents

RESEARCH QUESTIONS: This study will attempt to answer the following questions:

1. Is it immediately clear to the user that the website is a portfolio website? 2. What is the initial emotional response to the website color & design? 3. Is the navigation intuitive to find and use? 4. What pages/navigation first draws the users interest, which the second, and so forth? 5. What path does the user take as they navigate to a specific goal? 6. Are there any obstacles to the navigation? 7. What is the emotional/intellectual response to each of the different sections of the portfolio? 8. Emotional response to images? 9. Is the user interested in finding the contact information and are they able to find it with ease?10. Does the user seek out social media information/use social media navigation?11. What questions does the user ask and what opinions/suggestions does the user have?

3

4Portfolio Website

HOME PAGE

1

I am currently in the process of attaining my Bachelors in Web Design and Interactive Media from The Art Institute of Seattle.

I believe that empathy, a solid foundation in the principles of design, and an appreciation for story telling are all vital to creating great, user-friendly, design.

If you have questions or are interested in a free quote, please feel free to contact me.

ABOUT ME

Contact [email protected]: https://www.facebook.com/tressa.frederickrandolph

Web & Interactive PhotographyIllustrationPackagingPrint Resume

4

> Table of Contents

5Portfolio Website

PORTFOLIO PAGE

25

1 2 3 4 5 6 7

INTERNATIONAL MOVIE DATABASE - APPLICATION

International Movie Database > Application > Top Ten in United Stages

HOME

Web & Interactive

Cottage Window Rabbitry

The House Of Prayer

Rhiannon’s Delights

Craigslist

International Movie Database

Murder mApp


Contact [email protected]: https://www.facebook.com/tressa.frederickrandolph

This class challenge was to create a layout design for a large quantity of data. The medium could be print, digital, or an application. I chose the International Movie Database (IMDb) as the end client for the application because it was the optimal outlet for the data base information covering the Top Ten

Movies Worldwide by Country. The project began with large quantities of research and number crunching followed by sketching and refining ideas. The end result is an interactive application for the IMDb website that would allow tablet users to see how thier favorite movies rank worldwide.

5

> Table of Contents

6Portfolio Website

RÉSUMÉ PAGE

69

View Resume

Tressa Randolph

[email protected]

425.297.3614

Education

Skills

Experience

Work History

The Art Institute of Seattle 2009 - PresentWeb Design, Bachelor of Science

Edmonds Community College 1996 - 1999Associate of Arts & Sciences

Student Studio March 2012

West Seattle Parks & Recreation: Handbill Template Set, & Poster

Housing Hope, Team Homebuilding Program: Logo, Flyer Design

Delta Blues Alliance: Website Design

Pro-Bono 2011 - 2012

The House of Prayer: Logo ReDesign, Website, Blog(s)

Cottage Window Rabbitry: Logo, Website, Business Cabinet, Signage Design

HomemakerHere, There, & Everywhere 2001 - Present

Hollywood Video El Cajon, CA 2008 - 2009Customer Service/Clerk

Iron Daisies Web DesignEl Cajon, CA 2007 - 2009Freelance Web & Print Design

Hampton Inn & SuitesLynnwood, WA 2003 - 2004Sales & Catering Coordinator

Best Western Cambridge Inn (pres. Aviator Inn & Suites)Everett, WA 2000 - 2002Front Desk Reception

Saratoga InnLangley, WA 1998 - 2000Front Desk Reception

Movies Tonight (prev. Video South)Clinton, WA 1995 - 1997Customer Service/Clerk

Programs

PhotoshopIllustratorDreamweaverNotepad++Flash

Scripting Languages

HTMLCSSCSS3jQueryActionScript 3.0

InDesignAcrobat ProMicrosoft Office SuiteAfter EffectsMaya

Tressa [email protected]

HOME


6

> Table of Contents

7Test Plan/Methods: Participant Characteristics

PARTICIPANT CHARACTERISTICS

INDUSTRY PROFESSIONAL INDUSTRY STUDENT PERSPECTIVE CLIENT

This test will be approached through three types of target user; The Industry Professional; the Industry Student; and the Perspective Client. Ideally, two to three users will be chose to represenet each of the three categories of user.

Age: 28 – 64

Employed within the Web or Graphic Design Industry

Creative/Artistic

Lead busy social/work lives

Are in the position to hire interns/employees

Familiar with the purpose/use of portfolio websites

Familiar with design & usability principles

Highly tech savvy

Age: 18 – 28

Currently attending school with a focus in Web or Graphic Design


May also be in the process of developing their own portfolio(s) & website(s)

Familiar with the purpose/use of portfolio websites

Familiar with design & usability principles

Highly tech savvy

Age: 36 – 64

Owner of a business with a web presence


Moderate technical skill

Checks e-mail, owns cell/smart phone, possibly some web/social networking

Little familiarity with principles of design

Likely set in their ways

Potentially tech savvy

7

> Table of Contents

8Test Plan/Methods: Participant Characteristics

THE METHOD

Due to the busy schedules of all test subjects, testing will likely be conducted on an individual basis at a location convenient to the test user. Each session will last approximately 30-50 min.

PRE-TEST & INTRODUCTION: 10 MIN

• Explanation of Roles & Protocol for the session• Fill out brief background questionnaire to establish data parameters• Answer user pre-test questions

TESTING: 20 – 30 MIN

• Make notes of initial impressions• Assign 3 tasks (one at a time) for the user to achieve, make notes re: progress• Permit free-flow use

POST-TEST DEBRIEFING: 5 – 10 MIN

• Ask questions about the user experience• Follow up on any problems the user faced• Request suggestions

8

> Table of Contents

9Test Plan/Methods: Tasks

LIST OF TASKS TO BE COMPLETED

Prior to the test session, requirements must be assessed, including a written task description, necessary materials, and a list of criteria for success.

1. NAVIGATE TO THE IMDB WEBSITE AND VIEW THE 6TH IMAGE.

a. Will need home screen, web & interactive screen, imdb screen, & images 1 – 7 b. Success will be measured by the speed with which the user is able to read/navigate to the, the number of clicks the user takes, and lack of confusion.

2. DISCOVER WHERE THE BLACK & WHITE BARN PHOTOGRAPHS WERE TAKEN.

a. Will need home screen, photography screen, and images 1 – 10 b. Success will be measured by the speed with which the user is able to read/navigate to the, the number of clicks the user takes, and users ability to find and read information w/in a paragraph

3. FIND A WAY TO CONTACT THE PORTFOLIO SUBJECT.

a. Will need home screen, contact page, social media buttons, and e-mail form b. Success will be measured by both speed and navigation, and choice of contact navigation (i.e. social media, e-mail, contact page, etc.) 4. FREE ROAM OF THE WEBSITE.

a. Will need all screens/buttons/nav. b. Success will be measured by ease of navigation, length of time spent looking at images/exploring the website, and questions asked.

9

> Table of Contents

01Test Plan/Methods: Test Environment, Tasks of the Moderator, Data

TEST ENVIRONMENT

TASKS OF THE MODERATOR

DATA TO BE COLLECTED

QUANTIFIABLE DATA QUALIFIABLE DATA

As stated previously, the tests will likely be conducted in a one-on-one environment. Test users will be in a room w/out any other occupants and will be observed by the moderator. Paper prototyping will be used to navigate through the site.

The moderator will begin by explaining the testing process and collecting background information on the test user. Next, the moderator will be on hand to guide the test user through the 3 tasks & the free roam, and will be available to answer questions. Moderator will also be taking notes and asking questions as appropriate. Finally, the moderator will close out the interview with a quick debriefing during which additional questions may be asked by either party.

• Length of time spent on each task

• Length of time between clicks

• Number of clicks

• Number of errors, miscues, wrong navigation

• Initial response to design of site

• Initial response to color scheme

• Response to imagery

• User’s frustration, confusion or happiness levels during tasks

10

> Table of Contents

11Test Script: Orientation

ORIENTATION SCRIPT

“Hello. Thank you for taking time from your busy schedule to help me. Would you like a glass of water before we start? Have you ever participated in a usability study before?”

If yes: “What was that experience like for you? What expectations do you have for this test?”

If no: “I’d like to take a few minutes to give you an overview of the process so that you know what to expect.”

“You are here today to help me test my portfolio website so that I can optimize it for the end user. As a representative member of one of my target audience groups you can aid me by giving me your thoughts and opinions as we walk through the test?”

“I will be conducting the test in 3 parts. First I will have you fill out a questionnaire about your background and answer any questions you may have. Second, we will begin the test itself, during which I will ask you some questions, give you 3 tasks to complete, and then permit you to explore the site further if you would like. Lastly, we will finish up with a few follow-up questions about the experience and ask for your suggestions. I will be taking notes throughout the process.”

“It is important to remember that this is not a test of you, but of the website, itself. If you have difficulties or a negative reaction to something please let me know – that is how I will make improvements. Do feel that you understand the process as I’ve explained it to you? Do you have any further questions before we begin?”

11

> Table of Contents

21Test Script: Data Collection

TEST SCRIPT

12

> Table of Contents

GREAT. NOW LET’S TRY TO COMPLETE A FEW TASKS. PLEASE FEEL FREE TO VERBALIZE YOUR THOUGHTS:

1. FIND THE SIXTH IMAGE FOR THE INTERNATIONAL MOVIE DATABASE WEBSITE. a. If you wanted to navigate to the next image how do you think you might do that? b. If you need to return to the home page, how do you think you might do that?

2. FIND A B & W PHOTOGRAPH OF A BARN. WHERE WAS THE BARN PHOTOGRAPHED? a. Does the image create a desire to look through the other photographs?

3. FIND A WAY TO CONTACT THE WEBSITE’S MAKER. a. Why did you choose this method? b. Do you have an interest in exploring another method of contact?

4. YOU NOW HAVE A FEW MINUTES TO EXPLORE THE WEBSITE IF YOU WOULD LIKE. a. Why did you choose to (or not to) explore the site further? b. Is there anything you feel is missing?

A FEW QUESTIONS BEFORE WE BEGIN THE TASKS. 1. Is it immediately clear what kind of a website this is?2. What is your first impression of the homepage? How does it make you feel?3. Can you identify the logo?4. Can you identify the primary navigation?5. Do you feel navigating the tasks will be difficult?6. What information do you think this website will provide?7. Where are you tempted to start?

31Test Script: Data Collection

POTENTIAL SCENARIOS

Potential scenarios may be useful depending on the individual and their demographic. Below are some potential scenarios.

13

> Table of Contents

FOR A GRAPHIC/WEB DESIGN INDUSTRY PROFESSIONAL:

1. You have placed an ad for a graphic/web intro position at your company. The potential hire has sent you a link to a portfolio website which you are going to look at.

FOR A STUDENT ENROLLED IN A GRAPHIC/WEB DEGREE PROGRAM:

1. You are currently employed in an internship position and have been asked by your employer to find out if any of your fellow students might be at an appropriate skill level and have an interest in filling a second internship position. To this end you are looking at this student portfolio site.

2. You are looking for inspiration in designing your own Portfolio website and have come across this student website Online

FOR A POTENTIAL CLIENT:

1. Your business currently has a website but you are currently looking to update your web image. You have Googled “web designers” and have come across this portfolio website.

2. You are a business owner looking for someone to help you build your first website. You are on a budget and looking for an individual designer, rather than a corporate entity to design your website. You have come across this portfolio site Online.

41Test Script: Post-test

POST-TEST QUESTIONNAIRE

Thank you for taking time to go through this test with me. I would like to ask you a couple more questions before you depart, if that is okay?

That concludes our test session for today. Thank you, again, for your time and feedback. You have been very helpful!

14

> Table of Contents

1. What, in your opinion, is this site’s greatest strength?2. What, in your opinion, is the site’s greatest weakness?3. What would you add or subtract from the site’s design?4. What would you add or subtract from the site’s navigation?5. Is there enough information about each topic/subject? Is there too much?6. Do you have any other questions or comments?

51Test Script: Data Collected

HAVE YOU EVER VISITED A PORTFOLIO WEBSITE?

60%40 %

45 yrs.

AGE RANGES

40 - 44 yrs.

25 - 29 yrs.

Employer

The Art Instituteof Seattle

House of Prayer

The Paint Escape



Job Title

Part-time faculty

Administrator

Owner & Manager

Instructor

Full-time student

Responsibilities

Teaches college students film-making skills & software-based learning,Freelance editor & cinematographer

Desktop publishing, financial oversight, coordinating volunteers, word processing

Customer service, book-keeping, hiring, management, and teaching

Teaches a variety of classes in graphic & web design skills

Classwork, graphics design & printing

+

YES | NO

LEVEL OF EDUCATION

20 4040%%%

Masters Degreeor higher

Bachelors Degree/4-year

Some college/Associates Degree

15

> Table of Contents

61WHICH OF THESE TECHNOLOGIES DO YOU USE ON A REGULAR BASIS? CHECK

%%

PC or Mac(Standard computer)

Smart Phone(Android or iPhone)

Laptop(Any Brand)

e-Reader(Kindle, Nook, etc.)

Cell Phone(Any Brand)

Tablet(Android or iPad)

Test Script: Data Collected

40100 20 040 40%% % %% %

HOW OFTEN DO YOU USE THE FOLLOWING TECHNOLOGIES (PERSONAL OR JOB

E-Mail Never

1 - 2 times /wk

3 - 5 times /wk

At least once per day

Several times per day

Internet/Web browsing

Facebook

Twitter

Google +

Linked In

Pinterest

Reddit

Blog (personal or work

20 40 60 80 100% % % % %

16

> Table of Contents

71Results: Initial Questions

17

> Table of Contents

Ini�al Ques�ons Respondant 1 Respondant 2 Respondant 3 Respondant 4 Respondant 5

1. Is it immediately clear what type of website this is?

Yes it's a por�olio & No for web design Yes Yes No for Por�olio, Yes

for art work site Yes

2. What is your first impression of the website?

Pre�y, but need emphasis on why I am here

A�rac�ve, but why is the 'about' info on the home page?

Cohesive, but too much emphasis on the contact bu�ons

Clean, not too busyClear, unclu�ered, beau�ful images on home page

3. Can you iden�fy the Logo? Yes Yes Yes Yes Yes

4. Can you iden�fy the primary naviga�on?

Yes, although not clear about contact naviga�on?

Yes Yes Yes Yes

5. What informa�on do you think this website will provide? Work samples

Breadth and catagories of design work

Contact, Resume, Artwork Design website Info about Tressa

and her abili�es

6. Without star�ng, where is your first ins�nct to begin?

Por�olio Image (click on)

Por�olio Image (Click on)

Web & Interac�ve Link



81Results: Assigned Task 1

18

> Table of Contents

Assigned Tasks User # Clicks Target Found Miscues

Task #1: Find the Interna�onal Movie Database Website and navigate to the sixth image.

A 6 No Yes

B 16 Yes Yes

C 3 Yes No

D 23 Yes Yes

E 9 Yes Yes

Task #1: Averaged Results 11.4 Yes Yes Secondary and Numeric naviga�on unclear

Notes

User was not able to iden�fy secondary naviga�on.

Took user several several minutes to iden�fy secondary naviga�on.

User was not able to iden�fy secondary naviga�on.

User chose to use arrows to navigate before discovering secondary naviga�on


19

> Table of Contents


Subtask #1A: How do you think you might navigate to the next image?

A N/A Yes No

B N/A Yes No

C N/A Yes No

D N/A Yes No

E N/A Yes No

Task #1A: Averaged Results N/A Yes No Users had no difficulty using direc�onal arrows

Notes


20

> Table of Contents


Subtask #1B: How do you think you might navigate back to the Home page?

A N/A Yes & No Yes

B N/A Yes No

C N/A Yes No

D N/A Yes No

E N/A Yes & No Yes

Task #1B: Averaged Results N/A Yes No

User chose logo instead of Home Btn

User chose logo instead of Home Btn

Users had no problem finding a way 'Home'

Notes

User iden�fied both logo and Home Btn


21

> Table of Contents


Task #2: Find a black and white photograph of a barn. Where was the barn photographed?

A 1 Yes No

B 2 Yes No

C 3 Yes No

D 1 No Yes

E 2 Yes No

Task #2: Averaged Results 1.8 Yes No

User iden�fied barn photo on Home page

Notes

*Error from user # 4 is the result of an error in the tes�ng pla�orm


22

> Table of Contents


Subtask #2A: Does the first photograph in the series leave you with a desire to see more?

A N/A Yes N/A

B N/A Yes N/A

C N/A Yes N/A

D N/A Yes N/A

E N/A Yes N/A

Task #2A: Averaged Results N/A Yes N/A

Notes


23

> Table of Contents


Task #3: Find a way to contact the owner of the website - Tressa Randolph

A 1 Yes No

B 1 Yes No

C 1 Yes No

D 1 Yes No

E 1 Yes & No Yes

Task #3: Averaged Results 1 Yes No

Notes

Would rather see the word 'E-mail' as opposed to an icon bu�on

User chose to find contact info on Resume

E-mail bu�on may be unclear


24

> Table of Contents


Task #3A: Can you find another way to contact the owner of the website - Tressa Randolph

A 1 Yes No

B 1 Yes No

C 1 Yes No

D 1 Yes No

E 1 Yes No

Task #3A: Averaged Results 1 Yes No

Notes

52Results: Additional Notes

25

> Table of Contents

Technical issues within the body copy (i.e. misspellings, accent marks, apostrophes, etc.)

Notes

1 �me(s)

1 �me(s)

1 �me(s)

2 �me(s)Number image naviga�on needs bold or highlighing to show rela�ve loca�on.

Repeated Comments

2 �me(s)

Confusion occurs on whether 'Home' btn takes user to top of sub-category or back to home/index page. 1 �me(s)

Use more of your real estate for larger por�olio images. 4 �me(s)

Desires to click on por�olio images. 2 �me(s)

Consider using 'Product Design' in top nav, instead of 'Packaging'.

Likes that the 'About Me' info is short and sweet.

In 'About Me' consider placing lower emphasis on word 'empathy' or consider different word.

Site is very a�rac�vly laid out and primary naviga�on is very clear. 2 �me(s)

Consider using thumbnail images for sub-nav within each category. 1 �me(s)

Arrow naviga�on for images is easy to use. 1 �me(s)

Use top naviga�on only and include drop down or accordian sub-nav. 1 �me(s)

Contact naviga�on is too prominent/creates imbalance on the page. 1 �me(s)

Use less comentary for por�olio images/projects. 1 �me(s)

Unclear on what 'Web & Interac�ve' means. 1 �me(s)

Secondary nav is confusing & too small a font point size. 1 �me(s)

62Findings

This usability test surrendered some interesting results including design and usability flaws as well as some surprise successes. The target audience group was broken up into three sections: Students, Industry Professionals, and Potential Clients. Of these three groups, those Industry professionals and students who were, in large part, already familiar with Portfolio style websites had little difficulty navigating them. However, the potential clients, who were less tech savvy, had a great deal more difficulty with the site.

OVERALL THE PRIMARY DESIGN/USABILITY FLAWS CONSIST OF THE FOLLOWING

• Home page image/collage is deceiving and mistaken for a navigation agent• Secondary navigation is not pronounced enough, large enough, or intuitive at all• Numeric Image navigation has no location data• Images are not large enough to view details• Contact Wheel navigation is distracting and too prominent• Project descriptions are too long

OVERALL THE PRIMARY SUCCESSES CONSIST OF THE FOLLOWING

• Quality of portfolio work • Home button & Logo• Side arrow image navigation• Type size of body copy

26

> Table of Contents

72Conclusion & Recommendations

RECOMMENDATIONS

• Make heavier use of Image-based navigation• Reduce project body copy• Consider dropping secondary navigation for thumbnail-image navigation• Revise Contact & Social Media Buttons to be less distracting, considering alternatives such as mono-chromatic

color scheme and alternate shaped buttons/icons• Remove ‘About Me’ title from home page• Make greater use of real estate to display larger images

CONCLUSION

This usability test was successful in its purpose to expose design/usability flaws and suggest changes. While there was the occasional inconsistency between users, for the most part their reactions were very similar. This usability test has resulted in multiple new design inspirations which will be fleshed out and re-tested for usability as they evolve.

27

> Table of Contents

randolph portfolio, 1st iteration, usability test

Documents

web design

website color design

layout design

principles of design

interactive media

visual response

initial emotional response

emotionalintellectual