SaaS Design: A Mobile-First Approach

The software-as-a-service (SaaS) model has become increasingly popular in the last couple of years and not without reason.

Many companies, including some of the best web design companies, love the SaaS model because they don't have to spend time installing an app when it's already configured and ready to be used.

The cost is also lower since SaaS typically resides in a shared environment, where the hardware and software license costs are lower.

If you, however, want to be competitive, you need to keep up with the newest trends and a mobile-first approach is one of them.

What's a mobile-first approach?

A mobile-first approach, in general, refers to the concept in which the designers first build a mobile version of a website or software, instead of starting with the desktop version. It includes both apps and mobile-responsive sites, but we will focus on apps in this article since having a mobile-responsive website is pretty much standard practice nowadays.

Using the mobile-first approach, designers will first build the test version for their mobile devices, which includes basic features and functions. After that, they will move on to creating a version for tablets and computers.

Why should I go with it?

According to Bank by cell, 83,89% of the world owns a smartphone. The number is growing exponentially every year, which only adds up to the importance of proper design for mobile phones.

This was first recognized in 2010 by Eric Schmidt, then-CEO of Google. And here is what he announced at a conference: "What's really important right now is to get the mobile architecture right. Mobile will ultimately be the way you provision most of your services. The way I like to put it is, the answer should always be mobile-first. You should always put your best team and your best app on your mobile app."

There is an obvious reason as to why you should choose this approach instead of starting with a PC version: the real estate on the smaller screen is limited.

If you start with the PC version, you'll most likely end up with way too many details on a smartphone, which will only confuse the user and make the app user-unfriendly.

It's way easier to add advanced features to the PC version than to remove them since basic and supplementary elements merge and become harder to distinguish and separate.

Also, since you'll be limited by a small screen in the design process, you'll be forced to pay more attention to the content you create.

Should I launch a mobile app?

If you look into the latest trends in SaaS, you'll notice them stating that the future of mobile SaaS is app-driven and that's true. But does that mean that every SaaS needs a mobile app? Not really.

Maybe your business is doing just fine even without a mobile app and so investing in one could be a waste of time and resources that could be directed in the website development process.

Before deciding what's best, we advise you to conduct research or a survey and analyze the results. Then, if you notice the users are yearning for a mobile experience, go for it.

A success story and a not-so-successful one.

When you decide to launch an app, you need to know your users' pain points. If you miss them, users will most likely abandon the app pretty quickly.

Duolingo owners recognized this back when they first launched their app. They continually invested in A/B testing, which allowed them to adapt to their users' needs.

Unlike Duolingo, HotJar failed to verify its data before developing an app. Instead of providing enhancing the user experience, they've achieved the opposite by removing the key features from their web offering. It backfired, and users were not satisfied.

Conclusion: look before you leap. Don't rely on a hunch but on hard-hitting data.

Where do I start?

If you're ready to go mobile-first, here are the steps we advise you to take:

1. Create a content inventory and develop a wireframe.

A content inventory is a list of all elements you want to include, such as different categories. This will help you prioritize and leave out the elements that are not needed.

After finishing up, we suggest you create a wireframe. The wireframe is an illustration of an app's interface that is focused on determining the position of the visual elements, their hierarchy, and functionalities that you plan on developing.

Think about the color of the visual element color, contrast, proximity, texture, and style.

Remember, a wireframe is just a skeleton, so you don't have to go into too much detail. You can draw it on a piece of paper or use an online tool for that.

2. Keep it simple.

Remember – a mobile phone screen is pretty small compared to a PC. Using too many visual elements will make it difficult to use the app and will most likely confuse the user. To avoid that from happening, we have some tips for you:

• Avoid putting too many links in your navigation menu
• Reduce the number of pages
• Stick to two columns of content at most
• Pay attention to typography – it should to big enough to improve readability
• Leave enough white space

3. Enlarge touch elements.

Small touch areas aren't going to cut it because a finger has a much larger surface than a mouse cursor. It's important to leave enough space around the buttons instead of having them all cluttered.

Users tend to get frustrated if they keep missing the button.

In the Android Material Design Guidelines, it's recommended that the touch targets should be at least 48 x 48 dpi, which amounts to 9 mm regardless of the screen size. Our best advice, however, is to use your finger as a guide – if you can tap it, most likely other people can too.

4. Use visual hierarchy in terms of content.

Since mobile devices have limited space, it's vital that you pay attention to the visual hierarchy.

Instead of cluttering the screen with too much text, put the vital message in focus and remove all unnecessary content to provide clarity.

Once you start working on a desktop version, you can add more content because you'll have much more space.

When determining which content should be highlighted, we advise you to put yourself in the user's shoes. For instance, spreadsheets are typically opened and read on a PC, so it makes no sense to put them in the app. Save it for the desktop instead.

5. Remove unnecessary pop-ups.

Pop-ups are one of the most frequent reasons users decide to uninstall the app. They disrupt the use of the app and frustrate the users.

If you, however, insist on keeping them, don't let the pop-up cover up the entire screen. It prevents the user from using the app and covers up the rest of the content, which is annoying.

But, if it is a full-screen pop-up, make sure it appears after the user has seen shown an interest in the app.

6. Simplify sign-up.

Filling out form fields can be a very boring task, especially if there are too many of them. Instead of asking for too much information, prioritize.

Ask yourself if you really need the users' addresses and phone numbers. If not, remove those form fields and only ask for what you really need. Most of the time, an email address and a password are the only information you need for them to type in.

Another great idea is to allow users to sign in using their Google or Facebook accounts, for instance. You'll most likely get all information that you need without annoying your users.

7. Design for one-handed use.

When designing an app, you should keep in mind that mobile devices are most often used with one hand.

Back when smartphone screens were under 5 inches, there was little room for mistakes. Smartphones nowadays are becoming larger and larger, which is something designers should acknowledge.

To overcome this problem, you could use a flyout menu instead of a full menu. Gestures are also a great option since they don't take up any additional space.

You could also allow users to customize their tab bars with the most often used functionalities.

8. Avoid large graphics.

Large images and videos spread across the entire screen just don't have the same effect on a mobile phone. They're often used to deliver a brand message and communicate important information. The problem with these is that they can take too much time to load.

You could either compress them if you feel like they're still valuable for your branding, or you could not use them at all; it's up to you. Don't forget that you can always add them to a desktop version.

9. Test your app.

The best way to find out if your app is user-friendly is to test it. Once you finish developing it, try using it for an hour or two. You can also let your friends use it and then ask them for their opinion.

Is it easy to navigate? Were you having trouble reaching a call-to-action? Are the buttons easily clicked on, or are they too small?

If you notice there's room for improvement, tweak the app a bit and then try using it again to see if you've accomplished your desired goal.

Author bio

Rick Seidl is a digital marketing specialist with a bachelor’s degree in Digital Media and Communications, based in Portland, Oregon. He carries a burning passion for digital marketing, social media, small business development, and establishing its presence in a digital world, and is currently quenching his thirst through writing about digital marketing and business strategies for Find Digital Agency.