David Klein
Moovweb client logos

Moovweb

years
2013 — 2014
position
Lead UI Designer
projects
Mobile websites
manage
2 designers

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

Background
Moovweb offers a platform that allows customers to quickly leverage web content and functionality from their websites into new products such as mobile or tablet-specific websites, native apps, and even extensive A/B tests. As Lead User Experience Designer my role was to ensure each of our clients’ projects was consistent with the desktop website's branding and functionality, but catered to a mobile audience. This role allowed me to gain expertise in communicating with clients and project management.

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.


Goals
I have two key goals when designing a new product:

  1. Branding — A user should be able to place her phone next to her computer, visit the same URL on both devices, and be confident that one company designed and built both. There must be a balance between a truly unique product, and maintaining a consistent look and feel.
  2. Functionality — Many websites have complex functionality. I simplify it. There should of course be feature parity, but users should not be punished with frustrating for visiting a site on a phone.

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.


Home
A successful mobile homepage sets the mood for the entire site. A user should feel comfortable. However, automatically sliding carousels, tiny text, and too many visually striking buttons can overwhelm.

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 Balacne home

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

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 category

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.


Product Details

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 product details

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.


Cart

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 cart

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

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 checkout

Petco mobile checkout · 2013

Below is a comprehensive list of easy wins to increase conversion:

  1. The email address input should use the email address keyboard.
  2. If the client is US-based, the zip code input should use the numeric keypad.
  3. The credit card number input should use the numeric keypad.
  4. Assume the billing and shipping address are the same, and force the user to enter a separate address. Showing both shipping and billing address forms is daunting.
  5. The credit card expiration date inputs should use the numeric keypad. Typing in "08" and "2016" is much easier than using iOS 7's unfortunately intricate native wheel control.
  6. Hide functionality that is not crucial to the checkout process. Do you really need a phone number? Really?!
  7. Use subtle default text for inputs to guide the user, but do not place labels inside of inputs. Yes, this strategy helps conserve space, but it is more difficult for a user to track which part of the form she is on.
  8. Absolutely do not force the user to enter an email address before beginning the checkout process. This is a guaranteed way to decrease conversions. Give the user the opportunity to either sign in, or checkout as guest. Entering an email address is expected along with name and address, but not to initiate the entire process.
  9. Highlight which input is currently selected using a border color.
  10. If an error occurs after attempting to submit the form, scroll to the error and instruct the user how to fix it.