Four Steps to a Flawless Mobile Commerce Redesign

Four Steps to a Flawless Mobile Commerce Redesign

Symphony client SpiritHoods was recently featured in Mobile Commerce Daily with the provocative headline: “SpiritHoods’ Mobile Revenue Surge May Quiet Responsive Design Critics.” The business case for mobile optimized commerce is clear: SpiritHoods mobile revenue increased 1,000% in the first four months after launching a responsive site, and now half of SpiritHoods’ site traffic is coming from mobile traffic.

But making extensive changes to a commerce site may disrupt existing business. To mitigate risks, brands need a strategic framework to successfully redesign a brand for mobile commerce. This is the design process that Symphony developed relaunching hundreds of mobile optimized commerce sites like SpiritHoods.

Symphony’s design team has a philosophy of “mobile first” design, which means that the site is built on the smallest screen first, and then expanded to tablet and desktop store fronts. Using responsive design, the site is built once, and adapts to all screens.

By starting on the smallest screen, the design team and the brand stakeholders are forced to work in a highly constrained environment. Fewer elements can fit on the smaller page, so the brand must prioritize the most important elements. The design team starts by asking three fundamental questions to determine what “makes the cut” on the tiny screen:

  1. What are the most important things for the customer to see?
  2. What are the most important things for the customer to do?
  3. What are the most important things for conversion?

Symphony identified four steps to launch SpiritHoods’ new mobile site:

  1. The most important thing on the page is the call to action, so each page leads with a call to action.
  2. Simplify navigation and eliminate links that can distract the shopper or worse, move them further away from the call to action.
  3. With stripped down pages, there is a danger that the mobile pages will look the same as everyone else’s pages. The brand’s distinct personality must shine on every page.
  4. To optimize for conversions, checkout has to be frictionless. Reduce barriers so the shopper can complete the order as quickly and easily as possible on a small screen and phone keyboards

Here is how the four steps were manifested in SpiritHoods’ mobile redesign.

mobile commerce redesign

1. Make the Call to Action Prominent on Every Page.

There are two main calls to action on the site: Add to Cart and Checkout.

Add to Cart is prominently displayed on each product page immediately below the product photo, and before the long form sales copy and customer reviews.

Once a customer adds the product to the cart, the “sticky” shopping cart drops down and stays open until the customer takes an action – either by tapping away or selecting the large, brightly colored Checkout button. Customers can easily check out without tabbing to another screen.

2. Simplify Navigation

The key to effective navigation is to reduce the shopping experience to just what the shopper needs to see, while making it intuitive and accessible for shoppers to find more information when they want it. For SpiritHoods, the home page navigation only includes shopping links for Women, Men, Kids, Teens, and Accessories.

To reduce the real estate in the footer, the team moved links to the collapsed navigation menu. This reduced the number of links that customers see on the mobile version: Home, Terms, Help, and Shipping. This does not mean that the other pages are omitted; rather, additional links are available in the navigation menu without cluttering the mobile page.

3. Make the Brand Unique

SpiritHoods wanted a design to reflect their edgy urban aesthetic. The product is interesting and highly visual, which translates to extremely shareable content. The product pages lay out each element in order of importance to SpiritHoods: large, vibrant product photos, product name, Add to Cart button, long form sales copy, social sharing icons, and tons of product reviews that scroll effortlessly on mobile devices.

4. Easy Mobile Checkout

Frictionless checkout was achieved by designing a scrolling checkout instead of multiple page checkout. Customers are comfortable scrolling on phones, so it makes sense to scroll down the page, rather than force the customer to click or tab to additional pages to get to the next step in the checkout.

Since the site launched in 2012, SpiritHoods has been redesigned for a smoother shopping experience with improvements to online checkout. SpiritHoods’ checkout now features enhancements including fewer fields, progressive field reveals, address auto-populate functionality. Auto populating addresses is a godsend for mobile shoppers because it reduces the keystrokes customers need to type to get the full address. This in turn reduces billing and shipping errors due to typos.


As mobile phones evolve and customers become more sophisticated, mobile design evolves to meet customer expectations. By focusing on four steps: strong call to action, streamlined navigation, strong brand, and optimized checkout, brands now have a strategic framework to launch mobile commerce design for success.

5 Reasons Brands Need Responsive Design

5 Reasons Brands Need Responsive Design

Ecommerce retailers are faced with an important design choice when building or updating an online store.

Brands can build multiple sites and try to anticipate each unique device that consumers may use, or they can build the site once with responsive design so that it renders beautifully no matter what device it’s displayed on. If you believe that mobile is the future and that the number of devices and sizes will continue to multiply (as we do), then the cost savings and other advantages of responsive design are clear.

Tipping Point

The tipping point happened in June 2013: 55% of all time spent with online retail occurred on a mobile device. Specifically, smartphones accounted for 44% of retail Internet minutes while tablets accounted for 11%.

Fastest Growing Segment

Mobile sales comprised 16.6% of all online sales for the quarter ending on Dec. 31, 2013, up 46% from the same period of 2012. The boost underscores consumers’ increased comfort with making purchases by smartphone or tablet.

Huge Market Potential

US consumers will spend $52.17 billion in 2014 on retail purchases made via smartphones and tablets, expecting to grow to $86.86 billion by 2016.

Tablet Sales

Tablet sales are expected to exceed 100 million in 2013.

Global Opportunity

In 2014, there will be more than 2 billion smartphones globally. By 2017, 5 billion people are predicted to be using mobile phones and each year, the growth of smartphones continues to climb by figures north of 30%.

The explosion in mobile sales and proliferation of new handheld devices of all sizes means that screens are simultaneously getting smaller and larger.

What that means for ecommerce brands is that sites must be user-friendly no matter what device your customer is using to shop at your online store.