Colin's hub

People now are more tech-savvy, or, more tech-reliable; they want to carry less and less device, or just hope for one, which is able to integrate more and more functions on it. IPhone is a great example, and the origin of this lazy habit. Therefore, with the emergence of NFC, the desire of “carry one for all” can be fulfilled in the near future. I believe NFC is a transformative innovation that attempts to add real value for the consumers. Our mobile device is going to be not solely a communication route but a tool that controls/ manages our daily lives. In fact, NFC already has significant practices and uses in Japan, according to an article on Ad Age. Not only used in merchandise stores, their railway system has already adopted this technology to make citizens’ lives more convenient.

Many may argue NFC and QR code are interchangeable, yet I think they are different from each other.  The characteristics of QR codes are more like message storage and medium, which is a one-way communication. Although the production cost of QR code is relatively cheap, you can just use it for that specific purpose and not able to change the content in the future after you print/place a QR code. On the contrarily, NFC is more like a message exchanger that allows two-way communications. Adding to that, although the initial investment fee on the machines is relatively high, it should be considered as a long-term investment with high return as you can always change the message/content in the NFC machine easily.

However, setting up a promotion on an eCommerce website is not as easy as you thought. There 3 platforms that need to be involved for a single transaction made on an eCommerce site: 1) Website page/user interface, 2) Commerce management platform; 3) Fulfillment platform. So in order to successfully setup a promotion, you need to ensure following working properly:

Step 1: Setup a promotion on commerce platform, specify the business rule, promotion type, condition and rewards;

Step 2: The promotion message and cart calculation is functioning properly on user interface;

Step 3: The discounted amount is precisely  passing to fulfillment vendor's system.

Bugs are easily to appear in any step and may cause the consequent steps malfunction. For example, even if you correctly setup a promotion on Commerce platform, your user interface may not showing corresponding message and the cart may calculating the wrong figures.

What I like about the site:

1. Responsive. (the responsive build is even better than some professional dev vendor..)

2. SEO optimized. From content to URL setup, the site is pretty search optimized.

3. All-in one. Given it is a small company, it is very smart to put all the information about your company in one site.

4. Payment integration. I personally think shopify is a very friendly but handy platform for small retailer to integrate her eCommerce site. (I even prefer shopify than big commerce platform such as EpiServer commerce...)

What I think could be improve:

1. More break points. Currently, there are only 2 break points for the site to be responsive.

2. Better visual design. There are still some small details that the site can take care of to be better

1. Everyone is doing that, doesn't mean you have to do it.

Social media is a very cost efficient medium, but it doesn't become a reason for you to be on every channel. It is wise to select only effective and meaningful vehicles to your business.

2. Content marketing not equals to jamming marketing

Do not keep placing your brand products name in every social media message you send. You should understand what industry you are in and tailor proper communication.

3. 360 marketing

Do not think digital strategies separately; social media should be considered together with other marketing practices (online, offline)

4. Set up proper CRM system

Although social is hard to identify to specific customer, it is a mistake to not give up collecting personal data. In my database class, we learnt that for social media marketing we should:

Should centralizing information

Semi-Anonymous marketing = reach individuals who share certain characteristics even if their actual identities are unknown

Cookie identifies a computer but can link to additional information that’s either observed or provided by the visitor. This data can be stored within the cookie or preferably in a database linked to the cookie ID. (Re-targeting)

IP address to look geographic location and link to geodemographic database such as PRIZM

1. Find the right audience

One of the biggest issue in current market place (no matter what industry) is that we are facing a very fragmented audience. It's no longer male or female, baby boomer or y generation. The customer profiles in nowadays are more sophisticated and harder to capture. Therefore, for any app idea, you need to vet your plan by targeting to the right, profitable audience.

2. Find the right channel.

According to kicked demand curve model, if an industry has inelastic price, price is the only factor that will not affect your demand. In other words, in a market such as mobile app, everyone else is free, if you are charging fees for download, you'd better wish your app could sing with flying colors. One strategy the speaker shared is that she created 250 landing pages that are not visible to each others for people searching with different keywords. This is very smart, because by doing so, you are widening your lead generation channels.

