Randolph Portfolio, 1st Iteration, Usability Test by Tressa Randolph

Tressa Randolph Portfolio

Table of Contents

3 4

Introduction / Executive Summary

Test Plan / Method Participant Characteristics Method List of Tasks Test Environment, Tasks of the Moderator, Data Collection & Results

Portfolio Website Home Page Sample Portfolio Page Resume Page

Test Scripts / Materials Orientation Script Test Script Scenarios Post-Test Questions Questionairre Data

Results Initial Questions Assigned Tasks Additional Notes

26 27

Findings Conclusion and Recommendations

2 2

Introduction/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

RESEARCH QUESTIONS: This study will attempt to answer the following questions: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

> Table of Contents

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

Portfolio Website HOME PAGE

Web & Interactive

ABOUT ME 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.

Contact Me orphanofchaos@gmail.com 360-321-7050 Facebook: https://www.facebook. com/tressa.frederickrandolph

> Table of Contents

Packaging

Illustration

Photography

Resume

Portfolio Website PORTFOLIO PAGE

Web & Interactive

Packaging

Illustration

Photography

Resume

International Movie Database > Application > Top Ten in United Stages

Web & Interactive Cottage Window Rabbitry The House Of Prayer Rhiannonâ&#x20AC;&#x2122;s Delights Craigslist International Movie Database Murder mApp

HOME

Contact Me

INTERNATIONAL MOVIE DATABASE - APPLICATION

orphanofchaos@gmail.com

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

360-321-7050 Facebook: https://www.facebook. com/tressa.frederickrandolph

> Table of Contents

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.

Portfolio Website RÉSUMÉ PAGE

Tressa Randolph

Web & Interactiveorphanofchaos@gmail.com Print Packaging 425.297.3614

Education

The Art Institute of Seattle Web Design, Bachelor of Science Edmonds Community College Associate of Arts & Sciences

Skills

Programs Photoshop Illustrator Dreamweaver Notepad++ Flash

View Resume Tressa Randolph

Experience

Photography

Resume

2009 - Present

1996 - 1999

Scripting Languages

InDesign Acrobat Pro Microsoft Office Suite After Effects Maya

orphanofchaos@gmail.com 425.297.3614

Illustration

Student Studio March 2012

HTML CSS CSS3 jQuery ActionScript 3.0

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

Work History

Homemaker Here, There, & Everywhere Hollywood Video El Cajon, CA Customer Service/Clerk Iron Daisies Web Design El Cajon, CA Freelance Web & Print Design Hampton Inn & Suites Lynnwood, WA Sales & Catering Coordinator

2008 - 2009

2007 - 2009

2003 - 2004

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

2000HOME - 2002

Saratoga Inn Langley, WA Front Desk Reception

1998 - 2000

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

> Table of Contents

2001 - Present

1995 - 1997

Test Plan/Methods: Participant Characteristics PARTICIPANT CHARACTERISTICS

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. INDUSTRY PROFESSIONAL Age: 28 – 64

Age: 18 – 28

Employed within the Web or Graphic Design Industry

Currently attending school with a focus in Web or Graphic Design

Creative/Artistic Lead busy social/work lives

> Table of Contents

INDUSTRY STUDENT

Lead busy social/work lives

Are in the position to hire interns/employees

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

PERSPECTIVE CLIENT Age: 36 – 64

Owner of a business with a web presence Lead busy social/work lives 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

Test 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

> Table of Contents

Test 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.

> Table of Contents

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.

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

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.

TASKS OF THE MODERATOR

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.

DATA TO BE COLLECTED

> Table of Contents

QUANTIFIABLE DATA

QUALIFIABLE DATA

• Length of time spent on each task

• Initial response to design of site

• Length of time between clicks

• Initial response to color scheme

• Number of clicks

• Response to imagery

• Number of errors, miscues, wrong navigation

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

Test 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?”

> Table of Contents

Test Script: Data Collection TEST SCRIPT

A FEW QUESTIONS BEFORE WE BEGIN THE TASKS. 1. 2. 3. 4. 5. 6. 7.

Is it immediately clear what kind of a website this is? What is your first impression of the homepage? How does it make you feel? Can you identify the logo? Can you identify the primary navigation? Do you feel navigating the tasks will be difficult? What information do you think this website will provide? Where are you tempted to start?

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.

> Table of Contents

a. Why did you choose to (or not to) explore the site further? b. Is there anything you feel is missing?

Test Script: Data Collection

POTENTIAL SCENARIOS

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

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 â&#x20AC;&#x153;web designersâ&#x20AC;? 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.

> Table of Contents

Test 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?

1. 2. 3. 4. 5. 6.

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

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

