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:
- What are the most important things for the customer to see?
- What are the most important things for the customer to do?
- What are the most important things for conversion?
Symphony identified four steps to launch SpiritHoods’ new mobile site:
- The most important thing on the page is the call to action, so each page leads with a call to action.
- Simplify navigation and eliminate links that can distract the shopper or worse, move them further away from the call to action.
- 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.
- 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.
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.