Design Melt Down - Design Styles and Themes

• Sketchy

Anyone who has been through art school, drawing classes in particular, can appreciate the sketchy type elements included in the samples below.

Patrick McNeil supposes the way this stuff is done is relatively obvious. The elements are drawn by hand and brought into the computer via a scanner. Then combined with more typical computer generated design elements. It is also quite common to add in elements with a bit of grit and texture to them. Stained and torn paper, scanned tape, scratchy textures, anything to further relate the design to tangible hand made elements.

This technique really can produce fantastic results. The connotations are clear and it works tremendously well to communicate creativity and an artistic touch. McNeil actually think this is a really smart direction for artist, especially ones new to the web. It enables them to use a skill they are really good at in a medium they are still learning. Clearly many of the samples are very advanced and far beyond beginner. But McNeil love how someone new to the web can create a powerful design that draws on their existing strengths to create an interesting and unique design.

The sketchy style is one of the most personal design styles available to a designer. The style inevitably reveals some of the artist character by literally producing some of the sketchy ideas stored up in that persons brain. It is this personal nature that perhaps makes it so appealing to visitors. It just feels like the artist is somehow being bit more honest. As though they are saying "this is what I am, take it or leave it." And as a visitor it goes unsaid, but we get that. 

Examples:

http://www.admediastudio.com/ - interesting navigation bar and rollover effects besides its unique art style.

http://www.fudgefactorycomics.com/ - random yet cute sketchy elements will appear and move across the screen each time the user clicks on a different page on this website. These motion graphic (lighter file size) makes user willing to stay on the website while waiting for its content (heavy file size) to load.

http://www.carlkrull.dk/ - unique and straightforward homepage design. User knows who the artist is and what he does without having to click on any button or read a chuck of words.

• Retro Style

Revised versions of past styles is a common and very popular technique. It is found in advertising, cd design, fashion, and of course, website design. It is done for a variety of reasons, sometimes driven by the content of the site and at other times by the desire to associate the site with some element of the past.

After looking at these retro styled websites for some time McNeil settled on three main elements that establish the retro feel: the color palette, old photographs, and period appropriate typefaces. Consider how all these elements work together to make a complete theme.

The Color Palette

An appropriate color palette is fundamental to establishing the feel of a specific time period. The period you are shooting for will ultimately determine the set of colors you choose to work with. Earth tones seem to be the one constant among these sites. Perhaps it is not necessarily because those earthy colors are associated with a specific time period, but rather because they evoke age, and aging the site is exactly what designers need.

Old Photography or Illustration

The age old saying that a picture is worth a thousand words couldn't be more true. In nearly all the sample sites photography or illustration is perhaps the primary element that sets the feel for the site. Without the imagery, most of the sites would be very weak in terms of pulling you into a different era.

For example, the Target Scope web site has an illustration of a pin up model. This is easily understood as a reference to the 1940s. That combined with the military theme clearly plants us in the midst of World War II. Imagine the layout with out the model and one will quickly see how important it really is. The other primary image is the background. This paper texture does wonders to age the site and really helps complete the whole package.

Retro Typefaces

This seems to be an obvious element, but the use of appropriate typefaces can either complete or destroy a design. One of the best sources of retro fonts is Font Diner . They even have a few free ones available. If one is unsure of which typeface is appropriate, this article on the history of type might help one to determine which ones to use. This timeline of type classification is another excellent tool for picking type families.

Regardless of how one incorporates this design element always keep in mind how it works in conjunction with his/her brand. Even if the site is personal it has a brand, and if one has any interest in running a successful site one will view it as a business no matter what the purpose.

This is a bit of a tangent, but using a theme on a site where it doesn't fit is a kin to looking like a serial killer and applying for a job at a day care center. There is no reason in the world one should mix one's signals, especially not in a medium where one can so easily be ignored. So consider the site's purpose, message, and core reason for existence, does the retro style reinforce that, or distract from it. If one is not sure, then perhaps this isn't the element to use.

Examples:

http://www.1trickpony.com/ - very interesting design as an e-commerce website.

http://www.detektiv-nali.de/ - strongly establish the feel of a specific time period.

http://hotelsavoytimisoara.ro/ - launch a new window and displaying an old clock with black background introduces a new and excited experience. Perhaps this can be the opening of my bidding feature.

After the product image is shown, the old clock will be placed at the bottom corner of the page counting down the time left for bidding seems to be a good idea.

• Distressed Design

The usage of distressed elements in design is nothing new, and perhaps the golden age of textured web design has passed. All this really means is that the gratuitous and meaningless usage of texture on web sites is no longer accepted and that sites using it more deliberately will only do so more effectively.

Many sites use texture simply as a means to break up the computer generated feel of straight lines, solid colors, and perfect gradients. Urban International is a fine example of this. When the site needs a grass roots or urban feel, texture can certainly save the day. Most extreme sports related sites make fantastic use of this technique, as seen on the Dimension Boards site. The distressed, thrashed, and worn look give the rebellious anti-corporate connotation of the extreme sport lifestyle.

Perhaps one of the strongest usages of texture is in the effort to show expressiveness or creativity. Kutz Town , exp.typo , and fatoe.com all put it to use for this purpose.

screen shot of exp.typo website design

It certainly seems as though texture has been abused, but it is still a powerful and expressive tool. Just as with any other design element, step back and decide if it reinforces what one is trying to say. If the theme fits, then run with it, well done sites using this element can be quite gorgeous.

Connotations of texture: worn, used, free, expressive, physical, tangible, artistic, creative, raw, hip, aged, historic, rough, grass roots, urban, and rebellious.

The usage of the worn and battered style is certainly not the focus in the design world right now. This is not to say that it can't be a great solution. In fact it can be rather nice to use a design pattern that isn't the current trend, it really helps a site to stand alone instead of blend in. In the case of this style it has pretty clear connotations and can be used to reinforce a sites purpose. Most of these sites have chosen this style to connect with their topic. It creates the mood and atmosphere of the site and really serves a purpose.

• Illustrated

It is of course a more expensive and harder path to go down, but using illustrations in your web design is a recipe for uniqueness. How corny would the Intuitive Designs site be if they had used a stock photo of a chef! Instead, they have a wonderful illustration that fits the design and message of the site; and even better, the site stands out.The usage of illustration in web design creates difficulties that can be difficult to over come. First it costs money to generate one, then one has to effectively fit it into one's design, and finally the implementation of illustration heavy sites can often have various technical gotchas. In the end though, it is well worth it.

Obviously the actual illustrators (the artist that is) have the upper hand when it comes to using this style on their portfolio site. Not doing so would be almost silly, since the illustrations easily represent what the artist style is, and really effectively sell them. Take a look at the portfolio of Pedro Lamin for example. He has placed wonderful illustration on his home page. In fact it is huge and takes up the better part of the page. And why not, it instantly draws users in and hooks users on his style.

Examples:

http://www.illustanne.com/ - the white background makes each and every illustrated icon and image stands out and appeal to users.

http://www.carolrivello.com/ - the illustrated element blended very well with the background and navigation bar colour and also the flow of content.

http://www.ungatoys.com/#/#jobs - very attractive and eye-catching website design with bright colour scheme and interesting illustration. 

• Extreme Theme

At times design can be the most frustrating of endeavors. Finding that great design can be so hard. One thing McNeil has observed that always works is coming up with a theme. Perhaps this is obvious, but settling in on a theme as opposed to a design style can really get the ideas flowing. So instead of deciding to make a shiny or distressed site, consider themes that would work for the topic. Quiet often themes sound ridiculous, and they usually are, but after being implemented they are fun and really bring a site to life.

For example Indigo 6 turned their basic black site into a clever theme based one. Instead of a normal content driven site, the airline theme creates a pretty silly atmosphere. The cool thing is that user can't help but wonder what the site holds. The site becomes an experience. One can just imagine the design process for this site. Ideas like "lets make it nice and clean" might come up. But comments like that don't inspire. Then someone in a meeting said, "hey what if it was like your on a plane and there was a stewardess?" Surely someone scoffed at the idea, but someone else thought it sounded better then the otherwise void of ideas. Next thing they know everything about the entire airline industry is a source of inspiration.

