Fall
2012
T-Shirt Design Website Usability Report
Eugenie Kim
EDC 385G

Design and Strategies for New Media
 D r . L i u
T-Shirt Design Website Usability Report
2
Table of Contents
Introduction _________________________________________________________ 3
Methodology _________________________________________________________ 4
Website Descriptions __________________________________________________________ 5
Participants _________________________________________________________________ 8
Instruments _________________________________________________________________ 8
Tasks ______________________________________________________________________ 8
Task 1. First Impressions _____________________________________________________ 9
Task 2. Specific Tasks _______________________________________________________ 9
Task 3. Open-Ended Task ___________________________________________________ 10
Data and Results ____________________________________________________ 11
Participant Responses to the Site Feedback Questionnaire ___________________________ 11
Custom Ink _________________________________________________________________ 11
Findings from Task 1 _______________________________________________________ 11
Findings from Task 2 _______________________________________________________ 12
Findings from Task 3 _______________________________________________________ 16
Printfly ____________________________________________________________________ 17
Findings from Task 1 _______________________________________________________ 17
Findings from Task 2 _______________________________________________________ 18
Findings from Task 3 _______________________________________________________ 21
Zazzle ____________________________________________________________________ 22
Findings from Task 1 _______________________________________________________ 22
Findings from Task 2 _______________________________________________________ 23
Findings from Task 3 _______________________________________________________ 30
Discussion _________________________________________________________ 33
Interface Design _____________________________________________________________ 34
Information Design ___________________________________________________________ 34
Interaction Design ___________________________________________________________ 35
Recommendations ___________________________________________________________ 35
Custom Ink _______________________________________________________________ 35
Printfly __________________________________________________________________ 35
Zazzle __________________________________________________________________ 36
Summary ___________________________________________________________ 36
References Used ____________________________________________________ 37
Related Links on the Web for the Topic __________________________________ 38
Author Information ___________________________________________________ 38
Index of Figures and Tables ___________________________________________ 39
T-Shirt Design Website Usability Report
3
Introduction
The t-shirt is a style of inexpensive shirt characterized by its T shape, made by the body
and sleeves. It is typically short-sleeved and usually has a rounded neckline and no
collar or buttons. In modern days, the t-shirt has many styles and fits, but it originated
from cutting long one-piece undergarments into a top and bottom. T-shirts became
popular in the states when plain white tees were issued to military men to be worn
under their uniforms, and the men would take off their jacket at parties in warmer
climates (Dunn, 2012).
Since at least as early as the 1950s, vacationers began to see clothing as options for
souvenirs and, as t-shirts were inexpensive and convenient as a blank canvas for
designs and logos, t-shirts soon became a popular option for wearable souvenir (Rivoli,
2009, p. xviii). In modern days, t-shirts are a convenient and affordable item to place art,
text, and pictures, for self-expression or advertisement and promotion. In the late 1980s
and early 1990s, advances in technology allowed for the average person to produce tshirt designs through the use of iron-on transfers, particularly when average computer
printers were equipped with the ability to print out images on heat transfer paper. In fact,
companies such as Black Lightning still offer iron-on heat transfer toner for laser printers
for this very purpose (Black Lightning, 2011).
As innovations progressed and the internet became more affordable and accessible,
more options became available for the general public. In the early 2000s, companies
with the ability to design and print t-shirts were founded and made available on the web.
T-Shirt Design Website Usability Report
4
Methodology
The purpose of this study is to examine three websites that allow users to design,
create, and purchase t-shirts. In particular, the main questions that guided this study
are:
 How does the user’s perception of the overall design of each website affect their
experience and likelihood to use the website for the desired end-goal of
designing, creating, and purchasing a t-shirt?
 How does each of the sites facilitate designing a product?
