USA: +1(669)289-8683 
Sign in
Read CASE STUDY 5.1 (attached):
Applying the User Experience Framework to Online Fundraising
(NO need to read the second case about clothes shopping)
Write a short summary of the case (one paragraph) and then answer the following
Why is there a need to focus on user interaction and enhance the user experience when it comes to online fundraising?
Other than fundraising for non-profits, what other sites would benefit by focusing on enhancing the user experience? Why?
According to this case:
Wright and McCarthy’s (2003) user experience framework recognizes that all human experiences are holistic and relational, and are comprised of a balance of sensual, cerebral, and emotional ‘‘threads.’’ The user experience framework is built on the goal of sense-making: that is, unifying the different threads of a situation, in this case, an online experience, to create meaning for the user. The full framework includes four threads (compositional, sensual, emotional and spatio-temporal) and six corresponding sense-making elements (anticipating, connecting, interpreting, reflecting, appropriating and recounting).
Select your favorite non-profit and visit their website.
- What evidence can you find of the “user experience framework” as described above and detailed in the case?
- Does the site “Create meaning” for you?
- Does it follow the design concepts outlined in the case?
Please provide complete answers! Double check your spelling/grammar. Be sure to cite any references.
CASE STUDY 5.1
Using the ‘Technology as
Experience’ Framework
Introduction
To show how the Technology as Experience framework (introduced in Chapter 5) can be used
to think about and inform design, two case studies are presented here. Both used it to guide their
initial ideas for the design of two different websites: (i) an online fundraising site and (ii) a site that
reviews men’s clothing, intended to appeal to men who do not enjoy shopping. Both were written
by students as part of a graduate course in Human-Computer Interaction and hence it should be
noted are only hypothetical websites (see the end of the case study for the assignmenti).
The first was written by Heather Collins when she was a graduate student at Indiana University.
She used primarily the sensory and compositional threads of the framework, leading to insights on
how fundraising organizations can maximize their website to tell a compelling story to a potential
donor that is balanced in content and emotion. Her design combines elements of storytelling,
appropriate emotional triggers, and a welcoming atmosphere to encourage potential donors to
act by making a donation, volunteering their time, telling their friends, or attending a related
event. Through this process, the donor can create a meaningful connection to a cause or problem
directly impacting their community. The personal connection makes the online donation experience
pleasurable for the user.
The second was written by Aaron Loehrlein when he was also a graduate student at Indiana
University. He used all the threads to think about designing a website for a pleasurable experience for
clothes shopping among men who ordinarily hate clothes shopping. Because the website is intended
as a consumer guide for men’s clothes, and not a retail site, it encourages a more relaxed emotional
interaction with its users. The website does not present clothes as part of a larger fashion trend, but
describes how the clothes are likely to fit into the life of the wearer. The descriptions are meant to
provide an entertaining, non-challenging experience by using simple, jargon-free language, familiar
metaphors, and sarcastic humor that is never aimed at the wearer. He found the emotional and
sensual threads to be particularly useful to design for this.
Interaction Design: Beyond human-computer interaction Sharp, Rogers and Preece
2007 John Wiley & Sons, Ltd ISBN-13: 978-0-470-01866-8
Applying the User Experience
Framework to Online
Fundraising
Heather Collins
Introduction
In an age where 67 percent of Americans use the Internet to find and purchase products — ranging
from the latest bestseller on Amazon.com to a used sofa on Craig’s List — information architects and
designers have an opportunity to investigate why customers find particular shopping experiences
appealing or pleasurable1. While users may cite practical reasons such as the convenience of 24/7
shopping or the availability of millions of products, it is equally likely that less tangible elements — such
as aesthetics, mood or a sense of personal connection — help seal the deal. For example, companies
like Nike (http://www.nike.com) have begun to design cinematic, highly interactive retail
sites that evoke emotion and invite customers to identify with their product ‘‘culture.’’ In short,
these companies are designing for a user experience that goes beyond pragmatism (Wright and
McCarthy, 2003).
While this approach to interaction design may seem attainable only to an organization with a
cadre of Flash programmers and a healthy marketing budget, it need not be. Drawing on Wright
and McCarthy’s (2003) user experience framework, this paper will address how to design for
a pleasurable user experience in the context of non-profit online fundraising. The next section
provides a brief background on the online fundraising environment, followed by an explanation of
the user experience framework elements particularly applicable to the online donation process. The
following section offers a prototype of a new online donation experience, including design concepts
and scenarios. The final section discusses the benefits and challenges of the proposed design, as well
as potential design trade-offs and evaluation methods.
1December, 2005 Internet demographics from Pew Internet and American Life Project:
http://www.pewinternet.org/trends/Internet Activities 12.05.05.htm
Interaction Design: Beyond human-computer interaction Sharp, Rogers and Preece
2007 John Wiley & Sons, Ltd ISBN-13: 978-0-470-01866-8
Heather Collins 3
A Brief Overview of Online Fundraising
In 2004, Americans donated between $162 million and $3 billion online to nonprofit organizations
encompassing youth and family services, faith-based efforts and humanitarian and relief initiatives,
just to name a few (Sausner, 2005)2. According to the Pew Internet and American Life Project,
the number of online donations in the U.S. has increased by 53 percent since January, 2005.
The devastating effects of the 2004 Asian tsunami and recent U.S. hurricanes have prompted
unprecedented levels of Internet donations to organizations like the Red Cross, The Salvation Army
and CARE (Horrigan and Morris, 2005). In general, nonprofit organizations strive to make it easy
for donors to give. These organizations have come to recognize the importance of integrating Web-
based initiatives into their fundraising strategies because the Web enables them to reach thousands of
potential donors at minimal cost.
Although there is little empirical evidence to explain why people give online versus offline, it
is likely that convenience, impulse and loyalty all play a part. Interestingly, these are similar reasons
people choose to shop online. In a recent study, Holt and Horn (2005) offered five factors that seem
to motivate offline giving to nonprofits: (1) the organization’s mission; (2) whether the organization
adds value/has a sense of responsibility to the community; (3) financial stability and transparency of
the organization; (4) the quality of volunteer leadership (e.g. board, committees); and (5) the quality
of staff. The authors also stressed that organizations venturing into the online fundraising domain
need to explicitly invite donors to give online, offer a simple, attractive and secure interface, and
maintain open and clear communication channels (online or otherwise) with the donor to ensure
that the relationship continues (Holt and Horn, 2005).
Why We Need a New Perspective
The goal of this project is to design a rewarding online giving experience from the perspective of the
donor. In general, nonprofit organizations tend to be late technology adopters and many organizations
have only established Web sites within the last few years. These sites typically function to provide
donors, volunteers and grant-makers with information about an organization’s mission, programs and
leaders. For example, the Central Indiana Community Foundation (http://www.cicf.org) is
a relatively static site, and a donor has to work very hard to find how he might be able to give
online. Two levels beyond the home page, the donor finds a page entitled ‘‘Ways to Give,’’ where
he can download a donation form to mail into the organization, but not give online. This is not an
uncommon scenario for many small to medium-sized nonprofit organizations.
At present, nonprofit Web sites with online giving capabilities tend to be purely functional — not
unlike e-commerce sites of 10 years ago. A significant number of nonprofit organizations also use
third-party vendors such as Network for Good (http://www.networkforgood.org) for
2I suspect the disparity in this figure is related to difficulties in accounting for donations related to recent natural disasters; for
example, $350 million was raised online for the 2004 tsunami alone.
4 Applying the User Experience Framework to Online Fundraising
online fundraising because they do not have the technical resources to manage online donations
in-house. However, these services typically take the donor to a separate e-commerce interface with
a different look and feel from the original organization’s Web site. Thus, it is safe to say that
few nonprofit organizations have been able to design for an online fundraising user experience
due to practical constraints. By applying Wright and McCarthy’s user experience framework
to the context of online giving, it may be possible to better integrate the mission, vision and
accomplishments of these important organizations with the online donation process. In addition,
nonprofit organizations would have an opportunity to provide potential donors and friends with
a balanced cerebral and emotional online experience that may entice them to donate more
generously.
The User Experience Framework
On a theoretical level, Wright and McCarthy’s (2003) user experience framework recognizes
that all human experiences are holistic and relational, and are comprised of a balance of
sensual, cerebral, and emotional ‘‘threads.’’ The user experience framework is built on the
goal of sense-making: that is, unifying the different threads of a situation, in this case, an
online experience, to create meaning for the user. The full framework includes four threads
(compositional, sensual, emotional and spatio-temporal) and six corresponding sense-making
elements (anticipating, connecting, interpreting, reflecting, appropriating and recounting). For
the purposes of this project, only the compositional, sensual and emotional threads will be
considered.
Quite simply, Wright and McCarthy’s (2003) compositional thread is the story. In the con
text
of online giving, the donor might ‘‘interpret’’ or ‘‘reflect on’’ a story about the people and places
the nonprofit organization is trying to help through special programs or services. Interestingly,
this thread coincides with a common fundraising tactic of using direct mail to tell donors a
story, with the hope that they will donate to the cause because they identify with or are moved
by the story. The compositional thread might be considered the cerebral element of the user
experience framework. In the online fundraising context, this thread may also include facts and
figures related to how much the organization must spend to support a particular program, or
what a $25 donation can provide. The simple gesture of providing important information to
the donor may help them decide how much to give. In fact, some nonprofit organizations,
such as Doctors Without Borders, do a very good job of including this information on their Web
sites:
Heather Collins 5
Source: Doctors Without Borders–http://
www torswithoutborders.org/
donate/what.cfm
On the other hand, the sensual thread
is concerned with connecting the user with
the experience — and keeping them there — by
coordinating the look, feel and atmosphere of
the site. The sensual thread operates at the sub-
conscious level, and in the present case would
help the donor determine if she feels a sense
of belonging or alienation, comfort or discom-
fort, trust or suspicion. As previously mentioned,
many nonprofit organizations outsource the online donation portion of their site, resulting in the
donor being brought to a site with a different interface to complete the transaction. While many
organizations will not be able to control all the sensual elements of the online donation experience,
they may be able to enhance the aesthetics of their Web site by using dynamic elements such as
coordinated photos, short video and audio, and thorough basic design elements of layout, color and
font.
Finally, the emotional thread is concerned with the user’s reaction to the experience; in other
words, how it makes them feel. For example, the donor may feel motivated to make a difference
by attending a fundraising event; she may be angered at the level of poverty in her neighborhood;
he may feel proud to be doing something proactive to help; or she may feel frustrated because the
organization is trying to ‘‘sell’’ itself via a flashy interface. Within the online fundraising model it is
also likely that the emotional thread and the compositional thread will overlap due to the inherently
emotional nature of stories describing people in need of food, shelter or medical care. In other words,
the emotional thread may have more than one meaning.
To summarize, the user experience framework offers nonprofit organizations the opportunity to
present potential donors and supporters a more holistic online experience by balancing storytelling
with emotional and sensory elements. While many aspects of Wright and McCarthy’s (2003)
framework have been useful in the context of online fundraising, it is worth noting the framework
has some ambiguities. For example, it is unclear exactly where the six sense-making elements fit
into the four threads and whether they are mutually exclusive. In addition, it seems that the threads
overlap. For example, it may be difficult to explicitly distinguish between the sensual thread and
6 Applying the User Experience Framework to Online Fundraising
emotional thread, and in the present case, one may find common elements in both the emotional thread
and the compositional thread.
Design Concepts and Scenarios
Wright and McCarthy’s (2003) user experience framework provides structure to a set of design
elements unique to the domain of online fundraising. Drawing on the insights of the above
user experience framework analysis, recent research on donor perceptions of the nonprofit sector,
and inspiration from other online environments, the following scenario and design concepts are
proposed:
Scenario
According to a recent study by Public Agenda, a nonpartisan civic engagement organization, the
typical American donor (who gives about $300/year) tends to trust and admire small, local nonprofit
organizations, decides to give to an organization based on a ‘‘gut-level interest’’ in the cause, and
values a personal connection with the charity (Arumi, Wooden and Johnson, 2005). The authors
also found that donors were turned off by flashy marketing campaigns because they felt as if the
organization was trying to sell them something, and were wary of organizations that spent large sums
on advertising when those funds could have been used to fulfill their mission (Arumi, Wooden and
Johnson, 2005).
Based on these findings and the assumptions that (1) donors want to know where their money
is being spent, and that even a small contribution can make a difference; and (2) donors want
to have choices in the types of programs or projects they support, a new online fundraising
paradigm is proposed. This Web site will enable multiple nonprofit organizations within a specific
geographic region (e.g., city, county) to post detailed information about programs or projects that
require assistance. The overarching goal is to enable individual or corporate donors to contribute to
organizations in their neighborhood, or to organizations addressing specific issues like homelessness,
domestic violence, historical preservation or at-risk youth. Figure 1 below depicts a prototype of this
type of site, ‘‘Boston Gives.’’
When a donor visits Boston Gives, she may login to her profile, or search for a project based
on geographic region (zip code) or by cause/issue. She may also browse through all currently
active projects. On the project page (see Figure 2), the donor will learn the story behind the
project, including the neighborhood and people it will serve. Once the donor decides to give,
she will be brought to an e-commerce interface, but one which is fully integrated with the
Boston Gives site. The page will shows details about the specific project she is contributing
to, the current financial status of the project, and links to news and updates related to project
milestones.
Heather Collins 7
BostonGives your dollars helping your community.
find projects
by zip code:
by cause:
Go
login
username:
password:
Go
home about donate organizations sponsor contact us
featured project
Organization: Project Hope
Goal: Build new Youth Center
in Roxbury, MA
Contributions Received:
$20,000
Contribution Goal:
Donate
→watch movie
$0 GOAL
see all projects >>
Figure 1 Prototype of ‘‘Boston Gives’’ home page
Design Concepts
Simple, clear interface. First and foremost, a simple, clear interface will enable the donor to decide
what to do on the site — whether it is donating money, searching for projects based on geographic
region or cause, or logging into their profile. Some nonprofit organization Web sites offer donors
information on every project and news item, effectively creating information overload. In addition,
unlike typical nonprofit Web sites offering online donation capabilities, Boston Gives would integrate
vital information about the project throughout the donation process. Before giving, a donor can
learn about the project’s goal, the organization leading it, and neighborhoods the project will impact
(see Figure 2). Finally, the simple design will help Boston Gives balance factual information (what
$25 will provide) with emotional triggers, such as a short film about the project.
Inspiration for including a short film in the prototype came from Canadian singer Sarah
McLachlan’s Web site, (http://www.worldonfire.ca/). Through a series of simple, highly
8 Applying the User Experience Framework to Online Fundraising
emotional clips, McLachlan documents how she took $150,000 typically used to produce a music
video and donated it to charities around the world. The look and feel of her project indicates that
organizations can keep it simple and still create a moving experience.
Source: Screen shots from video at http://www.worldonfire.ca
Engaging: Tells a story. The most salient component from Wright and McCarthy’s (2003) user
experience framework is the compositional thread, or story, told through short, narrative descriptions
of the project as well as some form of multimedia. The authors view ‘‘design as conversation with
a situation,’’ with the purpose of engaging the user and empowering him to create meaning from
the experience. Nonprofit organizations can choose how they want to present their story on Boston
Gives, and in essence, help design for a user experience. They may opt to tell their story through
multiple short videos, still images, audio, text or some combination of multimedia.
Transparency and Feedback: Where does money go? Another important design element is the
transparency and feedback mechanism included on the project page. As previously mentioned, donors
trust nonprofit organizations when they maintain transparency and open lines of communication.
For example, Heifer International (http://www.heifer.org/), enables donors to buy a
farm animal — a cow, lamb, flock of chicks, a trio of rabbits — which are then sent to families in
underdeveloped countries. The site does an excellent job of explaining exactly what your money
buys (e.g., $120 buys the gift of a goat) along with short descriptions of how the animal will help the
family or community.
In addition, the Boston Gives project page offers donors two feedback mechanisms — updates
on how the project is progressing, and a status bar indicating how much money has been raised,
and how much more support the project needs. Again, this helps instill a sense of trust between the
organization and the donor, as it assures the legitimacy of the organization. Furthermore, the donor
feels that their donation is actually making a difference.
Locally based, multiple projects and causes. The final design element is based in on the idea that
donors want to have choices — choices about what kind of projects they support, the location of the
Heather Collins 9
projects, and how they want to give. By enabling donors to support specific initiatives, nonprofit
organizations may find that donors are more fully engaged in the issue. This may result in more
generous financial donations as well as ‘‘spillover effects’’: donors may in addition volunteer their
time or tell their friends about the project.
BostonGives your dollars helping your community.
watch film
home about donate organizations sponsor contact us
Goal: Build new Youth Center in Roxbury, MA
Organization: Project Hope
500 Dorchester Avenue
Roxbury, MA 02111
617.555.1111
About the Project
text
About the Neighborhood
text
News &Updates
text
Contributions Received: $20,000
Contribution Goal: $34,000
Donate
$0 GOAL
contribute
login
username:
password:
Go
→ play
→ donate $
→ tell a friend
→ volunteer
→ donate
supplies
Where Does the Money Go?
$25 will pay for 5 new basketballs
$75 will pay an onsite math tutor for one week
$150 will buy a month of art supplies
Figure 2 Prototype of ‘‘Boston Gives’’ Second Level Project Page
10 Applying the User Experience Framework to Online Fundraising
Discussion
According to Wright and McCarthy (2003), the process of sense-making ensures that we view an
experience through the eyes of a person. By applying the user experience framework to the context of
online fundraising, organizations have an opportunity to tell a compelling story to a potential donor
that is balanced in both content and emotion. The combined elements of storytelling, appropriate
emotional triggers, and a welcoming atmosphere throughout an online fundraising environment like
Boston Gives will encourage donors to act by making a donation, volunteering their time, telling
their friends or attending a related event. The online experience helps the donor create a meaningful
connection to a cause or problem directly impacting their community. It is this personal connection
which makes the online donation experience pleasurable for the user.
On a more practical level, a site like Boston Gives may be appealing to donors due to its simple
interface, and because it provides multiple, obvious options for action. Often, nonprofit organization
Web sites provide so much information about the organization and its programs that the donor does
not know where to begin. The donor may read about a certain project, feel engaged, but then
be distracted by a different news item or navigate to an external link. This translates into missed
donations for the organization. Furthermore, Boston Gives may provide small nonprofits or those
with very limited resources or technical expertise with a place on the Web for the first time.
It is difficult to predict whether an online fundraising Web site like Boston Gives would be
successful, or how users would react to a centralized site with hundreds of worthy causes to choose
from. In order to evaluate the proposed design, it would make sense to solicit feedback from
nonprofit IT professionals. In addition, it would make sense to conduct a pilot study in a city with a
vibrant nonprofit community, such as Boston, MA or San Francisco, CA. By working closely with
a diverse group of users, interaction designers can assess whether a model like Boston Gives would
in fact offer donors a holistic, integrated online giving experience.
As indicated by a recent study, nonprofit organizations have an opportunity to utilize online
environments in order to fulfill their mission. Designing for an online donation experience that
balances cerebral and emotional elements will help nonprofit leaders keep sight of the ‘‘visceral nature
of donors’ charitable impulses . . . [donors who] prefer an active rather than passive engagement in
charities . . . and want to see the effects of the organization’s work in their local communities’’
(Arumi, Wooden, and Johnson, 2005, p. 31).
References (Print)
ARUMI, A. M., WOODEN, R. and JOHNSON, J. (2005). The charitable impulse: A report from
Public Agenda. Retrieved on November 13, 2005, from http://www.publicagenda.org/
research/research reports details.cfm?list=94
Heather Collins 11
FORLIZZI, J. and BATTARBEE, K. (2004) Understanding Experience in Interactive Systems.
DIS04 Conference Proceedings, Cambridge, MA, August 2004, 261–268.
GIRGENSHON, A. and LEE, A. (2002). Making web sites be places for social interaction. Proceedings
of the 2002 ACM conference on Computer supported cooperative work. 136–145.
HOLT, G. E. and HORN, G. (2005). Taking donations in cyberspace. Bottom Line: Managing Library
Finances,18(1), 24–28.
HORRIGAN, J. and MORRIS, S. (2005). 13 million Americans made donations online after Hurri-
canes Katrina and Rita. Retrieved on November 26, 2005, from http://www.pewinternet.org/
METZ, C. (2005, Nov 22). Online donations to the rescue. PC Magazine. Retrieved on November 27,
2005, from http://www.pcmag.com/article2/0,1759,1879807,00.asp
PERRY, S. (2005, Nov 25). Survey finds spike in online giving prompted by hurricane donations.
Chronicle of Philanthropy, 17(28). Retrieved from http://philanthropy.com/free/update/
2005/11/2005112401.htm
POOLEY, E. (2005). Rethinking how we give. Canadian Business, 78(16). Retrieved on November 13,
2005, from Academic Search Premier.
SAUSNER, R. (2005). Getting to one-click giving. University Business, August 2005, 8(8), 60–63.
SINCLIAR, M. (2005, Nov 1). Relief, bequests push the NPT 100. Nonprofit Times: Special Report.
Retrieved on November 20, 2005, from http://www.nptimes.com.
WALLACE, N. (2004, Jan 22). Charities try new year-end online appeals. Chronicle of Philanthropy,
16(7), 28.
WALLACE, N. (2005, June 9). A surge in online giving. Chronicle of Philanthropy, 17(17), 7–12.
WRIGHT, P. and McCARTHY, J. (2003). Making sense of experience. In Blythe, Monk, Over-
beeke and Wright (2003) Funology: From usability to user enjoyment. Pre-final chapter retrieved from
http://www-users.cs.york.ac.uk/∼pcw/
12 Applying the User Experience Framework to Online Fundraising
References (Online)
CARE USA: https://donate.care.org/05/170420990000/?source=170670020000
Central Indiana Community Foundation: http://www.cicf.org/
Charity Navigator: http://www.charitynavigator.org/
Doctors Without Borders: http://www torswithoutborders.org/donate/
what.cfm
Heifer International: http://www.heifer.org/
Intermediate Technology Development Group (now Practical Action): http://www.itdg.org/
McLACHLAN, S. (2004). World on fire. Music Video: http://www.worldonfire.ca/
YMCA of San Diego County: https://www.ymca.org/?jumpSection=giving
Shopping for Clothes:
A Pleasure?
Aaron Loehrlein
Introduction
This case study describes a website that reviews men’s clothes. It is designed to appeal to men who do
not enjoy the process of selecting and purchasing clothes. The website is a consumer guide to men’s
clothing, and as such allows for a more relaxed emotional atmosphere than a site that retails clothes
and accessories. The website does not present clothes as part of a larger fashion trend, but describes
how the clothes are likely to fit into the life of the wearer. The descriptions will design for an
entertaining, non-challenging experience by using simple, jargon-free language, familiar metaphors,
and sarcastic humor that is not aimed at the user.
This conception for this website is partially in response to websites such as Guyshop
that they sell. While this sort of stylishness is fun to look at, for many users it creates a dynamic that
discourages the actual purchasing of garments and other items. One reason for this is that the clothes
all seem to belong together on the website, instead of inviting the user to consider what he might
look like if he were to wear a particular garment. The website described in this paper focuses on how
a user might think about clothes, whether they are in a shop, his closest, or on his person. Because
it deals with men’s clothes, the website should be almost exclusively of and by men. It should be
primarily for men, but not exclusively so (women should feel encouraged to use the website).
Although the website can design for the experience of selecting clothes, it must acknowledge that
clothes shopping is a highly familiar experience in western culture. No matter how the clothes are
presented or discussed, they must be selected, purchased, and worn. This well-established experience
should inform the strategy for designing the website.
The User Experience Framework
The framework used to inform the design of the website is the User Experience Framework, by
Wright and McCarthy (2003). This framework identifies four ‘‘threads’’ by which user experience
Interaction Design: Beyond human-computer interaction Sharp, Rogers and Preece
2007 John Wiley & Sons, Ltd ISBN-13: 978-0-470-01866-8
14 Shopping for Clothes: A Pleasure?
may be designed: compositional, sensual, emotional, and spatio-temporal. Because the experience of
shopping for clothes is an emotional experience that is based on the sensuality of clothes, the sensual
thread and the emotional thread are likely to be the most important.
It would seem as though the emotional thread cannot be engineered directly, but acts as more of
a dependent variable that is affected by the other three threads. For example, if one wanted to design
for a tranquil emotion, one could use soft greens and yellow and display images of fields. Similarly,
if one wanted to design for an emotion of fear, one could create a website that featured fake blood
and ominous music. However, in both cases, what is really being designed is sensuality. One could
use the compositional thread to create emotions, perhaps by leading to a critical piece of information
over multiple web pages in order to create suspense. Wright et al provide the example of referring to
a movie star as one means of designing for emotion that does not necessarily rely on the other three
threads. This seems to suggest that the emotional thread is in practice a ‘‘miscellaneous emotion’’
thread. That is, it is concerned with emotions that do not result from sensual, compositional, or
spatio-temporal factors.
The concepts and scenarios of using the proposed website will be explained in terms of the four
threads of the User Experience Framework.
The Emotional Thread
The website does not actually sell garments or other products. It reviews garments, which the user
might then purchase elsewhere. Because the user that is intended for this website is characterized
by fear of clothes, the non-commercial aspect of the website should serve to reduce the pressure of
selecting and purchasing clothes.
The website Television without Pity
describes a ‘‘complex love/hate relationship’’ that its users have with the website’s primary topic,
television shows. Clothes probably inspire a similar love/hate relationship among people in general.
However, among the website’s intended audience, clothes probably do not inspire as strong a
emotional reaction as do television shows. For example, it is unlikely that there would be much use
for a forum in which users could debate the merits of a particular sweater. In addition, there are
simply too many specific articles of clothes for each one to appear on the website. Therefore, only a
representative cross-section of garments will be reviewed.
Overall, the site should not require a great deal of commitment from the user. For example,
there could hypothetically be a form where the user selects his skin, hair color, and eye color
from a variety of models. The website might then pass this information to a back-end database that
determines the user’s best color for garments. However, the people for whom the website is intended
would probably not want to go through this process. For one thing, the type of user for which the
website is made does not like looking at models (at least not male models). And he certainly takes
The User Experience Framework 15
no pleasure in comparing his body to the bodies of models. This approach, and others like it, are
potentially useful, but fall outside the user experience for which the website is designed.
For these reasons, the website is unlikely to have many interactive features. The reviewers will
post fairly short reviews of articles of clothing that have been selected arbitrarily. The reviews will be
highly opinionated and not always fair. The purpose of this approach is to encourage the user to think
about the validity of the review. The act of forming an opinion review is likely to entail forming an
opinion about the garment under review. If the user becomes comfortable in forming such opinions,
the website has achieved its purpose. The website should aspire to discussing the clothes in a way
that is informative without incorporating much jargon. Even terms as basic as ‘‘inseam’’ might be
off-putting to the intended audience. When discussing a cotton T-shirt, mention the thickness of the
fabric in the specifications, but not in the review. Instead, the review should talk about how hot it
was (or is likely to be). Instead of talking about how well the garment breathes, the reviewer should
describe how clammy he felt.
The home page of the website will briefly discuss the frustrations involved with clothes that look
good in the store, but that end up not being worn once they are purchased. The tone of text should
be no-nonsense, but also entertaining and engaging.
The Sensual Thread
The website will not have many graphics and probably no sound effects or multimedia. This is not
to avoid a sensual experience, but to create a specific type of sensuality. The tone adopted in the text
will be the primary instrument of sensuality. It should take into account the user’s fear of clothes and
the shopping experience without ever explicitly acknowledging it (as this would shame the user).
Instead of concentrating on how clothes create a fashion ideal, to which the wearer could aspire, the
site should concentrate on how well clothes fit the person. The website should implicitly convey
the idea that the user should not have to expend effort in order to successfully wear a garment.
The website will acknowledge fashion constraints, but will tend to soft-pedal them. For example,
although certain colors might not look good on a person, in practice the user does not need to wear
just the right color for him. Also, there are some colors, such as black, that look good on nearly
everyone.
The following are samples of reviews from other websites, and how their tone creates a sensual
experience.
From Television without Pity, a review of an actor’s visual style in a particular television episode:
Ace, Sep, and numerous posters have shredded David Boreanaz’s ‘‘Irish accent,’’ so I’m saved the
trouble of doing it here. I’ll reserve my commentary for the hair. Did you ever see that Simpsons
Halloween special where Snake died and Homer got his hair? It sort of looks like that, like someone
scalped someone else and put the whole mess on top of Angelus’s head. Only Snake’s hair gave
16 Shopping for Clothes: A Pleasure?
the wearer an actual personality. With the traditional attire, the hair, the mustache, and the accent,
Angelus is about as intimidating as a Teletubby.
URL: http://www.televisionwithoutpity.com/story.cgi?show=
12&story=3653&limit=all&sort=
The review uses popular culture references in order to discuss fashion in terms that a layman can
understand. It also uses sarcastic humor in order to emotionally engage its audience.
From Robert Christgau’s Web Site
a popular music album:
Madonna: Erotica [Maverick/Sire, 1992]
OK, everybody, let’s use our imaginations, shall we? It may be a little hard at first, but if we try
we can have lots of fun. To start, let’s pretend that we have nothing against dance music–that
instead of fixating on impersonal and mechanical and all those obvious things we can just enjoy
it for what it is, as innocently as babes. Come on now, really try. Got it? Good. Because now
I’m going to suggest something even harder–that we pretend we’ve never heard of Madonna.
I know that’s like asking you not to think of a purple polar bear, so just pretend to pretend, if
you know what I mean, which as good postmodernist children you do. Now, put the record
on. Hear those bass and synth beats? Sinuous and subtle and sexy, aren’t they? How ’bout the
faux-Arab electro on ‘‘Words’’? And aren’t the techno effects all nice and cheesy-futuristic? The
singer doesn’t have great pipes, but because she’s too hip to belt (this time), she doesn’t need
them. She’s in control, all understated presence and impersonal personality except when she’s
flashing some pink. Also, not counting that ‘‘Love your sister, love your brother’’ thing, the
lyrics are not stupid. I love the rap where the boast turns out to be a lie. And whoever thought
of recording the breakup song through the phone hookup was pretty smart, wasn’t he or she?
She, I bet. A find. A
URL: http://www.robertchristgau.com/get album.php?id=2208
This review distinguishes between Madonna as a celebrity and the music on her albums. It also makes
a distinction the objective merit of dance music, the attitude which with the music is frequently
received by the target audience. Again, the review makes use of sarcastic humor, this time directed
in a playful manner at the audience. The reviewer appears to implicitly suggest that his audience
ought to be able to appreciate this album for its merits, but is unlikely to be able to do so. Since the
underlying emotion when it comes to clothes is assumed to be fear, this type of sarcasm directed at
the audience might not be appropriate for the website about clothes.
The User Experience Framework 17
From Fund Alarm
the management of a mutual-fund company:
� Remember that obnoxious kid in grade school who could never accept losing, and
who was always asking for a ‘‘do-over,’’ and remember how nobody had any respect for him
and how, eventually, nobody wanted to have anything to do with him? . . . Hold that thought
for a moment.
� Back in October, we reported that shareholders rejected an attempt by TIAA-
CREFF to push through a huge management fee hike on nine of its mutual funds . . . Now,
TIAA-CREF is going to try again: It has scheduled a re-vote on the fee increase, believing
that ‘‘certain large, institutional shareholders might be willing to re-examine the proposal.’’
� From the TIAA-CREF Web site (October 12, 2005):
How deliciously ironic: TIAA-CREF initially lures investors into its funds with low-ball
management fees, then tries to quadruple its fees, then won’t accept its shareholders’ ‘‘no’’
vote, then tries again to ram through the fee hike . . . Now TIAA-CREF unveils a survey that
finds only 9% of Americans believe financial services companies are ‘‘very trustworthy’’.
URL: http://www.fundalarm.com/hilights.htm
This review uses an extended metaphor to explain a fairly complicated action taken by a financial
company. The metaphor, that of a petulant child, is likely to be easily understood by the vast
majority of the people who visit Fund Alarm’s website. This example illustrates how topics that seem
forbidding, such a proposal to restructure the finances of a mutual fund company, can be made fairly
clear (if biased) through the use of simple language, familiar metaphors, and sarcastic humor.
Of course, the website will also feature images of clothes. The models should wear the clothes
in a way that expresses the user’s likely experience of wearing the clothes. The models should look
like ordinary people. For example, some clothes may not fit a certain model quite right because he is
too pudgy. The models should not pose like models. However, models also should not pose the way
that people ordinarily pose for photographs (smiling, looking at the camera, etc.). In some images,
a model might look awkward, but he should not convey the impression that he is uncomfortable
with their picture being taken. Rather, they should convey the impression that their picture is not
being taken at all. They should emulate the way in which ‘‘normal’’ representative of the target
demographic act when they are going about their business.
18 Shopping for Clothes: A Pleasure?
The Compositional Thread
The website should project a feeling of momentum. Therefore, the phrasing should be economical.
The text should be entertaining as a primary concern and informative as a secondary concern. The
home page would be divided into a ‘‘main’’ section and a ‘‘supplemental’’ section. The main section
should be simple and static. It would consist of a menu of types of garments, which link to lists of
garments rated. These lists may include summaries of reviews, but should not include the full review
or most of the garments’ specifications. This list should be sortable by manufacturer, price, overall
rating, and the date the review was written (which should be the default order). Ideally, a search box
should also be provided.
The supplemental page should include any resources that change fairly regularly. For example,
the supplemental site might feature ‘‘top ten’’ lists (or bottom ten lists) that represent an idiosyncratic
category, such as ‘‘Top Ten Shirts to Wear to a Party Where You Only Know One Person ($20 or
less)’’. The lists should be funny, but useful. For example, the preceding list should not include joke
entries such as ‘‘this shirt will make you look like a CIA agent on holiday, so you can arrest anyone
who annoys you’’. Older resources should be archived, not deleted. The composition of the website
should give the user confidence that he or she can find desired information quickly, but should also
surprise the user with new types of resources.
The simplicity of the site structure might in some cases detract from the user’s compositional
experience, since the relative sparseness of web pages might tend to result in pages that consist of very
long lists. For example, Robert Christgau’s Web Site consists mainly of a catalog of albums that he has
reviewed. The home page links to the catalog, which is for the most part divided into three submenus,
each representing different features by which to browse albums (artists, labels, etc.). Each of the
submenus is divided alphabetically. For example, the option ‘M’ on the submenu ‘‘Browse Artists’’
links to a page that consists of a list of artists whose names begin with ‘M’, sorted alphabetically.
Selecting an artist takes one to a page that consists of the artist’s albums, in chronological order.
Although navigation between pages is simple, navigation within a page can feeling overwhelming.
For example, the ‘M’ page of artists consists solely of a list of 471 artists. When printed, this page takes
up nearly ten sheets of paper. Scanning a list of so many items is likely to be an experience that is more
frustrating than pleasurable. Television without Pity’s website has similar problems. The main page
links to a list of the 161 television shows reviewed on the site. The main page of each television show
consists of a list of episodes reviewed, which frequently number in the dozens, or even hundreds.
One way to break down longs lists of this sort is to allow the user to browse for items according
to more than one feature at a time. For example, the user could link to a dynamically-created page
that consists of trousers in a specified price range. Epinions
offers something like this when they allow users to search by more than aspect of a product, as can
be seen in the figure below. However, Epinions does not allow the user to search by multiple criteria
simultaneously.
The User Experience Framework 19
DVD Players
Find and Compare
Browse categories in DVD Players. Number of items in parentheses
View all DVD Players (3113)
by Price Range
Below $50 (65)
$50 – $70 (75)
$70 – $90 (76)
$90 – $110 (68)
$110 – $120 (34)
$120 – $130 (54)
$130 – $150 (71)
$150 – $180 (69)
view more
by Brand
Panasonic (208)
Toshiba (188)
JVC (175)
Philips (163)
Sony (140)
Samsung (129)
Pioneer (127)
RCA (99)
Coby (78)
GoVideo (78)
Audiovox (68)
Yamaha (52)
by Playable Disk Types
CD (Audio) (1846)
CD+G Karaoke (8)
CD-R (1624)
CD-RW (1587)
DVCD (8)
DVD Audio (259)
DVD Video (1599)
DVD+R (255)
view more
by Progressive Scan
What is Progressive Scan?
With Progressive Scan (994)
Without Progressive Scan (594)
by DVD Type
What is DVD Type?
DVD Player (1078)
Portable DVD Player with Screen (329)
DVD Recorder (212)
DVD Player / VCR Combo (200)
Multi-disc DVD Player (162)
DVD Recorder / VCR Combo (55)
Portable DVD Player without Screen (51)
DVD Player / HDD Recorder (16)
20 Shopping for Clothes: A Pleasure?
Yamaha (52)
Sharp (51)
Denon (49)
Daewoo (41)
view more
view more
by Surround Sound
What is Surround Sound?
Dolby Digital (Digital out only) (1184)
DTS (Digital out only) (1132)
Virtual Surround (795)
Built-In Dolby Digital Decoder (356)
Built-In DTS Decoder (224)
URL: http://www.epinions.com/DVD Players
If many lists tend to run too long, lists that are constrained by multiple criteria might be too short,
or have no members at all. In that event, one potential solution might be to automatically include
similar results from just outside the criteria. For example, if ‘‘shirts’’ and ‘‘$20–$40’’ yielded only
two results, the website could add to the list shirts that cost under $20, or from $40–$60.
The Spatio-Temporal Thread
According to Wright et al, the users who are in a hurry may feel confined in the space they occupy.
Because the website does not sell products, the user is likely to feel less rushed than he or she would
on sites that offer temporary sales. In addition, the simplicity of the structure may help the user feel
relatively unconfined. The website has no ‘‘private’’ features, such as a shopping cart or a forum in
which to post messages.
Making Sense in Experience
The user experience framework provides six concepts by which a user’s experience unfolds. They
are, in order, anticipating, connecting, interpreting, reflecting, appropriating, and recounting.
Anticipating
The user will likely come to the website with a desire to be entertained and to learn more about
clothes. Because the site does not allow the user to purchase articles of clothing, repeat users would
not come to the website expecting to make a purchase decision. First time users might be under
the impression that the website has a retail function until they see the home page banner, which
succinctly describes the website’s mission. The following banners serve as models:
Making Sense in Experience 21
Robert Christgau’s Web Site
Hi. I’m Robert Christgau. I’ve written about rock and roll, popular and semipopular music, and
popular culture since 1967. This is my website, and herein you will find as much of my writing
as we can put up. This includes my Consumer Guide to over 12,000 records, my books, essays
from my Village Voice Rock&Roll& column, other music writings, book reviews, and more.
URL: http://www.
robertchristgau.com/
URL: http://www.fundalarm.com/
Both Robert Christgau’s Web Site and FundAlarm communicate the purpose of their websites in
about seventy words. Each website’s home page also uses graphics sparingly, which gives the
user a sense of simplicity and focus.
What is FundAlarm?
FundAlarm is a free, non-commercial Website. Our view of the Mutual fund industry is slightly
off-center. We help you decide when it’s time to sell a fund, instead of when it’s time to buy.
The mutual fund industry is full of broken promises, arrogance, greed, hypocrisy — the list goes
on. We try to shine a light in the darker corners, and poke holes in balloons that could use some
poking.
Connecting
Because the website has a deliberately muted sensuality, the user will likely connect with the few
images that exist. The textual content of the reviews is the focal point of the website. In contrast,
the pictures of the garments and the men who model them are not intended to particularly engage
the user. However, they are intended for the user to literally connect them with his (or possibly her)
own life.
Interpreting and Reflecting
The interpreting and reflecting aspects of the experience sense-making process appear to be
particularly difficult to design for. They seem to represent the point at which the user gains an
understanding of the website’s purpose, style, and content. It is to be hoped that the user will have
the experiences that were described under the four threads.
Appropriating and Recounting
The website should use each of the threads of user experience in order to help the user appropriate
knowledge about clothing and a vocabulary by which to conceptualize and evaluate clothing. The
ultimate goal is for the user to be able to recount that experience when actually shopping for
clothes. This website is intended to provide conceptual tools that can be generalized to the process
22 Shopping for Clothes: A Pleasure?
of purchasing clothes, including the means by which to engage that experience with feelings of
confidence rather than uncertainty and fear. Although those feelings would be difficult to measure,
they are the ultimate criteria for evaluating the success of the website.
Conclusion
This case study has made use of the User Experience Framework in order to describe a hypothetical
website that helps men find pleasure in shopping for clothes. It found the emotional and sensual
threads to be particularly useful, since the asset of this website is not in the subject matter of its
content, but in how that content is expressed.
It would appear that designing for a pleasurable online shopping experience is more difficult that
designing pleasurable physical products. While a physical product can be touched and handled, the
online shopping experience forces the user to experience products only in an abstract way, i.e., how
they are represented on the website that sells them. Also, because the shopping experience inevitably
involves the user parting with some of his or her money, shopping will always include a certain
amount of tension that would not necessarily be found when simply interacting with a product.
References
Epinions. URL: http://www.epinions.com/. Accessed December 2005.
Fund Alarm. URL: http://www.fundalarm.com/. Accessed December 2005
Guyshop: mens fashion, menswear, golf gifts, Unique gift ideas, gift ideas. URL:
http://www.guyshop.com/. Accessed December 2005.
NORMAN, D.A. (2003). Attractive things work better. In Emotional design: Why we love (or hate) everyday
things. New York: Basic Books.
Robert Christgau’s Web Site. URL: http://www.robertchristgau.com/. Accessed December
2005
Television Without Pity. URL: http://www.televisionwithoutpity.com/. Accessed Decem-
ber 2005
WRIGHT, P., MCCARTHY, J. (2003). Making Sense of Experience. In Funology: from usability to
user enjoyment, by Blythe, Monk, Overbeeke and Wright.
L642 Class Assignment 3 23
L642 Class Assignment 3
DESIGNING A PLEASURABLE USER EXPERIENCE FOR ONLINE
SHOPPING
This assignment requires you to design a pleasurable online shopping experience using a user-
experience based framework.
Designs that are cute:
To begin have a look at Miss.Boo (http://www.boo.com/boo/home lr.asp) site and then
read the critique of the Boo brand by Mark Gimein on Salon.com.
http://www.salon.com/tech/log/1999/11/05/boo/
Also take a look at http://www.girlshop.com/and totshop.com and then read the
‘cult of cute’ article by Aaran Marcus.
Designs with talking agents:
Take a look at the IKEA chatbot helpcenter in the UK and the US.
(http://www.ikea-usa.com/and http://www.ikea.com/ms/en GB/
How does Anna differ for the two countries in the way she presents herself, the way she is dressed,
the color of her hair? Why do you think IKEA designed Anna to be different for the two countries?
Also look at:
http://www.agentland.com/cgi-bin/relocation.cgi?
Do the virtual agents add to the user experience? How does it feel when a semi-animated person on
the screen answers your questions?
Designs based on cinematic experience:
Take a look at some well-known brand name sites that have been designed to give a quite different
user experience e.g., Nike.com, VW.com, and then compare them with the more traditional
catalog-based style of an online store, e.g., ikea.net, amazon.com and sears.com. How do they
compare? Which do you prefer and why?
Fun interface effects:
Have a look at the special effects provided on the following sites.
http://www.hci-fun.org.uk/
www.dontclick.it
How do they add to or detract from the experience?
24 Shopping for Clothes: A Pleasure?
Lessons learned from product design:
Much of what Norman writes about is about the aesthetics, usability and design
of artifacts such as teapots, orange squeezers, vegetable peelers and clocks (see
(http://www.jnd.org/dn.mss/EDesign-PeopleThings.html for a user study of
his favorite clock). To what extent can his observations about the relationship between people and
products be applied to the design of software applications and services, such as online shopping sites?
Do people behave differently when using these kinds of interactive artifacts and where it involves
spending money using them?
Specifying your framework
Select and adapt one of the new user experience frameworks you have read about during the
class, e.g., (i) Overbeekee et al’s (2003) engaging framework, (ii) Norman’s (2003) ‘three levels of
processing’ framework or Wright et al’s (2003) user experience framework.
Scenario and design concepts
Use your chosen framework to inform the design of a new pleasurable online shopping experience.
Provide two or three design concepts showing what it will be like. Consider the form factors, the
special effects, and the way the site can be designed to ‘make you smile’ and make you want to return
for more ‘virtual window shopping’. Describe a couple of scenarios of the pleasurable shopping
experience. Include a couple of sketches or text description of what will make it pleasurable, fun,
engaging, aesthetic, etc.
Write-up
Write a 2500–3000 word report, using the following headings:
Introduction
This section should cover what is involved in designing a pleasurable experience. Mention briefly
the literature/websites you have critiqued.
Framework
Describe the framework you have adapted to inform your design. Explain what are the most
important criteria and any design trade-offs that need to be considered.
Design concepts and scenarios
Describe the design concepts and scenarios
L642 Class Assignment 3 25
Discussion
Discuss how you think your design provides a pleasurable shopping experience. Suggest methods
(traditional or alternative) you would use to evaluate your design and what you would expect to
find. Finally, explain why designing pleasurable online shopping sites is more (or less) difficult than
designing pleasurable physical products (cf Norman’s vegetable peelers, clocks and coffee makers or
Overbeeke et al’s clock and appointment manager).
References
Don’t forget to add your references, especially websites you have visited.
