Tips on Building a Mobile Web

2010 is the year of the mobile web.  There seems to be record number of internet retailers converting their website to their mobile/smartphone audience.  Yours truly is engaged in the middle of a mobile web project which will hopefully be revealed soon enough.  Along the way, here are some of the tips I used and examples I've collected amongst some of industry's best practice.  I'm here to share three design tips to help you engage in a better mobile experience for your customers/audience:

1. Keep it simple and make it "Finger Friendly".
Best Example: Hotels.com
Hotels.com's mobile website is probably the best of breed based on my research.  Their user interface is clean and easy to use.  Menus are bold and easy to engage with fingers for touchscreens.  It seems like the project manager for their mobile web really understood their mobile clientele and offered all of their most relevant and important links right up front.  A customer can easily get to "View Reservation" or choose between different "Customer Care" numbers that engages the phone function with ease.  Another tip on "Finger Friendliness", its ususally the text-based hyperlinks where mobile webs run into trouble... don't be afraid to bump up the font size for a much better interaction.

2. Collapsable Menus and Sub-Menus are Mobile Screen's Best Friend.
Best Example: Wikipedia
There is no better way to manage the relationship between giving your audience a good overview while offering the flexibility of viewing details of each section or sub-sections.  For retailers with product descriptions and reviews or media sites with news headlines and stories, Javascript Collapsible menus are the best way to go.  The website that demonstrates this best is WIKIPEDIA.  With so much content, Wikipedia uses this technique to hide & show the information with various sections.  By default, all the sections are collapsed so the viewer can browse its categories and each section can be expanded individually.  Alternatively, some mobile web chooses to take the user to a different page entirely, while its an option, I personally find the collapsible menus more engaging on mobile.  Another tip around menu design is to give as much preview to your audience prior to an engagement (ie. if you are selling something within a category, provide a product count or if you are taking viewers to see customer reviews, provide a review count or ratings average); bottom line is to empower a user's mobile experience by saving them time and guess work.

3. Make sure all of your eCommerce Pages are Mobilized (cover all of your bases)
Many retailers assume that a consumer's mobile experience begins with a visit to their homepage from a mobile browser.  As a basic step, they've setup a simple user-agent detection and redirects a that user to a mobile homepage to begin the mobile experience.  They often forget that a consumer may enter their site using a mobile phone mid-way (ie. Received a marketing email or saw a blog post from their handset).  For me, this is something I'm always conscious of because other hats I wear at work involves other marketing initiatives and I always want to tie everything together harmoniously.  While I was drafting this blog post, I ran three examples and here are the findings; feel free to try this your self on a smartphone:

Product Detail Page:
* UrbanOutfitter (SKU #18151712) - Successfully Rendered this page in Mobile
* BestBuy (SKU #9558089) - Successfully Rendered this page in Mobile
* Sephora (SKU #1283712) - Successfully Rendered this page in Mobile
 Category Page:
* UrbanOutfitter (Men's Top) - Successfully Rendered this page in Mobile
* BestBuy (iPod & MP3) - Successfully Rendered this page in Mobile
* Sephora (Skin Care) - Successfully Rendered this page in Mobile

Bonus Tip:  Keep the Search Box available on each page, preferably on the top of each page.  Mobile users will grow frustrated if search is not readily available on everypage.  Site search is probably your most powerful eCommerce tool, it will prove to be even more powerful on mCommerce.  While you are at it, make sure the mobile search results page (SERP) is optimize for mobile!

Building a mobile website has been fun thus far; being as passionate about mobile experience makes me think about every ecommerce website component in a different light on mobile devices (ie. site search, menus, images, videos, product display, recommendation engines, store locator, etc...).  When in doubt, keep things simple and go to as many websites as you can to gather ideas and best practices.  If you run into a hard time with keeping things simple, rely on your web metrics to tell you what is important to keep for mobile.

Mobile Marketing in Practice

I work for a fairly large sized e-tailer within their corporate marketing group; our company oversees more than a dozen of familiar brands (catalog, online and brick & mortar). My job is to drive the best practices of online marketing and it has given me ample privileges to test out various emerging media(s). For one of the brands, I signed up with an external vendor to deliver a turnkey mobile commerce solution. This particular vendor offers an emulated checkout process which removed all the headaches of having to ask our IT team to lift a finger.

The program was quickly established approximately six months ago; for a large part, the brand I've setup has made a minimal effort to market and drive this program; all efforts have been driven by the mobile vendor to reach their SMS database. I've decided to give this program a serious go before the year is over.

I lined up our brand marketing team to discuss my plan of attack:

1. Set a side really good offers; ie. 50% off of a name brand item, like New Balance shoes or Levi's denims. I believe that our basic offers currently running on email, paid search, affiliate marketing & online advertising is doing a pretty good job, in those said channels. But in order to "hook" someone to use mobile as a new channel, this offer has to be really sweet and promote a sense of exciting and urgency via alerts! The merchants from our company will no doubt give some push back when I asked for an aggressive offer; but I re-assured them this is a one time test and I am not anticipating a high volume turn-out. We are just gathering some tests results here.

2. Setup an all around emarketing blitz to encourage our customers to sign up for SMS communication for the exclusive "hooks" or offers. This includes emails, paid search, landing page, or even a line or two on print initiatives, etc. SMS communication is a very personal thing; its the last line of communication that has yet to be flooded by SPAM. So we want to really demonstrate that only the wildest and worthy offers are being passed through this exclusive channel.

3. Work out a synchornized supporting marketing plan with our mobile vendor; after we've communicated with our customers; they will blast out a few consecutive SMS alerts to our customers + their optd-in DB. Each alert will be announcing an amazing deal to drive either mobile commerce conversion or atleast get the customers to take SMS alert coupon codes to complete an order online. Eitherway, I'll known by looking at this exclusive coupon redemption rate to see if this mobile channel have potential.

4. The mobile vendor, as a bonus will also list our brand as a "featured" mobile vendor during this testing period; once again drive more mobile commerce awareness to their reach.

This marketing plan is intended as a test to see if our customers are ready to make the switch to mobile communication and commerce. With a legitimate and aggressive offer; I plan to get a test result once and for all. If anything, I'll be able to walk away knowing if our customers are ready to make the mobile switch. Will provide some updates in the future, stay tuned!