3. have good customer service

1. More engaging

2. Seamless, consistent experience across all dimensions

3. retail-like, friendly experience

So I am going to inspect the renovated Delta from its Website, Mobile Page and Mobile app to see that whether I feel those experience are been created as a customer

Website

Stunning photo centered design = Warm emotional message makes people what to travel. (Even I’m not a big fan of traveling and a poor student, this picture really lures me to book a ticket.)

Clean design to ensure the picture message is fully demonstrated

Personalized orientation. The membership login and “My Trips” section are set at the very first section/eye catching area.

Real-time twitter section. The most successful PR is leveraging the world of mouth, so why don’t you just put it on your website to let customers add some credits for you?

Escape section. Makes Delta like a friend of yours or an expert trip adviser to help you plan your private trip. 

Mobile Page

Programming a page to be responsive to multiple designs is easy (although not to me…), but design to match users’ action mode/behavior is the REAL responsive design we are talking here. Delta’s mobile page is the best design I have seen so far comparing to other airline companies. Reasons are:

Considerate design to put fight status checking section on the top. Although people now are exploring to make more purchases on mobile, I’m sure most of them do not have the confidence making expensive entry such as an airplane ticket. So what is the point putting the booking section on the very first section of your mobile page? Instead, people DO frequently use mobile to check their flight status. What Delta doing here is, not only putting on the top, but also allow you to quickly check with minimizing users’ input effort. It is easy to implement, but just this little, easy function brings customer convenience hence better experience and a significant difference while no one else is doing.

Type-in design for traveling route input. Sometimes you do want to minimize user’s effort to type letters, but you also want to avoid super long drop off list for customer to just pick one item. So Delta makes its city input method to ask customer to type instead of using a list. If you are an iPhone user, you will understand what I’m talking about now… I hate those long lists.

Clean design + Selective functions = saving your money! Just because you have a large amount of data plan doesn’t mean you want to give up the opportunity to save some mobile data traffic right? Delta is managing its mobile touch point to give you value but also save your pocket. Sweet.

Mobile App

Since I am not a Delta member (but after this, I’m considering become one actually), I didn’t download its Mobile App on my phone. But through its introduction page, I could tell that it has a very personalized, engaging and consistent mobile app. Evidences are but not limited to:

Allowing user to download boarding pass to their app. Cool technology yet eco-friendly. Win-win.

Shows user's upcoming trip with detail information

Allowing user to book a ticket via the app.

Summary

Good UX aids to build a trusted impression for your ecosystem. In detail, you should minimize the steps of checkout but also offer them as much as flexibility for them to edit any information they feel not comfortable at any point of time. Below is a user checkout flow that I mapped for a eCommerce site based on the discussion with our dev team and UX architects at my company.

It is a flow for a 3-step check out process (Enter information, payment, confirm). As you can see, we offer a lot of break points for user to edit their information through out the first 2 steps. And on the user interface, we also include customer service contact information to assure user can find proper find whenever they need. On the meanwhile, we also use external java script to ensure the information (address) that users enter are corrected. This makes them to feel like the site/brand cares about their information.

On the other hand, the back end of this flow is pretty complicated.Since we are building this site as an agency but not a system provider, so we rely on outside/existing commerce platform and payment provider in the market to finish the back end transactions. One of the difficulty working with these vendors is that their error messages are not necessary user friendly. And they are not able to provide us a clear cut of what message will display under certain condition. So one of our jobs is to identify and categorize all of their current error codes and messages and then create a XML file to maps to user friendly message. However, we ended up with including the error code from payment vendor on user interface because it could potentially help our fulfillment vendor to understand the error and troubleshoot for customers.

1. 1-Click Registration

Registration can never be any easier on Shopify. Just 1-Click, then you are done. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget dui ligula. 

2. Easy to set-up

It is very easy to manage your store on the webpage. Very intuitive setting, clear messages.Vivamus dapibus, dolor ut dictum sollicitudin, orci quam tempus nibh, sed elementum est nisl ut mauris. 

