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:
- 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: