I should be upfront with you before diving into this topic: scaling back is not my strong suit. For me, giving 100% has usually looked like burning the candle at both ends. I thought that the more time given to a UX design project, the better. In reality, there is a law of diminishing returns with that, as with anything. Once you hit a threshold with your input of time and energy, the output in terms of quantity and quality can not only slow, it can backslide.

Then I saw this by Instagram’s @lizandmollie:

And a lightbulb moment was born.

There’s a wealth of websites and information out there with “tips and tricks” to increase conversion. Use this list of informed, UX research-backed sites to create frictionless e-commerce designs and workflows.

Baymard Institute

No one does details better than Baymard. These guys eat, drink and sleep UX e-commerce research. Only 5% insights from the more than 50,000 research hours are available for free on their website, but you’ll still glean plenty of actionable design recommendations at a granular level that no one else touches.

Screenshot of Baymard Institute homepage
Screenshot of Baymard Institute homepage
Baymard Institute Homepage

Nielsen Norman Group

Including Nielsen Norman Group in a an article about UX research best practices is a given, but humor…

What’s makes landing pages pack such a punch?

Let’s say you’re an e-commerce operation with many product lines — say, a candy company that not only sells the usual best sellers of chocolates and lollipops, but growing event and corporate lines of goods as well.

In this case, you see a growing clientele that responds to your newer product lines, which differs from your traditional customer base. Whereas children may be your top consumers of traditional sugary confections, the branded specialty gifts speak to wedding planners. …

A brief rundown of 3 best practices to incorporate in your shopping cart designs.

#1: Quantities

In the simplified shopping cart example below, you may notice nothing out of the ordinary. Three items in the shopping cart in anticipation of Halloween. Each item’s quantity is identified in numeric value, (1), with stepper buttons users can click to increase or decrease the value.

For some reason, a longstanding design pattern within the cart has been an Update link near the quantity text field. However, I opted to not include it in this example. …

Example of a credit card form on an e-commerce website.
Example of a credit card form on an e-commerce website.
Example design of a credit card form, incorporating best practices recommended by Baymard Institute.

Credit card forms in the checkout process are paramount to the user’s shopping experience. Without them, an e-commerce shop can’t make revenue, and customers can’t purchase items. So it’s important to eliminate friction and end user confusion.

A few key recommendations

Field Sequence

Look at any credit card’s front, and you’ll see they all follow the same pattern from top to bottom: Card Number, Expiration Date, Name of Cardholder, Security Code.

(Depending on the card, the security code may also be on the front or on the back, but per the principle of proximity, it’s oft noted as the fourth and final step.)


Follow along as I use the DailyUI challenge to highlight the best UX guidelines for your e-commerce site.

For those unaware, a popular and free resource to punch up one’s visual design skills is the well known DailyUI Challenge. True to its name, the premise is simple: receive a daily prompt for a mobile or web component, design it from scratch in t-minus 24 hours, and post.

Now before we go any further, it’s worth taking a moment to call out the elephant in the room about this and other design challenges. These are hypothetical prompts, not solutions to real world problems that show impact, so the weight it would carry in a portfolio is perhaps that of…

Shannon Langan

Shannon is a freelancer who loves all things UX research, e-commerce and psychology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store