And that is really the true power of a theme; to inspire. Any site can have a theme, it doesn't mean it has to be extreme. Extreme themes are good for showing the power of the tool. But even corporate customers have a story to tell. Even they need to communicate with and entice visitors.

Example:

http://webmark.shost.pl/?cat=32 - it has a similar theme to what i have in mind for my e-commerce website design.

Design Melt Down - Study the Site Types Through Patrick McNeil

"

eCommerce With Style

Not many of us will ever get the opportunity to work on an ecommerce site the size of amazon.com. There are many other medium sized ecommerce sites of course that will probably employee many developers, but I (Patrick McNeil) believe it is the small sites that have some of the most potential for creative and beautiful presentations. The tiny specialty shops that work in a small niche.

Large sites tend to die in committees, where groups of people determine how things will work and look. In many ways this is great, I am sure Amazon excels in terms of usability and accessibility and it certainly has some advanced features. The site does have a distinct look, but it is really more of a standard design. Sites such as this have set our expectations to low I believe.

Small ecommerce sites present an awesome opportunity; the product and market are much more focused and can be much more accurately addressed. Consider Amazon again, their customer base includes just about anyone using a computer. They sell books, music, computers and even groceries. That is a pretty broad market! On the other hand take a look at the custom cloths found on Struck Apparel. They have a small niche product that a much smaller demographic will be shopping for.

This opportunity to create a more focused marketing plan is very empowering, it is so much easier, and I think more fun to design within constraints such as this. Other wise you are left floundering trying to find a direction. So if your market is teenage girls or seniors in retirement embrace your market and capitalize on what appeals to them.

With tools such as Yahoo! Stores and eBay it is all to easy to fall into the default template. For some this might be ok, but if you are reading this I am sure you expect more. These samples all rise above the rest and stand as superb inspiration for what can be accomplished on an ecommerce site.

The building of an eCommerce store is no small chore, even if your working from an existing application. Home grown, or off the shelf, eCommerce systems are huge complex beasts. At their heart they are applications, and very different from your run of the mill static site. Applying a skin to such a beast is typically about the biggest pain in the butt one could imagine. This difficulty makes it all that much more impressive when you find beautiful examples.

One example I particularly like is etnies.com. I like this one because on the surface it doesn't look so much like an ecommerce site. Instead of a home page full of specials and clutter you have a nice and straightforward portal to their products, and hidden below you have an eCommerce system ready to take orders. This is the type of site that likely has a following, and I suspect a large repeat customer base. As such, they have focused on making the site attractive and easy to browse with out an over the top sales pitch trying to get you to stash stuff in a shopping cart. Sure, they could probably sell more product if they did so, but instead they choose to reflect part of their personality in the more passive approach.

