Delight Your SaaS Customers with a Mobile-First Product

November 19, 2015 Comments


Impact Index

Initial Effort LowHigh
Ongoing Effort LowHigh

If you haven’t started building your product mobile-first from the beginning there is going to be a larger initial investment, so this is rated Medium-High to High on Initial Effort.

Once implemented, you will only have to continue thinking of building your product in a mobile-first approach, so this is rated Low to Medium on Ongoing Effort.


Let’s dive into a topic not unfamiliar to many of you internet gurus these days, mobile-first design. The idea of mobile-first is pretty simple, but the result of implementing this in your product has larger reaching implications beyond you site just “working on all devices”. I’m not here to spit out a bunch of statistics about why mobile is the next big thing, you can find those elsewhere.

So What is Mobile-First Design?

Historically, most web applications prioritize the “Desktop” user experience, and leave the mobile user experience as a secondary feature to complete later. In recent years though, the industry trend has been to flip the design approach to mobile-first and work up to desktop versions.

progressive-enhancement

To take that one step further, it’s just as important to design for any screen size between a small phone to desktop. Screen sizes changes all the time and your product should be ready to adapt.

 

Your product needs to goes where your customers go

Ease of use is a key factor for new product adoption these days. When evaluating new products and tools you can bet the average SaaS customer will be looking to see if your product works on mobile.

We’ll use Trello as an example. Here you can see their dashboard used to manage projects and organize anything. It would be safe to assume a majority of usage comes from desktop users.

Trello Dashboard

However people on the go also need to stay organized and access their content so having a simple experience translate from desktop to mobile makes everything work together and keeps customers happy.

Trello Dashboard Mobile
Surprisingly a lot of the functionality is left in but the UI is simplified for mobile.

I can’t tell you how many times I forgot to do something in an application on my desktop and visited the site on my phone to find that they only made it “just work” on mobile.. but have a sub-par, clunky experience.

Product Fail Yeti says:

Don’t make the effort to build your website for other devices. Rotary phone sales are sure to pick back up.

Can you believe that guy? Don't listen to the Yeti. #FightTheYeti

Mobile-First design makes a product stronger

Product Success is about what happens on the periphery of your product to make the overall experience for your customers better. There are a few key benefits to mobile-first design that may not be outright obvious to product creators.

1. Establish product credibility

First impressions matter more on the web than anywhere else. If your product doesn’t present a professional look on mobile, your customers will assume your product isn’t up to snuff. If you’ve made effort to make your website responsive and delivers the right experience at any screen size your customers will notice.

mathusha on Twitter

Pet peeve when news websites are not mobile friendly, taking forever to load and have terrible UI/UX. So many great devs, hire one!

stephen strydom on Twitter

Hard to believe your website is not mobile friendly… https://twitter.com/wpbeginner/status/663181703754723328 …

 

2. Promotes solving problems for a streamlined experience

When designing mobile-first you are forced to focus on core content and functionality. With limited space you better deliver the functionality your customers need up-front and easily accessible. When done right this translates to making your desktop service just as usable if not more.

Take MailChimp as another example. When you view MailChimp on a mobile device, you are presented with the information you need and not much more.

MailChimp List Mobile

When we bump up in size to desktop we add in more features like ordering, mutli-select options, filtering and other features that are “nice-to-have” but essential for mobile users.

mailchimp list

 

3. Forces you to think about the job to be done

When you think about how your customers will use your product and in what context you focus on what is important to them. You will discover what is really useful and what features might be left unused, clunky, and not fail to add tangible value.

Taking a simplified approach to your product and content from the start helps keep your product lean and flexible. Have you heard the phrase “If I had more time, I would have written a shorter letter?” For mobile let’s translate that to “If I had more time, I would show the user less“.

Toolkit

Building your site mobile-first is more about the process than the tools, but here are some things to get you started.

Getting your feet wet with a grid systems

Implementing a grid system is a relatively easy first step towards being mobile-friendly if you already have an established website and style set up.

I’ve personally used grid systems like 960.gs and Less Framework 4 to help move clients into a more standard, structured site. Check out the latest grid systems here and make your choice wisely.

Starting from scratch with a framework

If you are starting your website from scratch it’s probably in your best interest to start with a framework that has the bells and whistles for mobile ready for you. Just remember these are meant as a starting point, any good product will change to fit its customers needs.

Probably the most widely used Frameworks are Twitter Bootstrap, HTML5 Boilerplate and Foundation. Check out other frameworks here.

 

Closing thoughts on thinking mobile-first

Mobile-first design thinking is bigger than frameworks and layouts, because as I mentioned above it’s not just about the implementation. I challenge you to think not just mobile-first, but how you can exceed customer expectations on any screen size using the right interactions.

Share your experience with mobile development below. How has it helped you improve your customer experience? Did you see improved conversion or less churn after switching to a mobile-first approach?

 

Wrong form ID

Get Started with Ramen for FREE

Nothing to see here. Just a yeti.

© Ramen Inc. 2017