The three sites chosen for this study are Custom Ink (http://www.customink.com),
Printfly (http://www.printfly.com), and Zazzle (http://www.zazzle.com). Although all three
websites were chosen because they offer the ability to design and purchase t-shirts,
they all also offer a variety of shirt types as well as other products. All three sites offer a
number of font styles to choose from when adding text, and allow the user to upload
images to place onto products that can then be purchased immediately from the
website. The three sites also allow users to purchase or customize previously made
items by other users for themselves. The designs can be printed, but all three sites offer
embroidery options as well.
The researcher has previous personal experience with Zazzle in the design,
customizing, and purchasing aspects. Although there was no previous personal
experience prior to this study with the two other sites, companies that had multiple
design, customizing, and purchasing options were chosen. Additionally, the companies
had to be credible and had to have a professional-looking website to be chosen for this
study.
T-Shirt Design Website Usability Report
5
Website Descriptions
Custom Ink is a company that began with the simple idea of allowing users to go the
website, upload an image, and purchase a t-shirt with that image printed on it. In 2000,
when the company was founded, order notes were taken by hand and order estimations
were done manually. Since its inception, they have shipped over 25 million products
and the company has grown steadily. Not only has the company grown in size, but the
product list has expanded to include hats, water bottles, bags, stickers, ornaments,
umbrellas, and more. Custom Ink allows users to upload photos or use existing clip art
from the website.
Figure 1. Custom Ink homepage
T-Shirt Design Website Usability Report
6
Printfly prides itself on the customizing options available to users as well as its capacity
to print over 250,000 prints daily. Text, clip art, and uploaded images can be rotated on
the products. Although this site offers products besides t-shirts, most of the products are
items of clothing or accessories, including sweats, athletic shirts, polo shirts, hats, bags,
and robes.
Figure 2. Printfly homepage
T-Shirt Design Website Usability Report
7
Zazzle, founded in 1999, is a company with a vision to “re-define commerce, powered
by the world’s imagination.” The site offers the ability to customize a multitude of items
that has expanded much beyond t-shirts and includes pacifiers, laptop bags, shoes,
iPhone cases, ties, and playing cards, among many more options. In 2007, TechCrunch
recognized Zazzle as “best business model” (Porges, 2008). Beyond the various items
that have been made available, the company has made vast innovations in software to
assist in product customization.
Figure 3. Zazzle homepage
8
T-Shirt Design Website Usability Report
Participants
The participants were chosen using a convenience sample; due to the time and
resource constraints of the study did not allow for more than a convenience sample.
Additionally, the nature of my personal relationship with the participants allowed for a
relaxed environment, which would mimic the environment in which the participants
would typically use the websites.
Participant Age
Gender Education Internet Usage
F
28
F
Bachelors
degree
M
34
M
Bachelors
degree
Daily use for work &
personal email, social
networking (Facebook),
and shopping on
iPhone, iPad, Macbook
Pro, and PC portable
computer
Daily use for sports info,
musical bands info,
youtube, social
networking (Twitter), and
paying bills on iPhone
and PC desktop
computer
Experience with
T-Shirt Design
None
Only created tshirts with iron-on
and drawn-on
designs
Table 1. Demographics of Participants
Instruments
The following instruments were used for the purpose of this study:



Two Apple MacBook Pro portable computers
Questionnaires
One HTC Sensation smartphone
During the study, the participant used one of the MacBook while the observer took
notes on the other. The questionnaires were not distributed. Rather, the interviewer
read each of the questions out loud and typed notes and participants’ notes on one of
the computers to keep the participants from getting fatigued. The smartphone was used
for the timer and voice recording functions.
Tasks
As per the usability testing methodology presented in Nielsen et al. (2000), three
primary types of tasks were chosen for this usability study: first impression, specific
task, and open-ended task. Thus, the participants were given each of these types of
tasks to perform at each website.
T-Shirt Design Website Usability Report
9
At the beginning of each session, each participant was informed that the session would
take approximately two hours to three hours total. The interviewer anticipated each
participant would take approximately two hours to look at the three sites based on the
test length given in the Nielsen et al. report (2000). It was made clear that the study was
to test the websites and not their ability to navigate the websites, and they were asked
to use the think-aloud process throughout each task. The think-aloud process was
explained as a method for the interviewer to get a better idea of the participants’ actions
as well as the reasoning behind those actions. The ordering of the sites was changed
for the participants to avoid any bias that might come up from going through one site
before another. Participant F went through the sites in the following order: Custom Ink,
Zazzle, Printfly. Participant J went through the sites in the following order: Printfly,
Zazzle, Custom Ink.
Task 1. First Impressions
For each site, before going through the specific and open-ended tasks, participants
were given approximately two minutes to freely browse the site. This was in efforts to
get a general idea of the participants’ overall first impression of each site. Upon freely
browsing, they were asked:






What are your first impressions of the website design and organization?
What do you think this website is used for?
What is the first thing that caught your attention?
Who is the target of this website?
Do you think this website would be easy to use for the average user?
Would you be likely to use this website if you needed to design a t-shirt?
Task 2. Specific Tasks
After the first impressions task, the participants were asked to perform specific tasks.
This was done so as to observe their interaction with each website with semi-structured
tasks. Given that all three sites were very similar, the same tasks were given for each of
the sites. Following are the specific tasks assigned:



Create and purchase your own volleyball t-shirt. Upload volleyball image (from
desktop) and create a design using the image and the word “volleyball.”
Share your design with a friend via email.
Find a preexisting (soccer) shirt and customize it to have your last name on it.
Upon completion of the three tasks, the participants were asked the follow-up questions:


Was it easy to create your own shirt from scratch?
Did you find the purchasing task similar to your experience in purchasing apparel
on other websites you are familiar with?
T-Shirt Design Website Usability Report


10
Are you satisfied with the way you could share your design?
How did you feel about the customization process?
They were encouraged to elaborate on their answers to these questions, where
applicable.
Task 3. Open-Ended Task
The participants were asked to perform the following open-ended task so that they
could browse through the site as they chose in order to find the information they
needed:

You have just received your order from this company and you discover there is a
problem with it. What do you do?
As the participants identified what information they needed to answer the question, they
perused the site to find the information they needed. Then, at the end of the task they
were asked:


Identify the level of ease or difficulty with which you found the information you
needed
Describe any difficulty you encountered.
Again, they were encouraged to elaborate on their answers to these questions, where
applicable.
For tasks 2 and 3, the success was measured by the amount of time it took the
participant to complete the task, the level of ease or difficulty with which the participant
perceived the task for that particular site, and the level of satisfaction they expressed
with the options they found.
T-Shirt Design Website Usability Report
11
Data and Results
Participant Responses to the Site Feedback Questionnaire
Using a Likert scale and participant comments, all three sites were evaluated for their
information, interface, and interaction designs in order to answer the questions:


How does the user’s perception of the overall design of each website affect their
experience and likelihood to use the website for the desired end-goal of
designing, creating, and purchasing a t-shirt?
How does each of the sites facilitate designing a product?
Please rate the following on a scale of 1 to 5
(-2 = Very dissatisfied, -1 = Dissatisfied, 0 = Neutral, 1 = Satisfied, 2 = Very satisfied)
Overall ease of reading the text
1
2
3
4
5
Overall appearance of site (color, font,
1
2
3
4
5
graphics, etc.)
Quantity of information about designing,
1
2
3
4
5
purchasing, and/or sharing products
Quality of information about designing,
1
2
3
4
5
purchasing, and/or sharing products
Navigating between pages
1
2
3
4
5
Methods of contacting the company
1
2
3
4
5
Overall website experience
1
2
3
4
5
Table 2. Site Feedback Questionnaire
Custom Ink
Findings from Task 1
Both participants felt that Custom Ink had a pleasantly simple layout. They felt that the
website was geared toward a very wide audience, and that it would be easy to use for
all users. They thought the website pushed towards having the users create their own
design, in such a way that the users can get to designing a t-shirt in “just a couple of
clicks.” They liked that there are various ways to quickly get to the designing process,
and that this website makes it clear that the main purpose of the site is to design custom
t-shirts. The menu bar has 3 options to get to designing or customizing a preexisting
design: the dropdown menu under products, design lab, and design ideas. Additionally,
the one of the featured items in the scrolling current features is dedicated to designing.
T-Shirt Design Website Usability Report
12
Figure 4. Custom Ink menu bar and features
Both participants said they were likely to use this website for creating t-shirts and they
liked that there were many options. Participant F, however, thought that there were
perhaps too many options, which might be overwhelming for some users.
Findings from Task 2
For the first task of creating a volleyball t-shirt with an image and text, Participant F
clicked on the design lab option from the menu bar on the homepage in order to create
a t-shirt from scratch, which went directly to the design lab, where users can design
their own shirt, and then clicked on add art. Although there is an option towards the top
to upload an image as well as a search bar in which to enter keywords, she clicked on
Sports/Games, and scrolled down to click on Volleyball. Without any prompt, the
participant tried to resize the clipart by clicking several times on the Resize button.
When nothing happened, she entered different widths and heights to change the size of
the image. Using a process of trial and error, she was able to get the image down to a
size of her liking.
T-Shirt Design Website Usability Report
13
Figure 5. Custom Ink "Add Art" feature
Figure 6. Custom Ink image resizing feature
Participant F successfully added text to the shirt without any issues and did not choose
to resize the text, although she might have encountered a similar trial-and-error type of
process to find an appropriate size font.
Figure 7. Custom Ink text resizing feature
She was able to easily drag the image and text around by clicking and dragging, as well
as horizontally center both by clicking on the Move to Center button.
Figure 8. Custom Ink centering feature
T-Shirt Design Website Usability Report
14
Unlike Participant F, Participant M went about designing a volleyball shirt by hovering
over the products dropdown menu from the menu bar on the homepage. He then
clicked on athletics from the options, and then clicked on Teamwear & Jerseys. When
he found one to his liking, he clicked on Pick a Color and selected a color he preferred.
Then he was able to click on the Start Designing button.
Figure 9. Custom Ink "Start Designing" button
Once in the design lab, he went through the same steps as did Participant F, except
that he did not try resizing the image or the text. Additionally, Participant M saved his
design twice in this process while Participant F did not.
For the task of sharing the design with a friend via email, both participants click on the
save/send button at the bottom left of the page, which brings up a modal panel that first
prompts the user to save the design his or her their email and then allows the user to
enter email addresses in order to send others the design.
Figure 10. Custom Ink save/send button
T-Shirt Design Website Usability Report
15
Figure 11. Custom Ink "save your design" modal panel
For the task of finding a preexisting soccer design to customize, Participant F clicked on
the design ideas tab on the menu bar from the homepage and clicked on Soccer under
Sports/Teams. She scrolled through the available options until she found one to her
liking, clicked on it, and clicked on the add names feature, where she easily navigated
through, adding her last name on the back on the t-shirt.
Figure 12. Custom Ink "add names" feature
Participant M struggled with this task until he felt “totally confused.” Rather than going to
the design ideas tab from the homepage (see Fig. 4), which is the only way to find
T-Shirt Design Website Usability Report
16
preexisting designs, he went several times through the process of clicking on products
and looking for a soccer shirt under athletics apparel. After about five minutes, the user
was stopped because he began to show signs of frustration. He felt this task was
“surprisingly difficult,” and blamed himself for not being able to complete the task. While
the observer was preparing to move on to the next task, the participant continued
browsing around and found the design ideas tab and was able to get through the task.
He also chose to use the add names feature, but expressed disappointment when the
website did not show his name, but rather the word “EXAMPLE.”
Figure 13. Custom Ink "add name" preview
Findings from Task 3
Participant F immediately scrolled to the bottom of the homepage to see if there was a
service or help center, initially ignoring the options at the very top of the page to contact
the company.
Figure 14. Custom Ink contact links at top of homepage
Under Service Center, she clicked on Help Center, ignoring the information adjacent to
the clicked link that provided more contact information and hours of availability.
T-Shirt Design Website Usability Report
17
Figure 15. Custom Ink contact links and help center in sitemap footer
She looked through the Frequently Asked Questions to see if any pertained to problems
with an order and found “What if I have a problem with my order?” This provided a
phone number, hours of availability, and the refund policy. The user then said she would
call the company because that was the only option that seemed to be available.
Participant M immediately identified the contact information at the top of the homepage
(see Fig. 14) and said that, given the options to call or chat, he would choose to call
because he felt it to be more personal and that the problem could be resolved in a more
timely manner.
Printfly
Findings from Task 1
Both users felt that Printfly was clear, concise, organized and looked easy to use.
Participant F noted that this company offered embroidery and she liked that the website
featured the dates by which the product would ship very prominently. What is more, she
appreciated the text on the first page that allowed her to get a feel for the page without
having to browse around too much (See figure 2).
Figure 16. Printfly shipping information on homepage
T-Shirt Design Website Usability Report
18
Participant M first noticed the Start Designing button that was prominently displayed,
especially because there were a few different places one could click to start designing.
Additionally, the scrolling features had three different features, and yet they all included
buttons to Start Designing (see Figure 2 above and Figures 17 and 18 below).
Figure 17. Printfly features 2
Figure 18. Printfly features 3
Both participants felt that Printfly, while probably accessible for nearly all users, is more
geared toward adults and professionals. They thought the site was very easy to use and
Participant M commented that he nearly finished designing a shirt for his girlfriend in the
small amount of time he had to explore the site.
Findings from Task 2
In the first specific task of creating a volleyball t-shirt, Participant F immediately clicked
on Start Designing, which took her directly into the design studio, where users can
design a shirt. As she clicked on the Add Clipart button, she noted that it was loading
slowly, but the site provides many options for clipart or for uploading images. At this
point, there were different categories, and the user clicked on the Sports button, under
which there were different sports categories, and the user clicked on the Volleyball
button. She then selected an image she liked after scrolling through all the images,
which brought up the image on the t-shirt preview. The user was then able to drag the
T-Shirt Design Website Usability Report
19
image around to place it where she wanted. She clicked on the Add Text button to add
text and commented on the many options available for font face, style, color, flipping,
and rotating.
Participant M got to the design studio in a different way from Participant F, but he did it
in a similar manner to the way he had using Custom Ink. From the homepage, he
clicked on t-shirt, which gave him different types of t-shirts available. He then clicked on
a type of t-shirt that he thought would look good with a graphic. He was prompted to
select a color so he selected a color combination to his liking, which finally took him to
the design studio. At this point, the next steps he took were identical to the steps
Participant F went through to create the design.
Figure 19. Printfly add clipart feature
Figure 20. Printfly "Start Designing" option through selecting t-shirt type and color
For the task of sharing the design via email, both participants went to Step 2 of the
design process, where users have the option of saving and sending the design. Both of
the participants first opted to save their design, which brought up a modal panel that
T-Shirt Design Website Usability Report
20
requires the user to enter an email and name the design. Then they were able to send
the design using email addresses, which brought up another modal panel.
Figure 21. Printfly step 2 in design process
Figure 22. Printfly "Save" modal panel
Figure 23. Printfly "Share" modal panel
For the task of customizing a preexisting soccer shirt design, Participant F clicked on
the Design Ideas tab from the homepage, which led her to previously made designs.
One of the categories available was Sports, which had links to specific sports including
Soccer, so she clicked directly onto Soccer. She found a t-shirt to her liking, clicked on
the rotate button to rotate to the back of the t-shirt, clicked on Add Text, and added her
last name. Once she typed in the text she wanted added to the shirt, she resized the
text by dragging the corners of the text box.
T-Shirt Design Website Usability Report
21
Figure 24. Printfly t-shirt rotate button
Figure 25. Printfly text and image resizing corners
Participant M struggled a bit with this portion of Task 2. He clicked on Start Designing
from the homepage and clicked Edit Product, but he was not satisfied with the page that
came up because it allowed the user to change the style and color of the shirt. So he
went back to the homepage and clicked on the Athletics option (see Fig. 2). Instead of
continuing this process, he then clicked on the Design Ideas button from the menu bar
and then continued in a similar process to that of Participant F to find the soccer shirt of
his choice. Rather than using the Add Text button, Participant M selected the Add
Names option. He entered his last name and also a number, as it was also an option,
but because this website allows the user to enter multiple names, the sample text is
“NAME” for the name and “00” for the number. At first, he was unsure if he had correctly
entered his name and number, and so he checked the name and number 2 times. This
process made him feel “stupid” and “like a 5-year old.” When he realized he wouldn’t be
able to see his name before purchasing the shirt, he expressed disappointment.
Figure 26. Printfly "add name and number" preview
Findings from Task 3
For the open-ended task of figuring out what to do with a problematic order, Participant
F scrolled down to the bottom of the homepage to look for information. She saw the
Help Center, under which she decided to look at the frequently asked questions first.
She quickly scanned through the questions there and found one that was applicable to
T-Shirt Design Website Usability Report
22
the situation. From the information provided, she decided to call the company in the
event of a problematic order.
Figure 27. Printfly help center in sitemap footer
Participant M noticed that in the banner at the very top of the page, there is a live chat
option and a 1-800 number to call. He said he would probably call or email, but said he
typically leaned toward calling because he likes the interaction of speaking to a live
person and hearing their voice.
Figure 28. Printfly live chat option and phone number in banner
Both participants thought this task was very easy for this website and did not encounter
any problems.
Zazzle
Findings from Task 1
After the first-impressions task, both participants noted that the purpose of Zazzle’s site
was not straightforward. There are many options available, but Participant F felt
overwhelmed by all the pictures without any helpful text, and did not have a chance to
look into all the features the website had to offer. Participant M felt overwhelmed
because there were too many products available, saying that it seemed comparable to
Amazon (http://www.amazon.com). He thought the average user would not have much
difficulty with this site, although he identified the purpose of this site as a shopping
website. While this is not incorrect, he made no reference to the t-shirt design aspect of
the site. In contrast, Participant F commented that the average user would probably
have no idea what the website was for if they happened to come across it by chance.
T-Shirt Design Website Usability Report
23
The first thing to catch the eye of both participants was a specific image (not shown
because the image no longer exists on the page) that was in the Featured Products &
Designs section of the page. Neither participant had any idea what each of the items in
this section represented, and did not believe the rollover text was helpful enough for the
user to understand what each picture represents.
Figure 29. Zazzle "Featured Products & Designs" section with example rollover text
Both participants had seen one other site before looking at Zazzle. Participant F said
she might use this site, but less computer-savvy people might have a lot of trouble.
Participant M said he would not use this site after having seen Printfly because it was
not as straightforward.
Findings from Task 2
For the task of creating a volleyball t-shirt, both participants began in the same manner.
They went to the Create dropdown menu from the menu at the top of the homepage,
and clicked on Custom T-Shirts, which was the first option.
T-Shirt Design Website Usability Report
24
Figure 30. Zazzle "Create" dropdown menu
From there, Participant F clicked on the Create a Shirt button on the right of the screen,
which took her to the design page. In contrast, Participant M clicked on the Men’s TShirts link, stating that it seemed to be a faster way to see the options than the other
types of t-shirts. He noted that he almost clicked on Screen Printed T-Shirts for Groups,
because it seemed like where one would go to create team shirts. Once he selected the
type of men’s t-shirt he wanted, the site directed him to the design page.
Figure 31. Zazzle create custom t-shirts page
When the user is directed to the design page, a modal panel pops up that instructs the
user to add an image and text to the page, but the user can easily skip this step. Both
participants attempted to add an image at this point by selecting the orange-outlined
box (see Figure 32). For new users who have not previously uploaded any images, no
images will appear under My Images, but have the option of logging in to view saved
images or clicking on My Computer in order to upload images (see Figure 33). Both
participants tried to click on My Images, but when nothing happened after multiple
clicks, they realized they had to upload an image. At this point, Participant M expressed
that he did not like the fact that there was no clipart available for him to use.
T-Shirt Design Website Usability Report
25
Figure 32. Zazzle "Get Started" design modal panel
Figure 33. Zazzle "Add images" design modal panel
After clicking the My Computer button, the participants clicked on the Select images to
upload button and were able to select the file they wanted uploaded. Participant F
added text in this modal panel and clicked OK. When she saw the current design, she
did not like that the image and the text were overlapping. She voiced that she had been
worried in the last step that the image and text would overlap if she added them
together in one step. She could not move the image without moving the text and viceversa because they were both selected. The selected items are shown to be selected
with a blue outline, but Participant F was unaware of this. She tried double clicking on
the text box itself, but nothing happened so she clicked on the X to delete it entirely.
Participant F then separately added text by clicking the Add Text… button shown in
Figure 34 and was then able to drag it around to move it.
T-Shirt Design Website Usability Report
26
Figure 34. Zazzle example of text and image both selected
Participant M canceled the option of adding an image with text concurrently. This
removed the modal panel. He then tried hovering over some unlabeled buttons to see
their functions in search of an option to add clipart, but none of them applied. He was
able to add an image and add text separately using the Add Images… and the Add
Text… buttons individually (see Figure 34).
Figure 35. Zazzle unlabeled buttons on design page
In sharing the design via email, both participants scrolled through the page to find the
Share button. It was difficult to find for both users because it was not prominently
displayed, as it was small in size, inconspicuous, and on the bottom half of the page.
Once they found it, they clicked on it, but were unhappy with the fact that the website
prompted them to register for the site first. They were unable to find a way to share their
designs without registering and logging in first.
Figure 36. Zazzle share button on design page
When Participant M was prompted to register, his initial reaction was to press the back
button on the web browser, which resulted in the text box disappearing on his design so
he had to add text to the design once more. He did not want to register for the site, so
he was stopped at this point for this task. Participant F did register and log in, but the
image that she used had a low resolution, which the website prompted her about. At this
time, she expressed her dissatisfaction with the lack of clipart available on the site,
T-Shirt Design Website Usability Report
27
which she said would prevent from this being a problem, as well as preventing any
copyright issues with copying an image from an image search on the web. She was told
to simply continue with the process and she was able to scroll down to the Share button
and entered email addresses to share the design.
Figure 37. Zazzle warning that Participant F received
In the task of customizing a preexisting soccer shirt, Participant F went to the Shop
Departments drop down menu, hovered over Clothing, which brought up an adjacent
menu, and selected T-Shirts. Then she looked for the search bar, which was in the
menu bar at the top of the page and entered “soccer shirt.” This returned many
preexisting soccer shirt designs and she selected on that she liked.
Figure 38. Zazzle "Shop Departments" drop down menu and "Clothing" menu
Figure 39. Zazzle search bar
Once she selected a shirt to her liking, she scrolled down to look for a customize link or
button. She found one after about 10 seconds, on the bottom corner of the t-shirt
preview. When she clicked it, she was able to add text as she did in the volleyball t-shirt
task, but this site did not offer the option of adding names as did the other two sites. The
T-Shirt Design Website Usability Report
28
participant noted that the button was not prevalent and that she doubted at first that she
would be able to customize the shirt.
Figure 40. Zazzle "Customize It!" button
In this task, Participant M started off similarly in that he went to the Shop Departments
drop down menu and hovered over Clothing, but he then clicked See All. This led him to
a new page that listed a large number of items not limited to apparel, and he clicked on
the Shop Now button under t-shirts.
Figure 41. Zazzle "Shop Now!" button on "Clothing" page
The participant then scrolled down to Narrow By Topic and selected Sports & Leisure.
This yielded a vast array of sports and leisure shirts, but the second shirt returned
happened to be a soccer shirt. The shirt had an image of a soccer ball and a name in
the middle of the ball. When he clicked on the shirt, he was directed to the design page,
where he replaced the previous name, Peter, with his last name.
T-Shirt Design Website Usability Report
Figure 42. Zazzle "Narrow By Topic" option
Figure 43. Zazzle text box on customizable soccer tee
29
T-Shirt Design Website Usability Report
30
Findings from Task 3
For the open-ended task of determining what to do with an issue with an order,
Participant F went to the homepage and scrolled down to the sitemap at the bottom of
the page. Under Quick Links, she clicked on Help, which opened a popup window. She
clicked on Zazzle Return Policy under Shipping & Returns. She was satisfied with the
information provided and said she would follow the instructions provided.
Figure 44. Zazzle "Help" link in sitemap footer
Figure 45. Zazzle "Help" popup window, return policy link
T-Shirt Design Website Usability Report
Figure 46. Zazzle "Help" popup window, merchandise return information
Participant M also scrolled to the sitemap footer to find contact information for the
company. He saw that Zazzle has a satisfaction guarantee and noted that he would
contact them via email or phone. The participant then clicked on Contact Us under
About Us and was directed to a page that had tabs for Quick Answers, Email, and
Phone tabs. He remarked that it was convenient to list the contact information along
with the hours of availability and said that a phone call would probably be best for a
quick response, but if he was not in a hurry, he would send an email.
Figure 47. Zazzle satisfaction guarantee in sitemap footer
Figure 48. Zazzle "Contact Us" link in sitemap footer
31
T-Shirt Design Website Usability Report
Figure 49. Zazzle email tab under "Contact Us"
Figure 50. Zazzle phone tab under "Contact Us"
32
33
T-Shirt Design Website Usability Report
Discussion
The questionnaire (Table 2) was considered in analyzing overall the design functionality
of each site, with questions directed towards targeting interface design, information
design, and interaction design.
Interaction
Information
Interface
Question
F
Custom Ink
M
Avg
Overall ease of reading
5
5
5
the text
Overall appearance of
site (color, font,
5
5
5
graphics, etc.)
AVERAGE
5
5
5
Quantity of information
about designing,
5
5
5
purchasing, and/or
sharing products
Quality of information
about designing,
5
4.5 4.75
purchasing, and/or
sharing products
AVERAGE
5
4.75 4.875
Navigating between
5
5
5
pages
Methods of contacting
4
5
4.5
the company
Overall website
5
5
5
experience
AVERAGE 4.67
5
4.83
F
Printfly
M Avg
F
Zazzle
M
Avg
5
5
5
4
5
4.5
4
5
4.5
4
5
4.5
4.5
5
4.75
4
5
4.5
5
5
5
5
4.5
4.75
5
5
5
5
5
5
5
5
5
5
4.75 4.875
5
5
5
4
4.5
4.25
5
5
5
5
5
5
5
5
5
4
4.5
4.25
5
5
5
4.33 4.67
4.5
Table 3. Results of Site Feedback Questionnaire
Both participants scored each site rather leniently. Even when they found frustration
with a certain aspect of a site during the task portions, they did not reflect this in the
follow-up questioning very much and only went as low as 4 (“satisfied”) in scoring.
Some of this was due to the questionnaire focusing on aspects that were not specific
enough to the difficulties encountered. Another explanation is that the participants
blame themselves for not being able to efficiently master the features of each site while
not realizing that the reason for this is that there may be some of the design flaws.
Participant M, in particular, did audibly blame himself for struggling through some tasks
and said that he would not have such issues if he were more tech-savvy. Because of
the overall high scoring of each of the sites, small discrepancies in scoring indicate
large discrepancies in satisfaction.
T-Shirt Design Website Usability Report
34
Participant M in particular had difficulty in scoring any site below a 5. The first time he
gave a score under 5, he paused for about 5 seconds and asked if he had to give
discrete scores, or if he could give half points. Participant F, on the other hand, did not
ask about giving half points and may have changed her scoring if she had known that
the scoring did not have to be on a discrete scale.
Interface Design
According to both participants, Custom Ink was most consistently very satisfactory in its
interface design and scored 5’s across the board. One of the issues with Printfly and
Zazzle was that they had problems for slow internet connection. Some of the dropdown
menu options were hard to read when the page was loading because the background of
the menu was not loading quickly enough, and the links blended into the background of
the homepage. Zazzle was problematic in that it is a very graphic-heavy site without
much white space between graphics and was somewhat cluttered looking because of it.
Printfly was the second most satisfying for information design and received an average
of 4.75. The participants noted that both Custom Ink and Printfly were pleasing to the
eye because of the large amount of white space and overall simplicity of its look and
options.
Figure 51. Printfly dropdown menu on slow internet connection before page is fully loaded
Information Design
For information design, Printfly scored most consistently very satisfactory among both
participants with 5’s across the board because they felt that the site provided a
satisfactory amount of useful information on the homepage, where it was organized
neatly. That is, they felt there was not a lot of extraneous information, but just enough
that any questions they had about using the site were always answered.
T-Shirt Design Website Usability Report
35
Custom Ink and Zazzle both averaged 4.875. Participant F scored both sites at 5 for
each question of this category. Participant M, on the other hand, scored Custom Ink at 5
and 4.5 for quantity of information and quality of information, respectively, and scored
Zazzle at 4.5 and 5 for quantity of information and quality of information, respectively.
The reason Custom Ink did not score all 5’s for Participant M in this category is that
some of the text was ambiguous or vague. The reason Zazzle did not score all 5’s for
this category is that he felt he was overloaded with options.
Interaction Design
For interaction design, Printfly was most consistently very satisfactory. Participant F
scored Custom Ink at a 4 because she felt limited to calling the company in Task 3, with
no other contact options. Both participants scored Zazzle lower on navigating between
pages and overall website experience. They had both experienced one other t-shirt
designing website before encountering Zazzle, which may have biased their perception
of how easy or difficult Zazzle was to use.
Although neither of the participants commented on this, each of the websites only
allows designs on a select printable area. Custom Ink does not allow the user to drag
images or text into the printable area. Although Printfly and Zazzle allows users to drag
images and text into unprintable area, both of these websites does not consistently alert
the users that they are outside of the printable area.
Recommendations
Based on this usability study, the main changes that should be made are as follows:
Custom Ink
1. Make vague and ambiguous text more clear.
2. Reword the name for the Design Ideas tab.
3. Make sure all contact options are visible each time there is contact information
presented.
4. Make links available to pre-made items for each type of apparel from the apparel
page itself.
5. Allow users to resize text and images using resizing corners or arrows that
enlarge and shrink selected items.
6. Allow users to preview t-shirts with their names and numbers on them.
Printfly
1. Use one color in the background for the dropdown menus rather than using an
image that takes longer to load.
2. Alert the user when text or image is outside of printable area.
3. Make links available to pre-made items for each type of apparel from the apparel
page itself.
4. Allow users to preview t-shirts with their names and numbers on them.
T-Shirt Design Website Usability Report
36
Zazzle
1.
2.
3.
4.
Use smaller graphics with more space around each graphic.
Provide more clear information in hovertext.
Feature the design aspect of the website, and not just customization and sales.
For customizing preexisting items, make the “Customize It!” button more
conspicuous.
5. Alert the user when text or image is outside of printable area.
Summary
The usability test found that Prinfly was preferred over Custom Ink and Zazzle. Prinftly
scored highest in both information design and interaction design, and came in a close
second in interface design.
In answering the first research question of this study, “How does the user’s perception
of the overall design of each website affect their experience and likelihood to use the
website for the desired end-goal?” the researcher found that the sites with a more
satisfactory user perception of overall design of the website increases the likelihood of
the use of such a website. Although Zazzle seems more established in the number of
products it offers, it is more cumbersome for the simple task of creating a t-shirt design.
For the second research question of this study, “How does each of the sites facilitate
designing and/or purchasing a product?” it was found that the sites used many features
that make the site aesthetically pleasing while also trying to guide the user through
steps in a specific sequence. This is done using modal panels, dropdown menus, and
even by labeling the steps.
In conclusion, while Printfly is preferred over Custom Ink and Zazzle overall, all three
websites have their strengths and weaknesses. Websites should be consistently
maintained and updated for this very reason.
T-Shirt Design Website Usability Report
37
References Used
Black Lightning. (2011). Black lightning. Black Lightning. Retrieved from
http://blacklightning.com/
Dunn, K. (2012). Tee shirt business. Dunway Enterprises.
Nielsen, J., Snyder, C., Molich, R., & Farrell, S. (2000). Methodology. Nielsen Norman
Group. Retrieved from
http://www.nngroup.com/reports/ecommerce/methodology.html
Porges, S. (2008, January). 2007 Crunchies: The winners. TechCrunch. Retrieved
November 26, 2012, from http://techcrunch.com/2008/01/18/2007-crunchies-thewinners/
Rivoli, P. (2009). The travels of a t-shirt in the global economy: An economist examines
the markets, power, and politics of world trade. Hoboken, New Jersey: John
Wiley & Sons.
T-Shirt Design Website Usability Report
38
Related Links on the Web for the Topic
http://www.customink.com
http://www.printfly.com
http://www.zazzle.com
Author Information
This paper is written by Eugenie Kim for the course EDC385G Designs & Strategies for New Media
(http://www.edb.utexas.edu/liu-dev/design.html) at the University of Texas at Austin
(http://www.utexas.edu).
T-Shirt Design Website Usability Report
39
Index of Figures and Tables
Figure 1. Custom Ink homepage __________________________________________ 5
Figure 2. Printfly homepage ______________________________________________ 6
Figure 3. Zazzle homepage ______________________________________________ 7
Figure 4. Custom Ink menu bar and features ________________________________ 12
Figure 5. Custom Ink "Add Art" feature ____________________________________ 13
Figure 6. Custom Ink image resizing feature ________________________________ 13
Figure 7. Custom Ink text resizing feature __________________________________ 13
Figure 8. Custom Ink centering feature ____________________________________ 13
Figure 9. Custom Ink "Start Designing" button _______________________________ 14
Figure 10. Custom Ink save/send button ___________________________________ 14
Figure 11. Custom Ink "save your design" modal panel ________________________ 15
Figure 12. Custom Ink "add names" feature _________________________________ 15
Figure 13. Custom Ink "add name" preview _________________________________ 16
Figure 14. Custom Ink contact links at top of homepage _______________________ 16
Figure 15. Custom Ink contact links and help center in sitemap footer ____________ 17
Figure 16. Printfly shipping information on homepage _________________________ 17
Figure 17. Printfly features 2 ____________________________________________ 18
Figure 18. Printfly features 3 ____________________________________________ 18
Figure 19. Printfly add clipart feature ______________________________________ 19
Figure 20. Printfly "Start Designing" option through selecting t-shirt type and color ___ 19
Figure 21. Printfly step 2 in design process _________________________________ 20
Figure 22. Printfly "Save" modal panel _____________________________________ 20
Figure 23. Printfly "Share" modal panel ____________________________________ 20
Figure 24. Printfly t-shirt rotate button _____________________________________ 21
Figure 25. Printfly text and image resizing corners ___________________________ 21
Figure 26. Printfly "add name and number" preview __________________________ 21
Figure 27. Printfly help center in sitemap footer ______________________________ 22
Figure 28. Printfly live chat option and phone number in banner _________________ 22
Figure 29. Zazzle "Featured Products & Designs" section with example rollover text _ 23
Figure 30. Zazzle "Create" dropdown menu _________________________________ 24
Figure 31. Zazzle create custom t-shirts page _______________________________ 24
Figure 32. Zazzle "Get Started" design modal panel __________________________ 25
Figure 33. Zazzle "Add images" design modal panel __________________________ 25
Figure 34. Zazzle example of text and image both selected ____________________ 26
Figure 35. Zazzle unlabeled buttons on design page __________________________ 26
Figure 36. Zazzle share button on design page ______________________________ 26
Figure 37. Zazzle warning that Participant F received _________________________ 27
Figure 38. Zazzle "Shop Departments" drop down menu and "Clothing" menu ______ 27
Figure 39. Zazzle search bar ____________________________________________ 27
Figure 40. Zazzle "Customize It!" button ___________________________________ 28
Figure 41. Zazzle "Shop Now!" button on "Clothing" page ______________________ 28
Figure 42. Zazzle "Narrow By Topic" option _________________________________ 29
Figure 43. Zazzle text box on customizable soccer tee ________________________ 29
T-Shirt Design Website Usability Report
40
Figure 44. Zazzle "Help" link in sitemap footer _______________________________ 30
Figure 45. Zazzle "Help" popup window, return policy link ______________________ 30
Figure 46. Zazzle "Help" popup window, merchandise return information __________ 31
Figure 47. Zazzle satisfaction guarantee in sitemap footer _____________________ 31
Figure 48. Zazzle "Contact Us" link in sitemap footer__________________________ 31
Figure 49. Zazzle email tab under "Contact Us" ______________________________ 32
Figure 50. Zazzle phone tab under "Contact Us" _____________________________ 32
Figure 51. Printfly dropdown menu on slow internet connection before page is fully
loaded __________________________________________________________ 34
Table 1. Demographics of Participants............................................................................ 8
Table 2. Site Feedback Questionnaire .......................................................................... 11
Table 3. Results of Site Feedback Questionnaire ......................................................... 33