The Best Mobile-First Design Options To Drive Your Brand

By Anshey Bhatia • February 13, 2018

Astonishingly, there are many e-commerce professionals who still prefer to view website designs and concepts in a desktop first format.  It’s bigger and easier to interpret, and makes us all feel good that we’ve designed an experience that looks great.  Sadly, this is the exact opposite approach to designing an e-commerce experience as we need to take in today’s world.

Mobile-first design is hands down the only way to begin your design process. 93% of all internet users now go online via mobile devices every single day, and well over 50% of website visitors are coming from mobile devices.  This process also allows for constraints; first, identifying what’s absolutely essential, and then allowing for the design to scale up to tablet and desktop.

 

So how can brands do mobile-first well?  Here we outline several creative ways it can be implemented at a high level, leading to a higher conversion rate and Average Order Value (AOV).

The “Do’s” of Mobile-First

Our friends at Shopify saw mobile account for 64% of all sales during Black Friday and Cyber Monday, with an increase of 10% year-on-year.

mobile vs desktop sales shopify black friday cyber monday

We believe that these numbers point to a significant increase in mobile sales by 2020, and beyond. Here are some “do’s” of mobile-first to consider.

1. Do your research on mobile-first with existing e-commerce giants.

Mobile-first has already been done right by leading e-commerce brands. Research Inflow’s Best In Class Ecommerce Mobile Report, pick the brands most relevant to yours, retrofit and make it work for you. Inflow analyzes the top 20 e-commerce brands, (over 100 hours of research) to tabulate the best-in-class features used by retailers. Some of the brands on this list are e-commerce giants like Adidas, Nike, Nordstrom, Patagonia, Urban Outfitters, and Zappos.

2. Speed things up.

Most people today are Googling from their smartphone. Make it fast!  Google is now including load time while creating their mobile-first index. According to TechCrunch, Google’s algorithms are working on using the mobile version of a website’s content to understand structured data, rank pages, and show snippets from the site in search results.  So make sure to get mobile right.

Expect to see in July 2018 page speed as a ranking factor for mobile searches, and have the mobile version of your site line up accordingly

3. Adopt a mobile experience that’s in line with your webpage.

Branding needs to be consistent across the board, but consider the importance of having a mobile experience and having a desktop experience. With mobile design, you have a limited amount of space to convey your message in comparison to a website. Your website doesn’t have to be the same exact experience on mobile, and shouldn’t be. Learn to adapt your mobile experience to be one that stands on its own.

4. Be mindful that multiple touch points convert, not just mobile-only or store-only. 

Be mindful of your customer’s experience from beginning to end. As communication becomes more diverse, know that mobile alone, your store alone, or word-of-mouth alone only paints a small piece of your brands’ big picture. It takes a village, especially when it comes to maintaining a successful business.

Embrace the growth of your brand by putting love into every touch point. For the customer, it will be about the overall experience; from walking into the store, thinking about an item while at home, checking it out online at work, and maybe a week later making the decision to purchase via mobile.

Every single touch point is important for measuring the success of your business. Be mindful of the customer journey as a whole, not just the endpoint, and how mobile plays into that.

5. Have all social media on point.

Instagram is the top social channel for aspirational brands, and as Yotpo has pointed out, is mobile-first. SproutSocial estimates that 71% of US businesses use Instagram. Instagram allows engagement and exploration of your brand in an environment that’s familiar to your existing and potential customers’. Your customers’ are spending a whole lot of time being social. Be sure to capitalize on the moment by having your presence current and in brand.

A Glossier Instagram post experience on an iPhone X, which links directly to purchase products.

Consider Facebook, Twitter, and Pinterest as social platforms that enhance your brand experience as well. Do all, or some, but definitely have a plan.

6. Consider analytics.

Your existing analytics are your best friend in deciding where to focus your energy when it comes to mobile-first. Shopify asks 4 questions:

  1. What is your mobile-user bounce rate?
  2. What keywords are mobile users searching for?
  3. Can they find them on your site?
  4. Are users dropping off during the mobile checkout process?

Take all 4 questions into consideration when creating a mobile-first experience.

7. Favor portrait-view.

The point is to simplify the customer journey, not complicate it. There are a few sites out there that require the user to flip their phone to the side in order to experience their site via mobile. Users tend to scroll through their phone using portrait-view – meaning the longest side of the phone aligns from top-to-bottom. Maintain this view in mobile-first as much as possible, and you’ll retain your customers for an extra step.

Mobile-First Design. Pick What Resonates With Your Brand’s Story and Presence

Now that you’ve reviewed the do’s of mobile-first, it’s time to explore the many options in tech to choose from. Here are some top components to consider while creating your brand’s mobile-first experience.

Linear user flow.

UX Planet illustrates beautifully user journey simplification with linear user flow. A linear design experience allows a user to finish an action with each step, from a specific beginning, middle, and end.

Designer Alex Khoroshok created an excellent linear user flow e-commerce experience with the above swipe of the Nike Air Max 1.

Accordions.

Not for playing music, accordions are a convenient solution for the limited space on mobile devices. They give designers the flexibility to utilize collapsible sections. You create containers that organize content. Accordions give your customers ease of navigation without a long column of endless information and options. Accordions make way for a friendly mobile-first journey, making navigating quite delightful.

adidas.com mobile accordion menu on an iPhone X.

In-app gestures.

Consider the devices that your users will be using to experiencing your website, all of them. For example, there’s no home button on an iPhone X, which leads to discoverability and learnability challenges. In-app gestures give brands the upper-hand by allowing them to find solutions to communicate with their customers.

Chatbots.

Source: Isil Uzum

Chatbots are changing the landscape for e-commerce, and can host the full buying process on your customers phone. Additionally, chatbots come to the rescue during abandoned carts. Utilize this tool for an optimized mobile-first experience.

Biometrics.

Facial recognition and touch ID are already common-ground. These steps of identifying the uniqueness of a user will become a necessary step in the customer journey.

AR.

The ARKit by Apple is one of the tools making AR more accessible to retailers. Most smartphones will have the capability to host AR options. LexSet.ai is making waves in AR for interior design. Their platform is a B2B AR tool for furniture and home supply retailers. LexSet’s AR B2B tool utilizes machine learning and artificial intelligence to analyze your home, the current design and space, and provides product recommendations that are in line with the current style of your space.

Conclusion to Conversion

Conversion happens with simplification. Less is more. Uncomplicated smart design helps create a seamless customer journey and demands focus.

When you design the mobile experience, you’ll face several challenges along the way. A mobile-first approach demands an incredible amount of focus and attention on the experience of the user. Why? Because the user is in their own home, out with friends, in line buying food, playing with their kids – in their own element. Retailers need to retain that customer and utilize the focus needed to relate to their audience.

Gone are overcomplicated features. Mobile-first allows retailers to be very straight-forward and direct.  

The future of mobile will see voice activation become a major player, but we’re not fully there yet. Until voice activation evolves, mobile-first design will continue to be the most vital and important way to interact. 

 

Anshey Bhatia

Founder of Verbal+Visual. E-commerce nerd. People connector. Travel junkie. Tech lover.

Like what you’re reading? Sign up for the Verbal+Visual newsletter and receive monthly roundups.

Commerce that matters.

Work with us.