Standardize Look and Feel - Spiralyze

Standardize Look and Feel

Usability Medium Priority 85% Adoption 5 Seconds Saved

Checkouts should match the look and feel in the rest of the website – it builds trust with users and reminds them of the product that brought them to the checkout.
Conversion Opportunity 0.5%

Imagine going through the process of finding a store, picking a product, and making it to the checkout… only for the checkout to look like a completely different website. You would have second thoughts, right? “Is this is a pop-up or some scam?” you might ask.

Reaching a checkout that doesn’t resemble the rest of the website is jarring, and that shock takes customers out of the auto-pilot mode that would otherwise carry them to the end of the purchase. If a checkout feels different - different colors, a different font, different backgrounds, etc - it won't feel like the same website. You lose some of the customer's trust, too, since it might create the impression that the checkout process was just an afterthought.

Changing colors and other design elements can make the checkout feel unfamiliar.

Usage

You want to reduce distractions, but it’s helpful to keep a small company logo in the header throughout the checkout. It helps maintain the necessary consistency.

The main thing to look at is the design elements of the checkout. Maintaining the same color scheme, fonts, etc. is the easiest and most effective way to make sure the checkout matches the look and feel of the main website. If a checkout feels different - different colors, a different font, different backgrounds, etc - it won't feel like the same website.

Nike's checkout follows the same visual theme as the rest of their website.

Adoption

0
20%
40%
60%
80%
100%

Standardize Look and Feel has an 85% adoption rate among our benchmark group.

Best Practices

Keep Logo

Keeping a small logo in the header of the checkout helps maintain the consistency and connection to the rest of the site.

Colors and Fonts

Maintaining the same color scheme, fonts, etc. is the easiest and most effective way to make sure the checkout matches the look and feel of the main website.

Examples

Good

Target Example

Target uses the same clean design as their main site.

Bad

Gap Example

Gap is ugly and barely resembled their main site.