> Table of Contents

Test Script: Data Collected

Responsibilities

Job Title

Employer The Art Institute of Seattle

House of Prayer

The Paint Escape

The Art Institute of Seattle The Art Institute of Seattle

Part-time faculty

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

Administrator

Desktop publishing, financial oversight, coordinating volunteers, word processing

Owner & Manager

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

Instructor

Teaches a variety of classes in graphic & web design skills

Full-time student

Classwork, graphics design & printing

Masters Degree or higher

> Table of Contents

40 %

YES | NO

AGE RANGES

25 - 29 yrs.

40 - 44 yrs.

LEVEL OF EDUCATION

20%

HAVE YOU EVER VISITED A PORTFOLIO WEBSITE?

40 %

Bachelors Degree/ 4-year

40 %

Some college/ Associates Degree

yrs.

Test Script: Data Collected

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

100 %

40 %

PC or Mac (Standard computer)

Laptop (Any Brand)

40 %

20 %

Cell Phone (Any Brand)

Smart Phone (Android or iPhone)

e-Reader (Kindle, Nook, etc.)

Tablet (Android or iPad)

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

Never

E-Mail

Internet/Web browsing

1 - 2 times /wk

Facebook

Twitter

3 - 5 times /wk

Google +

Linked In

At least once per day

Several times per day

Blog (personal or work

20 %

> Table of Contents

40 %

60 %

80 %

100 %

Results: Initial Questions

Ini al Ques ons

> Table of Contents

Respondant 1

Respondant 2

Respondant 3

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

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

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?

3. Can you iden fy the Logo?

Yes

4. Can you iden fy the primary naviga on?

Respondant 4

Respondant 5

No for Por olio, Yes for art work site

Yes

Cohesive, but too much emphasis on the contact bu ons

Clean, not too busy

Clear, unclu ered, beau ful images on home page

Yes

Yes, although not clear about contact naviga on?

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

Por olio Image (click on)

Results: Assigned Task 1

Assigned Tasks

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

Task #1: Averaged Results

> Table of Contents

User

# Clicks

Target Found

Miscues

Yes

User was not able to iden fy secondary naviga on.

Yes

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

Yes

User was not able to iden fy secondary naviga on.

Yes

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

11.4

Yes

Secondary and Numeric naviga on unclear

Notes

Results: Assigned Task 1

Assigned Tasks

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

Task #1A: Averaged Results

> Table of Contents

User

# Clicks

Target Found

Miscues

N/A

Yes

N/A

Yes

N/A

Yes

N/A

Yes

N/A

Yes

N/A

Yes

Notes

Users had no difficulty using direc onal arrows

Results: Assigned Task 1

Assigned Tasks

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

Task #1B: Averaged Results

> Table of Contents

User

# Clicks

Target Found

Miscues

N/A

Yes & No

Yes

User chose logo instead of Home Btn

N/A

Yes

User iden fied both logo and Home Btn

N/A

Yes

N/A

Yes

N/A

Yes & No

Yes

User chose logo instead of Home Btn

N/A

Yes

Users had no problem finding a way 'Home'

Notes

Results: Assigned Task 2

Assigned Tasks

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

Task #2: Averaged Results

> Table of Contents

User

# Clicks

Target Found

Miscues

Yes

1.8

Yes

Notes

User iden fied barn photo on Home page

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

Results: Assigned Task 2

Assigned Tasks

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

Task #2A: Averaged Results

> Table of Contents

User

# Clicks

Target Found

Miscues

N/A

Yes

N/A

Yes

N/A

Yes

N/A

Yes

N/A

Yes

N/A

Yes

N/A

Notes

Results: Assigned Task 3

Assigned Tasks

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

Task #3: Averaged Results

> Table of Contents

User

# Clicks

Target Found

Miscues

Yes

Yes & No

Yes

User chose to find contact info on Resume

Yes

E-mail bu on may be unclear

Notes

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

Results: Assigned Task 3

Assigned Tasks

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

Task #3A: Averaged Results

> Table of Contents

User

# Clicks

Target Found

Miscues

Yes

Notes

Results: Additional Notes

Notes

> Table of Contents

Repeated Comments

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

2 me(s)

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

1 me(s)

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

1 me(s)

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

1 me(s)

Number image naviga on needs bold or highlighing to show rela ve loca on.

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)

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)

Consider using thumbnail images for sub-nav within each category.

1 me(s)

Site is very a rac vly laid out and primary naviga on is very clear.

2 me(s)

Arrow naviga on for images is easy to use.

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)

Findings

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

• • • •

> Table of Contents

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

Conclusion & Recommendations 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.

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

> Table of Contents