David is one of the most talented UI/UX designers with whom I've ever worked. He has a clean aesthetic, always meets all product requirements, is extremely detail-oriented (in that ideal way you want your designer to be), and has an innate product sensibility. If I ever need David to work on a project, I know it will be completed thoughtfully, beautifully, and on time. I've really enjoyed working with David on dozens of Developer Enablement & Product efforts at Moovweb.—currin berdine, marketing manager at coursera
Thanks to Moovweb, I designed and deployed over sixty projects in two years and shipped mobile websites that have hundreds of millions of hits a month. With each new project there always comes new ideas and new challenges. But that’s why I love it.
Mockups focus on the various templates used on the desktop site. This usually includes the header, footer, homepage, category, subcategory, product, cart, checkout, sign in, account, etc. Below are some examples.
Our research strongly indicates that carousels are useless on mobile. A user rarely interacts with the first image. The second, third, and fourth images are just wasted kilobytes downloaded. Simply re-exporting a desktop sized and designed asset to be a mobile banner is a huge mistake. Buttons and text become very small. New assets must be designed for mobile: a clear image, a short message, and a strong call to action.
The header should be imited to four or less buttons, and they should be items that are crucial to the business. Do not use such valuable space for functionality for which a user is not constantly seeking. Ecommerce sites are generally consistent: search, cart, store locator, and navigation.
New Balance mobile home · 2013
The screenshot above demonstrates these points. The header has four buttons: search, store locator, cart, and navigation. The free shipping text is simple unlike many promotions that force the user to memorize and later type in a code during the checkout process. The banner is an eye-catching image with a short message and a clear call to action. Notice there is no carousel. Below the banner are product categories so the user can begin browsing for products.
Many sites have search always available in the header which decreases the number of buttons to three, but also significantly increases the header's height. This is a design decision that is determined by how a site's users behave. An A/B test can prove which is the better strategy.
Category pages are usually long lists of products, and it can be quite difficult to find the exact product a user is seeking. Offering tools to find the ideal product is crucial for a successful Category page. This includes the ability to filter and sort.
Breadcrumbs provide both context and navigation. A user can see what the parent category is, and have the ability to return to that parent category. In the example below, we're currently on the GNC Whey Protein page, and the parent category is Protein.
GNC mobile category · 2013
Each product is separated by a subtle box, and the entire box is tappable for convenience. Each product box includes a photo, title, rating, price, and free shipping message. A good A/B test for this page would be to remove perhaps the rating and free shipping message, and decrease the amount of vertical space each product currently uses. If it is faster for a user to browse many products, there is a chance that conversions will slightly increase.
A product page usually has a plethora of information. Long reviews, products you might also like, instructions, warranty, etc. When designing for mobile it's important to organize the content in a way that emphasizes the key information like name, price, photos, and purchase. A carousel of photos is ideal here; users want to see different views of a product. Zooming in to see a larger photo is also a heavily used feature. A user can tap the zoom icon, and then swipe to different parts of the image.
The additional information listed above can be folded into accordions that can be opened with a tap. If all of the content is supposed by default, a common tactic in responsive web design, the user is forced to navigate an excessively long page. Finding the add to cart button can become frustrating.
Sanrio mobile product details · 2013
Some sites are now using sticky footers to guarantee the user always sees an Add to Cart button. This design has its faults too. First, what if the product requires the user to select a size or color? Now after tapping the sticky footer button, an error is thrown or the page automatically scrolls to the necessary functionality. This can be confusing. Second, iOS 7 reserves the bottom portion of the screen as an invisible button to reveal Safari's controls. A user taps Add to Cart, the controls are revealed, the Add to Cart button jumps up, and the user is confused.
The cart page is where many users arrive after selecting an item from a product page. A user expects to see details about the cart's contents, the ability to remove items, and a clear way to begin the checkout process. A good way to simplify the arduous process of checking out is to offer alternative payment methods like Google Wallet, V.me, PayPal, or Masterpass. These services have a user's billing address, shipping address, and credit card information stored. Instead of filling out long forms, a user can quickly sign in to one of these services, and inject the necessary information into the shopping site.
Under Armour mobile cart · 2013
Under Armour has both Checkout and PayPal buttons at the top and bottom of the page. A user who is confident in her purchasing decision and does not wish to review the cart instantly sees a way to continue the checkout process. A user who wants to double check the details can swipe through the items, and then see a second set of checkout buttons afterwards.
Checkout pages are an A/B testing enthusiast's dream. There are so many ways to optimize and simplify forms. On mobile we often see text inputs and dropdowns that are thin and difficult to tap. Occasionally they are not wide enough, so seeing and editing an address is extremely frustrating.
Petco mobile checkout · 2013
Below is a comprehensive list of easy wins to increase conversion: