Strategies for web development, 7 Cs framework

Components of the Strategy

The Charter (Who)

• Focus: Governance and Authority– What group/person is the primary

“champion”?– 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

steps?– When will development of the next version

begin?

Guidance (Why)

• Focus: Vision and Principles– Why will this work be undertaken? For

whom?– What are the principles that guide the work?– How are these principles prioritized?

Direction (What)

• Focus: Goals and Strategies– What are the goals that will achieve the

vision?– What strategies will lead to these goals?

Management (How)

• 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,

wireless)?– What are their needs?– Are their needs being met by our Web

experience?

Summary of Web Strategy Development

Essential Web Design Strategies

• Responsive Design• Use Software Prototyping• The Team• Versatility• Customization• 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• Kaizen

Measure results

Seven C’s of Website Design

• Context• Content• Community• Communication• Connection• Commerce• Customization

7c’s of Website Design

Context: Sites’ layout and design

Content:Text, pictures, sound and video, that Webpages contain

Community: The ways sites enable user to user communication

Customization:Site’s ability to self -tailor to different users or to allow users to personalize the site

Communication:The ways sites enable site to user commendation or two way communication

Connection: Degree site is linked to other sites.

Commerce:Site’s capabilities to enable commercial transaction

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-

categories• 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

delivered• The offering mix: products, information, services etc• The appeal mix: promotional and communications

messages • The media mix: the multimedia elements included on

the site– 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 “evergreen” information– Freshness keeps bringing customers back– Archives provide a useful service to users– Watch out for “What’s New” sections

Community• 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, members areas

• Other examples: Lands’ End “Shop with a Friend”,

Customization

• 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 users

Personalization

• 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 registration/log in.

• 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 similar users

• 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 user input.

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

• Communication refers to a firm’s dialogue with its customers– Dialogue can be one-way (broadcast) or two-way

(interactive)• Broadcast communication

– Mass mailings (opt in only!)– E-mail newsletter– Content update notifications

• Interactive– e-commerce dialog using email to exchange information re

orders etc– 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

products/services etc

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

process• Asking for personal information too early

in the process• No contact information• Can’t print properly

Webpage Layout

• 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

Areas of a Web Page

Menu

Header

Content

Logo

A 2 x 2 Layout

Table within a table

Table within a table

Centered with three columns

Really complicated design!