[alert style=”success”] Download the M-Commerce Site PSDs (3963) [/alert]

Out of all the different types of things you can design in mobile I’ve always found shopping sites to be one of the most interesting.

Getting a user from the homepage of a site right through to checkout to spend their money is just damn right cool. Everything from the psychology of implying security by using a ‘padlock’ icon to rearranging a few form fields on the payment screen to increase conversion.

I’ve worked on a couple of M-Commerce sites now and I wanted to create something without the shackles of brand guildlines or a CMS. I had a bit of fun designing it and hopefully the source files (Photoshop PSDs) will come in useful for other designers out there.

I also tried to show a bit of the thought process for some of the bits you see in the designs below.

Here’s a few personal thoughts about M-Commerce (mobile web) design:

  • Don’t treat high-end phones the same as mid-range and low-end by serving exactly the same site without any attempt to utilise what actually makes them high-end. HTML5, CSS3 and Javascript capabilities can significant improve the user experience resulting in higher conversions.
  • Users don’t like clutter. If there’s lots of important information either decide a hierarchy or find clever ways to handle this in the UI like ‘tap to reveal boxes’.
  • Don’t recreate the same barriers you have online. If (for example) a part of your checkout process is causing drop-off then it will only been magnified on mobile. Rearrange and smarten up.

Of course all this is easier said then done with the ancient backend e-commerce platforms that many high street retailers have. Where open APIs are a luxury (and a huge investment) it’s no wonder the m-commerce war is being won by screenscraping (something that I’ll be covering in the future along the consequences for UX).

View the full size image here:

Some bits and bobs around the UI:

Here’s the PSDs, you’re free to use these for personal and commercial purposes. A link back to my site isn’t required but HUGELY appreciated 🙂 oh and if you make anything cool let me know!
[alert style=”success”] Download the M-Commerce Site PSDs (3963) [/alert]