O SlideShare utiliza cookies para otimizar a funcionalidade e o desempenho do site, assim como para apresentar publicidade mais relevante aos nossos usuários. Se você continuar a navegar o site, você aceita o uso de cookies. Leia nosso Contrato do Usuário e nossa Política de Privacidade.
O SlideShare utiliza cookies para otimizar a funcionalidade e o desempenho do site, assim como para apresentar publicidade mais relevante aos nossos usuários. Se você continuar a utilizar o site, você aceita o uso de cookies. Leia nossa Política de Privacidade e nosso Contrato do Usuário para obter mais detalhes.
The Charter (Who)
• Focus: Governance and Authority
– What group/person is the primary
– Who are the stakeholders?
– What group is responsible for each phase?
– Who will define success?
The Web Action Plan (When)
• Focus: Timeframe and Schedule
– What time period will this strategy cover?
– What are the development and consultation
– When will development of the next version
• Focus: Vision and Principles
– Why will this work be undertaken? For
– What are the principles that guide the work?
– How are these principles prioritized?
• Focus: Goals and Strategies
– What are the goals that will achieve the
– What strategies will lead to these goals?
• Focus: Projects and Resources
– How will the strategies be accomplished?
– What staff will be required for each?
– What funding is needed?
User Experience (Where)
• Focus: Interfaces and Interactions
– Who are our Web users?
– Where are they using the Web (home, work,
– What are their needs?
– Are their needs being met by our Web
Essential Web Design Strategies
• Responsive Design
• Use Software Prototyping
• The Team
• Aware of the Marketplace
• Look for Inspiration
• Step Back
• Design from a Different Perspective
• Test and Validate
Implementing Strategic Design
• Establish your goals
• Identify your audience
• Determine your brand image
• Goal-driven design direction
• Measure results
Seven C’s of Website Design
7c’s of Website Design
Context: Sites’ layout and design
Text, pictures, sound and video, that
The ways sites enable user to user
Site’s ability to self -tailor to different
users or to allow users to personalize the
The ways sites enable site to user
commendation or two way communication
Connection: Degree site is linked to other sites.
Site’s capabilities to enable commercial
Context (look and feel): the “How”
of the site
• 2 main dimensions: Function and Aesthetics
• Function - site layout and functionality
– Section breakdown - the way the site is organized into sub-
• make them clear, and customer focused
– Linking structures - navigation
• where am I?
• how do I get back to where I came from? (breadcrumbs)
– Navigation tools - search functionality and methods, browse
capability, site index/map
• Use terminology the customer can understand
• Make sure your search tool works - configure it
• Aesthetics - visual characteristics such as colours,
graphics, fonts etc
Content: the “What” of the site
• Text, pictures, sound and video
– both the type of content, and the media with which it is
• The offering mix: products, information, services etc
• The appeal mix: promotional and communications
• The media mix: the multimedia elements included on
– Be careful with adding too many multimedia elements that
require plug-ins unless you have good market research that
shows that your users expect it.
• Content type: time sensitive information versus
– Freshness keeps bringing customers back
– Archives provide a useful service to users
– Watch out for “What’s New” sections
• Community: the way sites build relationships between
users. Strong community encourages people to
return to the website again and again
– Community can create attractive content (for free!)
– Web communities can make the user feel that they are
valued by the firm
– Community can satisfy needs not otherwise able to be
satisfied individually (eg. finding people)
• Common tools are message boards, customer
reviews, chat with special guests, corporate blogs,
• Other examples: Lands’ End “Shop with a Friend”,
• Customization is the site’s ability to self-
tailor to different users
– The way customization can be achieved is
divided roughly into 2 types (although
many sites use both)
• Personalization - preferences actively selected
by the user
• Tailoring by site - automatically generated
customization based on a user’s previous
behaviour, and the actions of other similar
• Personalization is usually used to refer to
customization of a site by the user him or herself.
• Promotes stickiness and customer loyalty
• Once a user has selected preferences, they must be
saved and can then be accessed by use of
• Examples of personalization:
– E-mail accounts or storage space
– Content and layout configurations - mytelus.com
– Software agents - can be configured to notify a user when an
item is in stock, or to act as an alert service
• Cookies are often used in tandem with
personalization, but they can identify only the
machine on which the cookie is stored, not the
individual person. Hence the need for log-in.
Tailoring by site
• The second type involves automatically
generated customization based on a user’s
previous behavior, and the actions of other
• Interface software dynamically publishes
different versions of the site in order to better
address users’ interests, habits, and needs.
– The technologies to achieve this include cookies,
and recommendation engines that use
collaborative filtering. This is all completely
automated, but can be improved by using active
Personalization/customization using a
combination of tools
• Amazon.com provides a very good example
of this combination of methods to customize
the user experience using collaborative
filtering and a recommendation engine
• Lands’ End - My Model (allows you to
configure a model to your body type and
appearance and try on clothes) and My
Personal Shopper (uses “Conjoint analysis” -
presents alternatives for selection)
• Communication refers to a firm’s dialogue with its
– Dialogue can be one-way (broadcast) or two-way
• Broadcast communication
– Mass mailings (opt in only!)
– E-mail newsletter
– Content update notifications
– e-commerce dialog using email to exchange information re
– Customer service - email or live chat
– User input - content, reviews, feedback etc
Connection: how does a firm connect
to other businesses?
• Links to other sites
• Outsourced content - eg. news feeds,
stock quotes, weather etc
• Affiliated sites - complementary
Some things that really damage Customer
Experience on a commerce site
• Badly implemented search
• Not telling people an item is out of stock
until late in the process
• Shipping cost not given until late in the
• Asking for personal information too early
in the process
• No contact information
• Can’t print properly
• Layout of web pages is very important
• Poor layout makes for -
– Difficult navigation
– Hard to locate information on page
– Visually unappealing
Tables, tables, tables!
• Use tables to lay out your pages!
• Make the table borders invisible
• A 2x2 table works well