In contrast to this approach we can take a look at what might be considered a more typical approach to eCommerce site structure; take a look at Blooming Direct for example. The home page for this site is really heavy, a feature which can be very dangerous. But of course this site has risen above that. The home page is easy to scan and provides a great portal to the content below. A combination of stand out section headings (What's hot, seasons, etc) and clear photography makes the home page a breeze to scan and drill down into it. What really gets me excited about this site though is the polish of the design. The site has been very effectively branded in such a way as to fit the topic of the site. It is no small feat to make sure each and every element has been addressed. Most sites like this tend to turn out frankenstein style where some element was rushed and not effectively mashed into the theme of the site. It takes great persistence to create a site such as this.

Fashion

The fashion industry brings a very unique set of talents to the world of web design. For many of these companies the inevitable desire to use their fashion skills in this alternate medium is a logical path. As a result their sites are a direct reflection of their skills in the visual arts. It is no surprise that this industry puts so much energy into the web. After all it is a representation of them and they wouldn't dare be caught out of style.

As a whole, these sites have a rather distinct style to them. Almost every one of them has a slightly atypical layout and navigation. They have by no means followed the heard and simply replicated the standard formats. And of course this is a direct reflection of the way the fashion industry works. Fashion design is all about forward thinking and figuring out the next style, and even creating the next style. So it is no surprise to find these sites as unique as they are.

Another common thread among these sites is the strong use of photography. Which should come as no surprise of course. What’s interesting is that many of them use it as background elements. This works really well as it allows the images to be nice and large. Besides, they must have thousands of spectacular photos to pick from, why not use them heavily. After all photos more then anything will communicate the styles and designs of these artists. No need to point out a specific example for this one, pretty much all of them do this.

The overall sense of style in these sites is really amazing. This is most definitely an industry web designers can learn from. It’s really exciting to see how their extreme knowledge of fashion design can be translated in this digital medium. This is certainly a skill other types of artist struggle with.

"

Design Melt Down: Study the Principles of Design

According to Lisa Graham the basic principles are emphasis, contrast, balance, alignment, repetition and flow. All design is built on these basic blocks, and the more thought that is put into those elements the better the design will be. It seems that design goes astray when this is forgotten. By returning to the fundamentals we can refocus our eyes and minds when producing design.

• Emphasis

Emphasis is defined as special importance or significance. In many ways emphasis is closely, if not the same as, related to hierarchy. Basically emphasis is the analysis of a site's content in order to determine what the hierarchy of importance the content has. Once this is determined a design can be created that carries out these goals. One great method is to list all of the elements required on a page in order of importance. Then, design with that in mind so that the visual hierarchy of the page reflects the determined importance. One reason this is so important is to avoid an attempt to emphasize everything. Remember, if one tries to emphasize everything, one effectively emphasize nothing.

Sample 1 - Zedmo

The Zedmo site is a nice example of emphasis. Patrick McNeil has placed numbers over the elements of the page to order them in terms of the hierarchy and emphasis he perceives in the page. In this case, the order starts at the top and works its way down the page. Physical location plays into hierarchy and the elements at the top of the page have a greater weight. In this case, the top most element (the logo) has been sized such that it stands out, making it the most emphasized element on the page. The logo also has the highest contrast on the page, which further emphasizes it.

On the Zedmo site the brand name is the most impactful element on the page. This is great in terms of stamping the name and image on the users mind. Being remembered on the web is a difficult task. The second key element of the page is the sign in & sign up section. It is of the utmost importance to sites such as this to get people to sign up. In this case the sign up link is heavily emphasized. In fact, the sign up block closely competes with the logo for the most visual dominant element of the page. It could easily be argued that this is in fact the real number one element on the page.

Finally, one can find some supporting copy and secondary tasks for the site at the lower section of the page. The designers of this site clearly understood the goals and purpose of the home page and designed it appropriately.

Sample 2 - Oaktree Creative

The Oaktree Creative site is a bit more complex when it comes to hierarchy and emphasis. Part of the difficulty in determining hierarchy on this site lies in the close similarity of so much content. But there is a hierarchy at play here. First and foremost the central white band of content pops out. This is the largest text on the page, it is near the top of the design, it spans the entire width of the page and it is the highest contrast section of the page. All of this makes it pop out.

The difficulty comes after this stage. McNeil's perception is that number two is the logo, and then the tabs. In terms of brand consumption this is a nice order of business. First we get a snippet of what they do, then we get the brand reinforced, and finally we are given a set of options for navigation. A nice flow in terms of visual consumption.

The bottom three columns of data come in last place. But even inside of these 3 buckets we can see a hierarchy at work. The text at the top of each is larger and creates an order.

Again, the order of emphasis on this site follows a logical progression of important brand messages to less significant clutter of content.

Sample 3 - Spine

The Spine site is most defiantly one of the more complex examples of this principle. In this case the large text at the top easily gets the most emphasis and therefore the number one slot in the hierarchy. The simple statement is powerful and connects with visitors on an effective level. It is a great start for sure.

Things most definitely get more complex from there. Second in the hierarchy of the page is the main chunk of content. It's close proximity to the most emphasized part of the page helps make it more dominate. The larger font size helps as well.

Clearly the third most dominant element is the image to the right. If only because it is the only image on the page and easily draws attention. From there it jumps back to the left of the page and continues down.

The order of emphasis on this page might not flow in the most common of paths, but it ultimately works. One neat thing to note about the design is how when going from 3 to 4 one can easily get caught back on number 1. This really helps to beat that message into the viewers mind.

Conclusion

Designers should map out what is most relevant and use it as a checklist before they declare a design complete.

• Contrast

Contrast is simply the visual differentiation of two elements. Elements with strong contrast look distinct, elements with low contrast appear similar or blend together. There are many ways to achieve contrast, some of these include: color, size, position, font choice and font weights. Through contrast a site design can have visual variety, and avoid being stale. It is also through contrast that focus can be achieved, there by addressing the need for emphasis on certain elements.

A key purpose behind contrast is to implement the hierarchy of a page and enforce the desired emphasis. Contrast can be used to draw attention to the most important elements of a page. Things like the content, action items or purpose statements. Depending on the needs of a site, the designer can choose to draw attention to certain elements though the deliberate control of contrast.

Sample 1 - Studio 3k

The Studio 3k is a great example of a common sense approach to the use of contrast. The design of this site features a very logical approach to the use of contrast. By playing into the strengths of contrast and the natural order of things the site makes no attempt to force contrast to achieve difficult tasks.

Above all this site uses position combined with contrast to establish hierarchy. The hierarchy of the page rather clearly goes from top to bottom. The top most elements of the page are first in the hierarchy and the steps just go down from there. It most certainly took some time for the designer to tweak the design to ensure this happened. A little to much contrast here or there and all the sudden this order would change and the viewers eyes would bounce around the page.

Lets start at the top of the page where the highest contrast part of the page is found. The bright white logo stands out on the gray background. This reinforces the brand of this design shop and helps its logo and name stand out. A wise thing considering the vast selection of design shops.

The next band of content we find is a simple purpose statement. The white background of this section helps to establish a more powerful contrast. Especially when combined with fairly large and dark text. The photographs are also the largest in the page and overlap the section above it. This type of contrast has been leveraged to effectively focus users attention on an important element of the page.

Below this white section is the final third of the page. At the top most portion of this section we find the third level of hierarchy in the page. Again we find the use of color contrast, in this case blue on gray. Additional larger type has been used to help draw attention. This image serves as a header to the 3 columns below it and are visually connected to them by being placed inside the same gray section. This is important because it helps keep the user from wandering off. If the visitor has made it that far down the page with out clicking on something, the 3 columns provide a host of links that might be of interest.

It is easy to see how the top down approach of this sites simply makes sense and plays on visitors natural top to bottom motion. This creates a really clean and effective design that doesn't leave the user confused or lost.

Sample 2 - Clear Function

Clear Function is a great example of the use of contrast in a more complex way. For starters their home page is very content heavy and with out the use of contrast all of it would run together and be impossible to scan. By careful usage of contrast they have reduced the overwhelming nature of so much content and made it far more manageable.

One of the first things McNeil notices is the large bold purpose statement across the top. Several elements give this text an increased contrast that ultimately makes it stand out above the rest of the page. The text is larger then any other text on the page, even the main logo. It is also white on dark, where as the main content chunk is dark on light. Also, it contains the only green text on the page. The green is echoed in other smaller parts of the page to unify things. The prominent placement at the top of the page also gives it more weight and plays nice with the need for greater contrast. All of these things basically give this chunk of text the first order of hierarchy in the page and ultimately the most emphasis.

From there the eye is drawn in several directions. But each section has effectively used contrast to direct attention. For example the main content text is the only part of the page with text set on white. This makes the container of this text pop out the page. This is a really nice way to help avoid content overload. The side bars for example has quite a bit of text which combined with the main copy would cause a visual meltdown. Instead these side bars are far lower contrast. One has dark gray on light gray text, the other light gray on dark gray. Both of these are very low contrast and don't draw the users eyes as easily. The copy in these chunks is also smaller, further contributing to this order of things.

Notice how in the main content region the article headings stand out very nicely. This vastly increase the scanability of the page and makes for a much friendly presentation.

Conclusion

Contrast is a tool all designer use, whether they think about it or not. The trick is to remember to put some thought into the contrast of the page. Contrast is one of the most powerful tools in the quest for effective hierarchy.

• Balance

The principle of balance revolves around the idea of how the elements in a design are distributed and how they relate to the overall distribution of visual weight. Balance is all about how elements are distributed on the page and the way this affects the stability of the page. As elements are grouped together in a design they create visual weight, typically this weight must be balanced out by an equal and opposite weight in order to achieve a desired balance in the design. Not doing so results in a design which feels unstable. The idea is that a balanced designed is more appealing and creates a subtle notion of stability. Well balanced designs are often very comfortable and appealing.

Symmetrical Balance

The first method for accomplishing balance is through symmetrical design. This is when the design of a page is mirrored on some axis and the two halves have identical visual weights. Typically in web design this is when the left and right sides are split vertically and each side has an equal weight. 

Sample 1 - Mobile Web Design

The Mobile Web Design site by Cameron Moll is a perfect example of this. It is fairly obvious that the split is split on a vertical axis and is reflected in equal weight on each side. The site has a very nice balance to it that feels incredibly stable.

The real beauty of this site is that the balance doesn't just feel nice, it is actually really functional. The purpose of the site is to promote an ebook about mobile web development. As such the central image of a mobile device helps to clearly establish the purpose of the site. This image is the central focus of the design. When combined with the high contrast page title the image instantly lets the visitor know what the purpose of the site is. There is no fuzz on it. From there the hierarchy turns to the two side bars which contain all the juicy details the reader will no doubt want.

Sample 2 - Rebuilt World

The Rebuilt World site clearly has a symmetrical balance to it. The simple grid of images is centered on the page as are the other elements in the design. While this layout is not extraordinary, it is extremely clean and comfortable. In this case the central focus combined with high contrast helps the main logo and title to really pop out. It is important to remember that with symmetrical design the center points become the focus of the design and ultimately have the most weight to them. This makes the space prime real estate for a high location in the hierarchy of the design.

Sample 3 - HBC Web

While the Bill Share site has a side to side balance to it, it also has a vertically oriented version of symmetrical design. If one were to split the page along the axis the left and right arrows are on one would find that the top and bottom halves reflect on this axis. The horizontal band across the top containing the logo and tabs is reflected in the band along the bottom containing three large images.

While this sort of balance is not necessarily overly obvious, it does serve one key role in that it effectively frames the content with a top and bottom. By doing so the visitor is encouraged to bounce up and down in the site and focus on the content. Instead of having an overly heavy header or footer, they are just enough to frame the content. Thus the focus is subtly placed on the contents of the site. A very nice balance indeed.

Symmetrical balance is actually relatively common in web design. Especially in home page design. Dozens of examples can easily be found of this type.
Asymmetrical Balance

Asymmetrical balance is achieved when the visual weight of a page is equally distributed on some axes but the individual elements of these halves are not mirror images. That is a really complex way of saying that asymmetrical balance is a result of the use of dissimilar elements to create an overall balance. 

Sample 1 - Green Renaissance

The Green Renaissance site is a fine example of asymmetrical balance. In this case the very heavy green column on the left is balanced out by the combination of the header and two columns on the right. In this way the entire right side of the page is viewed as a single element. What this does is allow the left bar to easily be the most prominent element and occupy the focus of the page. Users eyes are easily drawn to visually heavy elements which contain less content. The weight of this side bar has been balanced out through the unification of the remaining elements so as to create a visually appealing design that is nice and stable.

Without such a balance the weight created on the left side would feel awkward and unstable. Resulting in a less appealing design. The lack of appeal would be subtle and hard to identify, but the subtle nature of design is not to be underestimated.

So in this sample, asymmetrical balance has been used to not only create a comfortable design, but also to establish hierarchy in a page and control the user experience.

Sample 2 - Further

The Further organization which specializes in online marketing has a web site which demonstrates the idea behind asymmetrical balance very effectively. In this case the axis of symmetry is dead center and runs vertically as most samples of balance do. In this case the left side contains more images which stand alone with a lot of visual weight. Each of these is balanced out as a group by an equally heavy set of content. In this way the right side is richer in terms of depth creating a weight as a whole. While the left sides beefy visuals create an equal weight.

The neat thing about this sample is how the left side is simpler in terms of ease of consumption and thereby creating a hierarchy in the page. And yet the visual balance of the page is maintained. So again balance was used to establish both a unified design and a hierarchy within the page.

Conclusion

Balance is one of the elements of design which tends to come naturally. And yet at times, it can still be overlooked. McNeil find that one way to tell if a design is balanced is to step back and squint at the design. If it feels like it is falling to one side it is probably unbalanced. Another strange thing is that designer tend to attach a lot of designs at the top of the page and let everything hang down; McNeil refers to this as a curtain style site. In contrast many sites (and some of the above) consider the entire vertical balance of the site. This is most defiantly more difficult to do, but is still an important thing to consider. This is perhaps most true on home pages where one can more easily control it.

McNeil find this hanging from the top approach interesting considering how unstable it really should feel. In painting a lot of thought often goes into creating triangles with a flat base along the bottom (aka Leonardo da Vinci). These triangles provided a stability to the works. Somehow in web design designers have inverted this and it feels ok.

• Alignment

Alignment is quite simply the arrangement of elements in such a way so that the natural lines (borders) created by them match up as closely as possible. By doing so these elements become unified and form a greater whole. Without being aligned these elements tend to fall apart and lack the unification designers so often seek out. A perfect example of this is having the tops of two columns line up, or the left edges of a series of stacked elements align with each other. When examined carefully, well aligned pages can present rather complex interactions among the elements of the page.

The primary reason to focus on alignment is for unification. Often times a page which somehow doesn't feel very sharp simply lacks alignment. Sometimes McNeil gets so focused on each section of a page, the header, content and footer, that he forgets to look at how they interact in terms of alignment.

Those charged with the task of taking designs and turning them into code should be particularly aware of this principle. As a design is translated into reality it often becomes more tedious and difficult to replicate the alignments established in the original design. Not only is it tedious, but it is often easy to not even notice and perhaps forget about. As developers an awareness of design on this level can really help in the translation process.

Sample 1 - Progressive Design In Motion

The Progressive Design In Motion site is a fine example of alignment. This site is a perfect example of how an underlying grid can help create a unified approach. Imagine if this content heavy site didn't make liberal use of alignment. The result would be a chaotic hard to read page. The grid of the page not only serves to unify it visually, but to also increase the ease with which the page is consumed.

Another interesting point about this site is how the designer broke the grid. Take the logo for example. It would have been really tempting to find a way to make it fit into a single column. But would that have improved the design? Not really. Also, look how the main nav items overflow from one column, but don't fill the second. Again, forcing this to live in a single cell of the grid would have probably just made it harder to use. So in this way the site not only demonstrates the power of a grid system, but also the appropriateness of breaking it.

Sample 2 - Poccuo

The Poccuo site is yet another demonstration of the usefulness of basing a site design on a grid for alignment purposes. In this case the grid has been followed to an extreme. And yet, it doesn't feel forced. Perhaps that is the differentiator. Don't force the grid when it needs to be broken, but follow it when it should. How is that for ambiguous advice.

What McNeil really love about this sample is how the content fits into the grid. At the top of the page the content is large and occupies the full width. As the page goes down the content grows in density and the subdivisions of the grid become smaller. Consider the principle of emphasis in this case. The order of hierarchy in the page follows the page from top to bottom. This couldn't possibly play into the natural order of things any better.

Honestly the beauty of this site speaks for itself. And the power of the grid could not be more obvious.

Sample 3 - Rob Goodlatte

In this less extreme sample, the Rob Goodlatte site demonstrates the principle of alignment in a more typical situation. The home page of this site is designed such that the side bar ends at the same place as the main content column. This simple feat means that these two chunks form a whole. The grid is even extended to the footer, there by unifying it with the design. The end result is a design which doesn't feel pieced together, but rather built to be one solid unified chunk of content.

• Repetition

This principle the focus is on how elements of a design are used more then once throughout a design in varying ways. By doing so designs that contain such repetition become far more unified. This repetition can come in many forms, things such as: color, shape, line, fonts, imagery, theme, or just an overall approach to style. Repetition is an inevitable design principle. If no elements in a design are repeated it typically lacks a unified and cohesive feel.

Sample 1 - Lets Fax

This sample makes use of repetition in pretty obvious ways. And yet, it is still worth talking about. Overall the design of this page is rather simple, and pretty straight forward. No over the top design going on here. But there is a richness to the design, an overall aesthetic that feels soft and cozy, a design which feels unified and clean. In this case repetition has single handedly unified and elevated the design of this site. Rounded corners in this case have been used over and over to bond the page together.

The main frame for the content had rounded corners. As do the main buttons, sub containers and numerical highlights. Even the logo and font choice is all based on soft rounded corners. Clearly the designer consciously chose to unify the page through the repetition of such an element.

The service this site offers is simple and straight forward, as is the design of the site. No cheesy stock photos. No goofy fax machine cliches. Just a simple straight forward design which is nice and cleanly designed.

If instead of rounded corners the designer had chosen the typical pointed ones, the design would feel more typical or default and would simply not feel nearly as sharp.

Sample 2 - Ed Did It

This site is of course another demonstration of how to effectively use repetition. In this case the use of it is not necessarily what makes the page such a grand success, but it certainly is an element of the design which makes it successful. It is obvious of course, but the curly brackets on the side elements echo the same treatment in the logo. This simple, semi graphic element, unifies the bare bones page in such a way so as to give it a much more designer feel. Without these simple little brackets, the design would feel very bland. It is truly amazing how such a small element can be make the difference between success and failure.

Sample 3 - Bandpush

The Bandpush 07 site is an interesting example. In this case the usage of repetition is somewhat hidden, or at least it is a less dominant element of the page. Sure the bold yellow headings repeat each other and from a glance visually unify the page. But what really pulls the page together is its rich use of texture and distressed design. The wooden background fits well with the worn and tattered paper. Every element of the page has been worn and battered to visually unify them.

Sample 4 - iMarc

Another less obvious approach can be found on iMarc . Here repetition has been used in terms of layout. Well sure color has been repeated, but a 3 bucket layout has also been repeated. In the header we find 3 main elements. Then we find two bands of 3 elements. It is these repeating chunks which manage to give the page an overall unified feel.

• Flow

Flow is simply the path a users eyes take through a design. This is primarily a result of how elements like emphasis and contrast are used. In fact, flow is entirely the result of how other elements are put together.

One thing to always remember when considering flow is the natural order of things. There have been studies to determine where eyeballs go (eye tracking study) and it is pretty clear that people tend to work in a rather predictable fashion. Typically things go from left to right and top to bottom; with some variation in there of course. This is why a web site that is right justified feels so funky to us left to right readers. Nothing wrong with doing so of course, designers simply must understand the implications of such decisions.

So selecting sites based on flow is a really tough challenge. Every site has flow, good or bad. So ultimately designers have to determine what defines good flow? McNeil have settled in on this: Flow that feel stable, comfortable and as natural as possible. It can be complex, but it must feel natural and comfortable so that one doesn't feel like he/she is bouncing around the page like a pinball. Now of course the eyes naturally do bounce around, but a site with what McNeil considers good flow will encourage him to take a nice stable path.

Sample 1 - Rikcat Industries

McNeil has superimposed over this first sample site what he believes to be the visual flow of the site. Certainly this is a matter of opinion, but McNeil believes that he has fairly accurately assessed it. This site is super clean and has a pretty much minimal approach to it. As such it is pleasing to see that the flow of the site has been setup so as to resonate with this style of design. The focus starts just where we expect, the top left, and flows down from there, making its way to the right column, and finally the footer of the page. This natural progression follows a patter found all over the web and merges our expectations with our natural tendencies. Nice and easy on the eyes making the site rather easy to consume.

Sample 2 -

The Mark Boulton site presents a bit more complex solution to a similar situation, and yet it retains an easy to use model. The extreme emphasis placed on the main tag line forces the user to start their visual exploration there. The natural tendency is to flow down from there and the next most emphasized text is directly below the tag line. This flows to the right side and finally to the bottom where the sheer quantity of content draws the viewer downward.

This sites flow is not quite the "standard" approach, but it is still very effective. Clearly the focus is on making sure you get the main theme of "beautiful, simple design." In fact, the overall feel of the design reflects the mantra, even more supported by a nice and comfortable flow.

Sample 3 - Kineda

The Kineda site presents a slightly more complex flow then the first two. First the bold red open sign grabs the users attention. Intentional or not, this is the boldest element on the page, and it is prominently placed at the top. So it simply grabs one's attention. From there the mass of images and copy in the top block draws one's attention as one filters through the mass of 8 topics. This section is easy to get lost in. This is not a bad thing, it is actually a bit of feat to have a block of 8 articles like that and to actually capture one's attention in such a way that one can't help but look through them. McNeil find himself not skimming them as much as he typically would. From there the large ad in the lower right quickly draws his attention. Ads are the sort of thing one wants to give enough priority to so as to make them valuable, yet not so high a priority that the content takes second stage. Then again, McNeil guesses it depends on the style of site one is running. Finally the users eyes scan the bottom section and swoop back up to the headline.

Sample 4 - Golden Apple

This final example has a much richer complex looking design then the first two examples, and yet it retains a very simple and clear flow. This is again mostly related to a through analysis of emphasis and an effort to carry out such goals. The reason McNeil finds this sample encouraging is that it is more typical of how sites tend to look. Not in a particular style so much, but just that there are lots of container stuff, tabs, links, lists etc. And yet, it is so simple to scan and consume and the eyes find a pleasant path through the content.

Conclusion

Certainly this is one of the more subjective topics, and only actually testing would show where users eyes go in these designs. Designers should keep in mind the natural tendencies of viewers and how they might consume the designs they create.

Propose Price Feature

Brazilian Daitan (a dealership selling used Honda cars) gave customers the opportunity to propose prices for cars on a "Faça sua Oferta" ("Make your offer") page.

Below are the screen shots of step-by-step user interface for its 'propose price' feature: 

1. User can choose which brand, which branch, price range and final plate different on this page to filter down the kind of cars shown at the bottom. When user clicks on a car shown at the bottom, the website will direct the user to the next page.

2. At this page, user can have a better look at the car from different angles. Beside the pictures, there are details about this car such as Year of Manufacture, Model year, Colour, Provenance, Final Card, Branch and Remarks.  The most important information which is the PRICE was highlighted using sharp colour (red) and biggest font size. At the bottom right of the page, user can propose a price and write some remarks at the 'Make you offer' box . 

3. After the user has filled in 'Make you offer' and click 'Send', he/she will be directed to this page where user are required to fill in their information and leave a comment or suggestion.

4. The comment or suggestion can be about Honda Vehicles and payment terms / Semi vehicles and payment condition / Parts / Praise or criticism / etc.

5. Lastly, user is informed that his/her message has been and will be answered as soon as possible. 

Project Outcomes

To manage my project, i listed down the physical and digital outcomes that I will produce in enough detail for me to be able to make informed judgement about the degree of completion of my project.

Name		Hue Sze Kei Blog URL: http://hueszekeimmpp.blogspot.com/
Project Aims		This project aims to introduce, build and sustain the upcycling culture through e-commerce. The end product is an e-commerce website which allows users to buy upcycle products made by unwanted clothes. It publicizes bloggers who turn materials that would otherwise become waste into unique and luxurious garments.
Project Outcome(s)	1	A flash-based prototype e-commerce website runs on Microsoft Windows.
	2	Available for offline viewing using Internet Explorer 5, Firefox, or Google Chrome.
	3	It showcases the buying process of upcycle items over the Internet.
	4	The buying process includes user login, price proposing section, a bidding feature and online transaction.
	5	Screen resolution is higher than 1024x768 pixels and has 32-bit colour depth.
	6	The file will be saved onto a CD and open using the college’s computer for presentation.

My Degree Essay

E-commerce websites and the Cultural Differences between Asian and Western

This paper indicates that cultural differences have significant impact on the development of the domestic e-commerce. The comparison between eBay (China) and TaoBao; the evaluation of how and why eBay (China) lost to TaoBao demonstrate that studying the target market as well as their attitude and behaviour toward online shopping can affect the consumer’s level of satisfaction when using a particular e-commerce website. This paper tend suggests future e-commerce developer to build their website according to their target market’s preferences in order to succeed in the e-commerce market.

Consumerist Culture

Consumption is a process of purchasing and using goods and services from the market that provide these resources. In the manner of eating, no matter how much food one ate, they will eventually be breaking down by the body into substances needed for energy, growth, and cell repair. After that, one will start feeling emptiness in the stomach and begin to crave for food again to fulfil the body’s need.

This endless consumption of food is similar to the consumption of material goods because when the goods are used completely, one would always have to acquire them again to support the necessities of life. In this way, all consumers are falling into a helpless cycle of consumption, satisfaction, and hunger because what they buy is never enough and the resources can never totally satisfy their need forever.

Today, people rely on buying, rather than making items needed for living. Thus the market must have enough resources available to supply to the consumers’ need. In fact, developing shopping platforms which can satisfy the consumers’ need would be a great way to make money in the current industry. Electronic commerce as a new and efficient shopping platform has significant opportunities as it can satisfy more consumers’ need than a physical store.

Shopping is an activity of selection and purchasing goods from the retailers. The consumers can search and buy goods from shopping.

Thanks to fast-growing use of the Internet, consumers can now perform the shopping task online in the comfort of their home environment. Furthermore, online shopping is more effective and efficient than conventional shopping.

First, with online shopping, consumers can browse products with minimal effort. Second, consumers can efficiently obtain critical knowledge about the products. Third, consumers can easily make comparison between the product features and prices. Fourth, online shopping is convenience because consumer can do purchasing anywhere with Internet connection. Last but not least, online shopping can save time and effort as consumers wouldn't have to waste time and energy on road traffic and finding parking space in a shopping mall.

Electronic Commerce

Electronic commerce, commonly known as e-commerce is virtual way of doing business. It consist of is selling and buying goods and services over electronic systems such as the Internet and other computerized network, such as the World Wide Web. The payment for goods and services is also conducted electronically over the Internet. Therefore e-commerce is a lot more economical if compared to brick-and-mortar store since there is no physical store space, insurance, or infrastructure investment. All one need is an idea, a unique product, and a well-designed web storefront to reach the consumers.

Besides that, e-commerce provides better and quicker consumer service. It also enables consumers to perform quick comparison task. E-commerce also improves information sharing between retailers and consumers. Convenience is a major drive for consumers to utilize e-commerce platform. E-commerce platform enables consumers to experience no traffic jams, no crowds, and do not have to carry heavy shopping bags yet purchase goods with just few clicks efforts.

In general, e-commerce is a type of business model that enables a firm or individual to conduct business over the internet. It operates in four major segments which are Business-to-Business (B2B), Business-to-consumer (B2C), Consumer-to-Consumer (C2C), and Consumer-to-Business. Out of these major segments, C2C is a fast developing pattern. C2C platform enable transaction between consumers via the Internet. eBay and TaoBao are two of the world largest C2C e-commerce websites.

eBay is an online marketplace for buyers and sellers and was founded by Pierre Omidyar in 1995. It is a popular e-commerce website in the world especially in United States. eBay considered China would be its second most important target market since China’s consumer market might overtake the United States as the world’s largest consumer market in the world. Hence in 2002, eBay started strategic alliance with EachNet in China which was founded by two American-trained MBAs, Chinese entrepreneurs. eBay then injected $100 million to build its China operation, now renamed “eBay EachNet,” also known as eBay (China).

The China Market

Today, China’s middle class is already larger than the entire population of the United States and is expected to reach 800 million in fifteen years. The official data from China’s National Bureau of Statistics categorized the Chinese middle class as households with an annual income ranging from 60,000 RMB to 500,000 RMB. According to McKinsey, the Chinese middle class’s purchasing power, range from 85,000 RMB to 342,000 RMB.

In 2006, McKinsey predicted that the by 2025, the Chinese middle class would reach 612 million and China would become the third largest consumer market in the world after the U.S. and Japan. In fact, a recent Credit Suisse report predicts China’s consumer market will reach $16 trillion by 2020, overtaking the United States as the world’s largest consumer market in the world. Furthermore, Asia has reached 1,016,799,076 Internet users on December 31, 2011. It has the largest Internet user population in the world as shown in Chart 1 below.

Chart 1: Internet Users in the World by Geographic Regions - 2011 

These evidences hence indicate that China is a potential target market for e-commerce developers who aim to dominate the world’s e-commerce market.

Cultural Differences

Even though eBay realised that China is an important target market and launched its China operation, eBay (China) with the intention to globalize its C2C e-commerce website and monopolize the China market to become the world largest online marketplace. It failed to recognize that the Chinese market is very different from the Western market and thus lost to the local C2C e-commerce website called, TaoBao.

Taobao was founded by Jack Ma in 2003 and it is the most popular C2C
e-commerce site in China today. Jack Ma spent much time to identify his target market and study the local consumers’ attitude and behaviour to make TaoBao friendlier to use for its consumers. In spite of that, eBay stuck to its “global platform” which did not fit the local consumers’ tastes and preferences. As a result, the local consumers prefer to shop on TaoBao instead of eBay (China).

Understanding how cultural differences may affect consumer evaluations of websites can uncover ways to design a truly user friendly interface. Cultural preferences can affect the degree of user friendliness of an interface such as colour, content and structure. Given that different culture has different perception toward things; white may symbols purity in the United States while it is a symbol of death in China, so disregard cultural differences, the website will be doomed.

The reason why eBay (China) lost to TaoBao is because eBay (China) was too globalized and not localized enough. eBay sent a German manager to lead eBay (China) and brought in a chief technology officer from the United States but neither one spoke Mandarin or understood the local market. Moreover, because the top management team didn’t understand the local market, they spent a lot of money doing wrong things, such as advertising on the Internet in a country where small businesses didn’t use the Internet.

Besides that, eBay (China) advertisement was spreading on buses, subway platforms and everywhere else. Despite the fact that eBay (China) spreading its ads all over the places, Jack Ma fought back cleverly knowing that most small business people would rather watch television than browsing on the Internet, he secured advertisements for TaoBao on major television channels. In fact, advertising strategy used by Jack Ma is better and saving more costs and efforts.

Segmentation

Segmentation involves finding out what kinds of consumers would be the company’s target market. Several kinds of variables can be used for segmentation while the three relevant demographic variables are age, education, and income.

The age variable is crucial for the reason that younger consumers, especially those under age 25, are more interested in using new technologies, like the Internet to search for products, obtain product information, compare and evaluate alternatives if compared to older consumers (Wood, 2002).

Besides that, younger consumers have the ability and the resources to perform online shopping. “Self-efficacy” refers to individuals’ beliefs that they have the ability and resources to successfully perform a specific task (Bandura, 1994). Since online shopping requires basic knowledge of computer use as well as knowledge about the Internet, older consumers with low self-efficacy are less comfortable to shop online and thus avoid online shopping.

Education is another relevant demographic variables used for segmentation. Higher educated consumers are more comfortable using e-commerce site like eBay or TaoBao to shop. A reason for this is that education is often correlated with “computer self-efficacy” and “Internet self-efficacy”. Marakas et al. (1998) define general “computer self-efficacy” as an individual’s ability to perform a task through multiple computer application domains, while “Internet self-efficacy” is an individual’s ability to apply Internet skills in finding information or troubleshooting search problems (Eastin and LaRose, 2000). Subsequently, consumers with low education level may not be able to perform online shopping task by themselves.

The final relevant demographic variables used for segmentation is income. Consumers with higher household incomes intend to shop more often on
e-commerce sites if compared to lower income consumers. This is because, higher household incomes consumers have greater purchasing power and they are more likely to own a computer with Internet access and they often are higher educated persons (Lohse et al., 2000).

Target Market

There are two approaches to marketing. First, all consumers are treated as the same; the company is not making any specific efforts to satisfy particular groups. This may work when the product is a standard one where other competitor really can’t offer something different. Second, company chooses to target on one of several segments that exist while leaving other segments to competitors.

Both eBay and TaoBao went for the second approach which they chose to target on the particular consumers that they can address and grouping them according to appropriate demographic variables such as age, education, and income.

When eBay launched in China, it segmented its target Chinese consumers as those well educated, familiar with the Internet, earning a monthly payment over 3,000 RMB, and 20-40 years old (Chen et al., 2007). On the other side, TaoBao focus its segmentation on Chinese consumers as those between 20-30 years with good education levels which appears to included students as well, after analysing China’s C2C market for four months.

Comparing the target markets of eBay and TaoBao, it is clear that both of them targeted young people while TaoBao’s target market is much broader as it includes students, while eBay (China)’s target consumers are professionals who have salaries. Consequently, TaoBao’s segmentation was more successful than eBay (China) since student consumers made 10 percent of online purchases (China IntelliConsulting, 2008).

Trust between Consumer and Computer System

Lack of trust is one of the most frequently cited reasons for consumers not shopping online (Lee and Turban, 2001). Online shopping does contain certain level of risk since consumers cannot monitor the safety and security of the payment process and feel uncomfortable sending their personal and financial information. Therefore, the payment security is the most important issue to develop e-commerce.

Both eBay and TaoBao have launched their own online trading tool: Paypal and Alipay. eBay acquired Paypal in 2002. Through PayPal, buyers pay directly to sellers without any middle transaction. In contrast, Alipay launched by TaoBao is as the credit intermediary. It is a secure payment service which will temporarily keeps the money of the purchase before the buyer confirms to receive the purchases. To be clear, of buyer is willing to pay the seller for a product, the money will first be put in the buyer’s account in Alipay, and the seller will be informed to ship the product to buyer. After buyer receives the product, the buyer will confirm the payment in Alipay, and the seller will receive the payment (Alipay, 2008).

This trading tool is launched because TaoBao found that Chinese consumers have a strong suspicion on online payment. As a 22 years old Chinese consumer said, he felt more confident paying money to Alipay and then only releasing the money after he had his purchase in-hand first. Although Paypal also introduced this method to China after 2007, it failed to win consumers back as the consumers are used to and comfortable to trade on TaoBao e-commerce site.

In addition, TaoBao also strengthening the comprehensive cooperation with banks such as ZheJiang branch of ICBC (the Industrial and Commercial Bank of China). As a consequence, the introduction of this service has greatly increased the consumers’ confidence of TaoBao online payment. In July 2004, Taobao also reach an agreement with the Ministry of Public Security, to build a “national citizen identification number enquiry service centers”, which as a result, provides a more secure trading environment for TaoBao. Moreover, TaoBao also has free online anti-virus/ hacking system and user payment account verification that seek out those who use false indentify information to deceive bad or illegal action on TaoBao, while eBay does not integrate these systems.

Trust between Buyers and Sellers

Online shopping involves trust not simply between the consumer and the computer system but also involves the trust between the buyers and sellers. In the United States and much of Europe countries where agreements are commonly rather precise and contractual in nature; while in Asia, building a relationship of trust is important, especially in China. In the Chinese context, it is critical that buyer must trust seller before engaging in a transaction. Given the extremely high risk of fraud in China and given the buyer desire to reduce uncertainty, the embedding of an online messaging system in the C2C platform allows pre-transactional communication and so facilitates the development of trust between seller and buyer.

Since TaoBao’s establishment in China, it has been providing an online instant messenger called Aliwangwang, which is ranked as the most satisfying service of TaoBao. On the contrary, there was no online messaging system or any kind of direct communication between sellers and buyers was allowed in eBay before it acquired Skyped in 2005 (Chen et al., 2007). Even though Skyped is embedded into eBay after 2006, consumers claimed that it is not user friendly as it is a non-integrated tool, whereas Aliwangwang is integrated into each seller’s webpage.

Figure 1: Screen shot of TaoBao buyer’s webpage 

In order to build the swift trust, a direct communication is crucial. A buyer is thus able to identify a seller as being online, and contact the seller immediately without having to leave the TaoBao platform to use other tools. Rather than going through the third party, real-time and direct communication is preferred in China. Another major characteristic founded by TaoBao is when Chinese consumers bought things: they see the goods first, and then cut the price. Aliwangwang along these lines provides instant communication between buyers and sellers and allow chances for buyers to negotiate the prices before they decide to purchase. In fact, Aliwangwang is an important tool to make virtual trading real. 

Ou and Davison interviewed 10 users of eBay and TaoBao, focusing in particular on the interface between these two platforms, as well as the communication channels and their importance for successful transaction completion. The interviews is reported below.

• One buyer specified “when I shop in TaoBao, I only select items from sellers who are online because I like to communicate with the seller and solve transactional problems immediately”. Similarly “the icon (active blue or inactive grey) in TaoBao helps me filter sellers. By appearing online, those sellers express their readiness to communicate with consumers, and so I trust them more. Online status is even more important for me if it is the first time to transact with a seller. It seems that online sellers are more willing to take care of buyers’ needs because they make the communication channel open”.
• One interviewee commented “searching for online sellers is critical because when consumers buy things, they must have questions to ask. The transaction intention increases a lot if the seller is online. Trust can be also developed during the conversation in Aliwangwang. Although Skype is also used as a consumer-buyer communication channel in eBay (China), only a few sellers put it to use. Sellers’ online statuses are unknown in the web pages until you try to contact them by logging into Skype. This design creates inconvenience and reduces my communication intention with the sellers”. 

• Some sellers also comment “I like the embedded Aliwangwang in TaoBao because potential buyers always want to communicate with me directly. TaoBao provides a uniform instant messenger for such demand for both buyers and sellers. I don’t need to switch among different instant messengers such as ICQ, QQ or Skype. With Aliwangwang I can easily signal my willingness and readiness for communication. That is good for me to build consumers’ first-stage confidence in transactions”. 

• Both buyers and sellers pointed out that Aliwangwang can fulfil consumers’ needs for impulsive purchasing: “sometimes people want to buy because of impulse. Under this situation, they want to communicate with sellers immediately. If the sellers are not online, the impulse may not wait for another day”. 

• Some buyers and sellers have moved from eBay (China) to TaoBao because of the convenience provided by the embedded instant messenger. For instance, “Aliwangwang is the most critical determining factor for me to switch to TaoBao from eBay (China). I can save the products and the sellers in my Aliwangwang bookmark list. I can directly select sellers in Aliwangwang and communicate with them”. 

These evidences indicate that TaoBao’s success appears to be founded not only on the explicit indication of a seller’s online status, but also embedding of Aliwangwang directly into TaoBao e-commerce site.

Trust Development in Reputation System

Reputation systems are also important in developing trust between the buyers and sellers. Reputation system is the feedbacks from buyers for the future buyers to review and it has significant impact on the buyer’s willingness to purchase since the buyer need sufficient confidence to engage in a transaction. A pleasant or arousing experience will let buyer engage in more unplanned purchasing, and browse for more products.

Online shopping experience resulted in satisfactory outcomes and if it was evaluated positively, it leads consumers to continue to shop on that site in the future. However, if these past experiences are judged negatively, consumers are reluctant to do online shopping on that particular site in future occasions. This illustrates the importance of turning existing online consumers into loyal consumers by providing them with satisfying online shopping experiences.

Giving feedback after a sale is completed is an essential part of the TaoBao process. Sellers live and die by their reviews thus TaoBao sellers usually try very hard to avoid negative ratings. An example of positive feedback would be “I’m very happy with it, and the seller provides very thoughtful service! Great!” While a common complaint would be “I know you’re very busy, but you don’t need to be quite so curt when speaking with me. If it’s not “yeah”; it’s “OK”; only ever one word at a time. This disrespect is why I’m giving a negative review. Even though some buyers might make unreasonable requests or have impatient attitude, yet TaoBao sellers still do their best to give a satisfactory reply because they worry about the potential negative ratings that would affect their future sales.

These feedbacks thus contribute to the word of mouth which has become a more significant source of product information, which the Chinese consumers perceive it as a credible information source. In 2010, 64% of consumers said that Word of mouth influenced their purchasing decisions, compared with 56 percent in 2008. This result suggests that word of mouth has grown strongly in recent years as a source of consumer information.

Website design

Communication influences the consumers’ attitude in the transaction process; reputation system makes consumers think whether or not to have transaction again; whereas website design helps consumers decide before the transaction.

According to an “Online Consumer Experience in Mainland China”, a survey conducted by GCCRM in 2007, TaoBao was top among sites people “ mostly loved”, while among those people “mostly hated”, eBay (China) rated high. When the consumers are being asked the reason why they “hated” any e-commerce site, most consumers chose the website design as their main reason.

Comparing the eBay (China) website with Taobao website, eBay (China) appears to be more product-centric, whereas TaoBao is built according to consumers’ likes and dislikes. In contrast, eBay (China)’s Website has a more international feel without adaptation to the Chinese context. It is clear that TaoBao had upper hand against eBay because it really understood Chinese consumers. Take listings for example: TaoBao organized its listing similar to local department stores. As a result, consumers perceive TaoBao as informal and friendly. On the other side, eBay refused to change its website after its establishment in China until 2007.

Besides, eBay’s website is text-rich, while TaoBao’s website is picture-rich. eBay’s website design makes it look professional yet it becomes unfriendly to young Chinese consumers since these consumers are the group mostly student. As a result, the text-rich and serious interface design would chase them away as they are more favourably to elements that make online shopping entertaining. In such case, TaoBao’s website looks friendly and entertaining to these young consumers.

The concept of eBay text-rich interface might be affected by the time-conscious environments as United States consumers often shop online just to acquire a specific product or service and their main concern is to purchase products in an efficient and timely manner to achieve their goals with a minimum of irritation. Therefore heavy graphics with long download times are perceived as a nuisance (Larson and Czerwinski, 1998).

Conversely, Asian appears to prefer screens heavy with animated graphics, video and audio. Although eBay intend to penetrate its e-commerce website into the China market, it did not take the Chinese consumers’ preferences into consideration and refused to change its website interface design is what makes it lost to TaoBao.

In additional to the website interface, eBay also lost a lot of consumers because of the loading speed. When launching in China, eBay used its server in the United States to run the website, and the distance slowed down the loading speed. Moreover, problem such as “server not found” also occurred since the local authority blocked some of the foreign websites. As a result, the Chinese consumers perceive that eBay (China) website’s usefulness and user friendliness is low. Even though eBay (China) has learned the lessons and copied TaoBao’s style to its new website in China, Eachnet.com, in 2008. However this action caused “disgust” among the loyal consumers of TaoBao.

Consumer service

In online shopping, the human interaction with a service employee or salesperson is replaced by help-buttons and phone numbers.

A phone number shown on the website is necessary so that consumers can call when they have problems. TaoBao provides a call centre available 24 hours a day to answer any questions and accept suggestions. In contrast, eBay (China) did not provide such consumer service. There was even no phone numbers shown in eBay’s website before 2005. Consumers can only email questions or join an online discussion group which is weak in handling urgent problems (Rein, 2006).

In addition, TaoBao promised that any complaints will be settled within seven workdays. TaoBao consumers can also enter the “Taobao Helping Community” to help other consumers or be helped. In addition, top management executives in Taobao frequently communicated with consumers through forum and online messenger, which is rare in Chinese online market.

Besides that, TaoBao’s discussion board is far more active than eBay’s. There are 27 subject channels in eBay, while Taobao has 76 big channels and in each big channel there are 10-20 small channels. Up to 7 June 2008, in “Buyers” channel of eBay, there are altogether 3,540 postings, while in “Buyers” channel of Taobao, there are 162,300 postings (Taobao and eBay, 2008).

Taobao also fosters a much stronger community than eBay, and its consumers are able to share their trading knowledge, personal feelings, and all other things they would like to share. Many consumers feel Taobao brings them “a sense of welcome right away” and encourages them “to become more involved”, and some even say that Taobao offers not only transactions, but also a culture (Chen et al., 2007).

A consumer interface should also contain some elements that attract a visitor to stay and return, while the fact that communication on TaoBao is very saccharine may be the reason that encourages the visitors to become more involved to the platform since most Taobao shopkeepers tend to refer to their consumers as qin ("dear," "dearie", or if you prefer the British slang, "ducky"), whether they are young or old, male or female. The friendly qin is like a ray of warmth reaching out across the cold wastes of cyberspace.

These factors contribute to TaoBao has higher consumer satisfaction than eBay China. According to iResearch, the user satisfaction level was 77% for TaoBao while 62% for eBay (Wang, 2005).

The easier and more effortless a technology is, the more likely consumers intend to use the technology while “Ease of use” is defined as the individual’s perception that using this technology will be free of effort (Davis, 1989, 1993) or involve a minimum of effort.

According to a Morgan Stanley report, Taobao was more consumers focused and easy to use than eBay (China). With most users not sophisticated about auctions, the majority of Taobao’s listings were for sales. Only 10% of its listings were for auctions, while eBay (China) had about 40% of its listings for auctions. As a result, Taobao’s trading structure is better accepted in China, where the Chinese consumers are not familiar with auction trading yet.

Practically, many consumers are not likely to spend much time just in order to get the product in a little lower price. Also, since there are over 800,000 sellers on Taobao, consumers are able to discover an item for the lowest price online, which has almost the same price result as auctions. Therefore, fixed price is more welcomed by most Chinese online consumers.

In addition, TaoBao made a plan that it wouldn’t receive any charging transaction fees and listing fees in the first three years. The founder of TaoBao, Jack Ma believes that only when users get real benefits in online transactions then there will be more loyal network consumers. Just as Jack Ma predicted, no charge is the right business model for China. The no fee policy and secured Alipay service discouraged consumers from doing offline transactions.

On the other side, eBay has insertion fees, final-values fees, features fees and 3% transaction service fee which discourage consumers to deal on eBay while there is a better option such as TaoBao exists.

Proposal for the Development of the Domestic E-commerce

E-commerce is a growing market because it is a lot more economical if compared to brick-and-mortar store and all one need is a unique selling point, and a well-designed web storefront to serve the target consumers. Therefore any individual or firm with knowledge of computer use as well as knowledge about the Internet has the ability to launch an e-commerce website business transactions and activities.

A recent Credit Suisse report predicts that China’s consumer market will reach $16 trillion by 2020, overtaking the United States as the world’s largest consumer market in the world while Asia has reached 1,016,799,076 Internet users on December 31, 2011 and become the largest Internet user population in the world. These evidences hence indicate that China is a potential target market for e-commerce developers who aim to dominate the world’s e-commerce market.

Even though eBay realised that China is an important target market and launched its China operation, eBay (China) with the intention to globalize its C2C e-commerce website and monopolize the China market to become the world largest online marketplace. It failed to recognize that the Chinese market is very different from the Western market and thus lost to the local C2C e-commerce website called, TaoBao.

The main reason why eBay (China) lost to TaoBao is because eBay stuck to its “global platform” which did not fit the Chinese consumers’ tastes and preferences; it was too globalized and not localized enough because the eBay didn’t understand the local market. In contrast, Jack Ma spent much time to identify his target market and study the Chinese consumers’ attitude and behaviour to make TaoBao website friendlier to use for its local consumers.

Understanding cultural differences is important as it may affect consumer evaluations of websites while disregard cultural differences, the website will be doomed and eBay (China) is the good example in this case. Several kinds of variables can be used for segmentation and for consumers’ attitude and behaviour study while the three of relevant demographic variables are age, education, and income are chosen by eBay (China) and TaoBao to segment their target market.

Comparing the target markets of eBay and TaoBao, it is clear that both of them targeted young people while TaoBao’s target market is much broader as it includes students. Consequently, TaoBao’s segmentation was more successful than eBay (China) since student consumers made 10 percent of online purchases. eBay didn’t include student as their target consumers because it didn’t understand the Chinese consumers’ attitude and behaviour toward online shopping.

The most important issue to develop e-commerce in the China market is “trust”. Three different kinds of trust are discussed in this paper.

First, trust between and consumers and the computer system is an important factor that e-commerce developers have to deal with as Chinese consumers have a strong suspicion on online payment. Alipay is a good tool introduce by TaoBao prior to this issue. Chinese consumers feel more confident paying to Alipay and then only releasing the money after they had their purchase in-hand. Paypal introduced this payment method after 2007 but it could not win its consumers back. In addition, TaoBao also strengthening the comprehensive cooperation with banks has greatly increased the consumers’ confidence of TaoBao online payment. Moreover, the National Citizen Identification Number Enquiry Service Centers also contribute to a more secure trading environment for TaoBao.

Second important factor is the trust between the buyers and sellers. In the Chinese context, it is critical that buyer must trust seller before engaging in a transaction. The embedding of an online messaging system in the C2C platform such as Aliwangwang allows pre-transactional communication and so facilitates the development of trust between seller and buyer. In contrary, there was no direct communication between seller and buyer was allowed in eBay before it acquired Skyped in 2005. Even though Skyped is embedded into eBay after 2006, consumers claimed that it is not user friendly as it is a non-integrated tool, whereas Aliwangwang is integrated into each seller’s webpage. There are evidences indicate that TaoBao’s success appears to be founded not only on the explicit indication of a seller’s online status, but also embedding of Aliwangwang directly into TaoBao e-commerce site.

Last but not least, reputation systems are also important in developing trust between the buyers and sellers. The feedbacks from buyers have significant impact on the future buyer’s willingness to purchase thus giving feedback after a sale is completed is an essential part of the TaoBao process.

Although eBay intend to penetrate its e-commerce website into the China market, it did not take the Chinese consumers’ preferences into consideration and refused to change its website interface design is what makes it lost to TaoBao. Asian like Chinese prefer screens heavy with animated graphics, video and audio, eBay (China) however is text-rich and perceived to be too formal and unfriendly to the young Chinese consumer. Even though eBay (China) has learned the lessons and copied TaoBao’s style to its new website in China, Eachnet.com. However this action caused “disgust” among the loyal consumers of TaoBao.

In terms of consumer service, a phone number shown on the website is necessary so that consumers can call when they have problems. TaoBao provides a call centre available 24 hours a day to answer any questions and accept suggestions while eBay did not even include a phone number in their website.

In addition, TaoBao promised that any complaints will be settled within seven workdays. TaoBao consumers can also enter the “Taobao Helping Community” to help other consumers or be helped. In addition, top management executives in Taobao frequently communicated with consumers through forum and online messenger, which is rare in Chinese online market. In fact, TaoBao’s discussion board is far more active than eBay’s.

A consumer interface should also contain some elements that attract a visitor to stay and return. The friendly “qin” is like a ray of warmth reaching out across the cold wastes of cyberspace. Many consumers feel Taobao brings them “a sense of welcome right away” and encourages them “to become more involved”.

The easier and more effortless a technology is, the more likely consumers intend to use the technology. As a result, Taobao’s trading structure is better accepted in China, where the Chinese consumers are not familiar with auction trading yet. Furthermore, no charge is the right business model for China.