Site Traffic Overview

Note: above data is from quantcast.com

The demographic profile aligns well with our predictions: most of the visitors of the site are young college females. It surprises me more that most of these traffics are driven from mobile devices. With that in mind, an average page views per person of 2.18 is consider to be relatively high. I believe dedicated mobile user experience and comprehensive content posting are contributing to this success.

Seamless mobile experience

A responsive/adaptive website development is more or less an industry benchmark in these days, but not every site delivers seamless and dedicated experience to its mobile visitors. Below are some examples that I found are handled properly to tailor to user’s mobile experience.

Not being taken away from the site

It is very annoying to be linking to a new page in a new window in a mobile native browser; it is not as easy as desktop to go back to the previous page I view. Newsletter sign-up confirmation is often made as a new page after the sign-up form page. But makeup.com handles this issue by having a in-module confirmation state to eliminate this inconvenience. In addition, it is also considerate to link to the external PDPs for featured products on the home page on a mobile device. (However, I don’t think it is a good experience on desktop)

 Collapsed article preview on landing page

Most of the marketers are worried about users are reluctant to scroll to view page content below the “fold line”. It is not a big issue in mobile, however a super long page is not welcomed. It is good to collapse article preview and thumbnail on the mobile landing page so that user can just click the article she is interested in instead of scrolling to see excessive information.

#Shareable Content

The reason for setting up a blog is to leverage the power of word of mouth, therefore every piece of content on the blog site should be shareable as well as share worthy. Makeup.com is doing a fairly good job on composing short and eye-catching message in every article. Editors uses a lot of large pictures and short text to increase user’s willingness to read. On the meanwhile, they also use a lot of infographics, which is an element that most of the teenage girls are more intended to #Share. Smart.

Win-win banners

Moleskine is a life-style brand which focuses on delivering various kinds of notebooks to the world. Aside from consistently offering high quality products, Moleskine embraces a culture of creativity and passion that set this brand aside from other “paper binding” vendors. It hence earns a tribe of artistic fans that also share the ownership of and advocate the brand to their friends and families. As it is expanding, a need for a refined e-commerce site had become a concern to its management level. Its original site was merely a catalog library without any other user-friendly functionality. So MRY helped to launch a brand new, well established e-commerce site for it. There are several reasons that I personally like it as an e-commerce site.

Easy to navigate

In comparison to its previous site, the new site increases the ease of navigation for users. A global navigation bar on the top of the page with a clear cut of categories facilitates users to allocate their desired products more quickly and accurately. On product landing pages, well-defined filters provide the abilities for users to glance and pick the right products for them. With large imageries of product shoots and sophisticated product selector tool on each product detail page, the new site enhances users’ online experience as well as brings a delightful off-line-like involvement to them.

Moleskine Product Landing Page

  Inspiring and engaging content

Not only the product shoots are nice and clear, all other supplementary content images are also very inviting. Along with novel copy languages throughout the site, the new e-commerce site is cohesive with its brand vision of embracing the creative mind of its customers. In order to align with the latest industry benchmark, the site is able to accommodate frequent content updates to better deliver message for difference occasions and marketing campaign. On the meanwhile, various discount messages are placing on multiple places in the site. Users are able to view different discount notice for different categories. Instead of being salesy, it works more like a warm reminder that stands with consumer’s benefit and interests. 

Moleskine home page

  Responsive, responsive, responsive

In an era of emerging mobile marketing, a responsive design is a must for websites in nowadays, so does the Moleskine site. Not only content pages are having seamless designs across difference devices, checkout process is also very adaptive. In detail, whiling keeping the consistent look and feel of the site, the mobile checkout page incorporates best user experience practice to best fit user’s mobile browsing abilities. For example, “move to wish list”, “remove item” and “checkout” buttons have enlarged size on mobile check out page to aid users to tap the correct button on their devices.

Moleskine checkout desktop page

Moleskine checkout mobile page

Ending note