September 2010 Archives

I really like cute package designs of lip glosses and lip balms. These can come in all shapes, including plastic cupcakes, tarts, doughnuts, and chocolates. Some also come in cute branded tins. The cute lip gloss designs appeal to the little girl in me. In this post, I've added several examples of innovative designs for lip balm and gloss.

"Joe and Paul" have several nicely-designed products. They use a lot of old-fashioned designs and florals in their packaging. One of their past products was lip gloss branded with 'Alice in Wonderland'; the most recent addition to their brand are patterned sticks of lipstick with cat heads carved out of the top of the lip stick. This is a little unusual, and I am not aware of any other company carving a design out of their lipstick, but it's certainly different.

Other gloss includes Victoria's Secret limited edition lip gloss, Maiko lip balm, and DuWop's Lip Venom. Victoria's Secret lip gloss celebrates the style of demin/jeans. Maiko, a Japanese company, sells lip balm with cool and collectible Japanese-style design on the packages, and DuWop's Lip Venom package stands out with a simple design, muted colours, and large font.

Scharffen Berger's Ganache for Lips comes in several dessert-themed flavours with edible-looking packaging. Cheeky Chimp has several cute package designs for its lip balms, including several with chimps, but I like Chocolate Truffle.

Urban Decay has launched a series of lip glosses with different men on them. When the lip gloss package is turned upside down, the men are revealed in just their underwear. Nice! I also liked the antique-looking little tins of lip balm from MOR Cosmetics.

Love & Toast has some very cool package designs for its whole product range. I love the colours - bright pink packaging and neon green lip balm. The packaging uses hand-drawn imagery and fonts, and it's very well-placed for young-at-heart (music and festival) buyers. 

I have always been interested in the role that colour plays in psychology and marketing. Obviously, different cultures perceive different colours in a different way. 

The following articles look at colour branding trends for websites and logos - blue and red are the most used colours on the web, and this has been the trend for awhile (1). I think that blue has always been a popular colour in branding because it is a colour that most people respond to; typically it is also a favourite colour of many worldwide. Blue is a colour accepted by other males and females as the most favourite colour worldwide (2).

Using the correct colours or colour combinations in branding is important, and companies spend a lot of money on their image. Blue is one colour that has wide appeal, so I believe that many companies, particularly start-up companies, use this colour. The colour is also widely-used across different types of companies. The colour is a calming and stable colour, but blue can also be used to signify importance and power. Twitter, Facebook, Hewlett Packard, Dell, Paypal, Expedia, CNN, Wal-mart, NHS, and Microsoft are all examples of websites (and corporations) that use blue as a predominate colour.

Red is popular as well, and popular brands that use this colour include BBC, CNN, YouTube, Yahoo!, Adobe, Coca Cola, Canon, and About.com.

Although blue and red are the most popular colours for brands, other brands are spending more money on selecting other colours and getting the shade of colour trademarked, such as T-mobile has done with the colour magenta; if all brands did this, colours would be a limited resource (3).

(2) Anatomy in Colors in Web Design: Blue and the Cool Look, Aidan Huang. January 22, 2010. [http://www.onextrapixel.com/2010/01/22/anatomy-of-colors-in-web-design-blue-and-the-cool-look/].

Imagine that you own a personal website. For marketing purposes, you wish to add a FaceBook 'LIKE' button to your website. In addition, you would like FaceBook to 'know' about your website and for it to show up in other user's profiles. This is where Open Graph comes in. In order for FaceBook to use your website as a FaceBook object (page), you will need to define the markup/schema, META tags, and include a 'LIKE' button.

In the <html> tag, you will need to add the Facebook and Open Graph schema:

<html xmlns:og="http://opengraphprotocol.org/schema/"
      xmlns:fb="http://www.facebook.com/2008/fbml">

<meta property="og:title" content="Personal Website"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="http://URL"/>
    <meta property="og:image" content="http://URL/image.gif"/>
    <meta property="og:site_name" content="personal"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description" content="A description goes here."/>

I visited Kew Gardens (on the outskirts of London) recently, and I got a few photographs of the different plants and the grounds of Kew Gardens. Kew Gardens has many outdoor and indoor gardens showcasing plants from all over the world. One of the activities includes climbing many stairs to the same level as the tops of the trees for excellent views and a walkway over the gardens.

One of the tasks that I am currently working on involves using A/B testing and investigating areas where this can be used on the current websites. For those who have not heard of A/B Testing, A/B Testing is the ability to test changes to the user interface on a website in order to determine if these changes are beneficial to the users. This tests one version (or aspect of the user interface) with one or more versions; a defined percentage of users will randomly get one version. The test results statistics will be examined to determined if the user interface change should go live. A/B Testing will highlight whether or not the change draws users in or sends them running away.

However, there are certain aspects of A/B Testing that should be followed. One of the clients had mentioned making several changes to several different areas of the website and tracking which version of the website was more useful to users, but multiple changes are not recommended. With multiple changes, it is unclear which aspects or changes are beneficial. 

In "The Dark Side of A/B Testing: Don't Make These Two Mistakes!", the author mentions a retailer website's multiple A/B tests; the company's revenue increased, but they were unable to conclude which aspect of the test increased their revenue because major multiple changes to the website had been made (1). In short, developers and business owners need to be very careful when writing their tests.

However, if multiple changes need to be made, developers can use Multivariable Testing. This form of testing allows multiple versions for user interface changes to be created, categorised, and tested over a period of time. According to "Multivariable Testing", A/B Testing is superior to Multivariable testing because A/B Tests are easier to set up, results are quicker, clearer and more accurate; however, Multivariable Testing is acceptable if used with care and when multiple changes are absolutely necessary (2). The article also provides a checklist of notable considerations and influences when using A/B Testing as opposed to Multivariable Testing, and this is well worth a read.

In short, business owners need to be clear of the A/B Testing objectives and to take care when making decisions about testing their websites.

(1) Balkin, Matt. "The Dark Side of A/B Testing: Don't Make These Two Mistakes!". http://blogs.omniture.com/2006/11/02/the-dark-side-of-ab-testing-dont-make-these-two-mistakes/ [2 November 2006].

(2) Alt, Brian and Usborn, Nick. "Multivariable Testing". http://www.marketingexperiments.com/improving-website-conversion/multivariable-testing.html [29 December, 2005].

I am currently working with a website that contains many dynamic links that are created based on names. Normally, the names contain straight-forward text. However, there are some names that contain other characters, notably the forward slash. The 'LIKE' button works perfectly until it encounters the forward slash in the URL. (A quick test of the ampersand revealed a success on the 'LIKE' button, so it only seems to be the forward slash that creates the error.)

Encoding the URL with the value of the forward slash was the obvious fix for this issue, but FaceBook encodes the values back to the forward slash. The result throws a 'Page Not Found' error when clicking on the posted URL in the FaceBook profile (the result of clicking on the  'LIKE' button.)

At least I am not the only one having this problem; the problem has been flagged by other developers as a bug. Until then and if possible, the work-around would be to remove any forward slashes from the URLs if you intend to use the FaceBook 'LIKE' button.

Happy developing!