[alert style="success"] Download the M-Commerce Site PSDs (3402) [/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 (3402) [/alert]
  • Pingback: Mobile Commerce Site PSD | WebPsdTutorial.com

  • http://likedigital.wordpress.com Satnam Rattu

    Nice designs, with mobile sites its important about usability and simplicity which seems like you covered well. An interesting thing i was thinking about was product positioning and how would this effect the shopping experience.

    Would popular products be displaced first? or products based on user search or shopping history. I remember reading a review on a clothing shop where the cart remembers the profile of the shopper height waste size etc. so it brings up relevant suggestions that might interest the user.

    But i can see a popular trend where sites are more focused on usability functions and more optimized for tablet based and touch based browsing

    • Murat

      Hi Satnam,

      It really depends on how the user enters the results page – have they come in through a search term? Or just browsing the category? Each scenario would determine a different order of results (relevance, popularity, etc)

  • Jonathan Anderson

    Hi Murat,

    Great article. hit the nail on the head as usual….

    Looking forward to the scraping article, especially with regards to strategy for retailers who want a mobile web presence like yesterday…

    Hope you well,

  • http://flamedidea.byethost31.com Rafael John

    wow, as a newbie and self taught mobile designer this really helps, I am glad I’ve read this, followed you on twitter ^^