There are many web apps around, some good, some bad, some are kind of life-changing while others lay almost forgotten, but making a SaaS app is something definitely bigger; a good programmer and a talented designer are not enough. The concept of Software as a Service looks far ahead and, consequently, the design process itself has to get rid of the burden of the past.
Five Quick Tips Before You Start Your Next SaaS Project
Posted on
What is SaaS?
In the beginning, is was just websites, then new web technologies allowed us to create web apps; basically supercharged websites, very focused on one or two features built with advanced script usage. A SaaS solution is one step beyond; a web app even more focused and more advanced. Technically speaking, it is still a website, but built with dedicated technologies and built around just one feature, the service. This does not mean that SaaS is simple; it may be as simple as a mobile application, but also as complex as a full software solution like Google Sheets.
Who are millenials and why do they matter?
Typical SaaS users are millenials; not just people born in the year 2000 (a common misconception) but the generation born between 1980 and 2000, and they still remain among the top users, but others are starting to creep into their turf. Since it's the millennials who are still working the most with SaaS, let's take a deeper look at what makes them tick when it comes to platforms like this one. This kind of user is less tied down to the monolithic conception of traditional software; they were raised when the internet had already left its pioneering stage and had started to be part of everyday life. They are more focused on the task itself, rather than on the tools. It's a bit a hard to admit, but the former generation has always looked at web-based services as a less powerful version of their desktop counterparts, without actually checking them. Millenials don't have this kind of preconception; they are the ideal SaaS users and, when it comes to choosing the right tools for a project, they are more willing to leave the comfort zone, compared to former generations, often stuck with the same software over the years and abiding by industry standards.
When we design a SaaS solution, we should do it from a millenial's point of view, not because they will be the main target group (well, potentially they are) but because they will naturally embrace our product and feel comfortable using it.
Design for SaaS
The main concept that points out the difference between a standard website and a SaaS site is intuitivity. At first, one could think that a generation born surrounded by technological gadgets finds itself at ease with lots of submenus and endless lists of nested features, but this is actually a misconception. Badly structured software and clumsy UI/UX are a legacy of the past; nowadays, software design patterns are thoroughly applied, and properly trained UX designers are indispensable in every product team. Millenials expect our SaaS products and platforms to work flawlessly and usable to their full extent in just few seconds; at least for their main function. When you open a car sharing app (on mobile as well as on desktop) you expect to be able to book your car rapidly; if you need to watch a tutorial for that, it's conceptually a failure. A golden rule when designing SaaS products and platforms is to constantly and obsessively focus on the purpose of the service upfront and design everything else around it. Don't let yourself divert from the main path; all other features should have secondary importance and be off the main stage.
SaaS as software
Not all SaaS products and platforms are single purpose; we may want to build a replacement for a desktop software application and we cannot focus just on one feature. But even in this scenario (pretty different from a single-purpose app), intuitivity, along with simplicity, plays a special role. It's not easy to replicate all the features of a desktop software solution in a browser, so we must concentrate on a subset and develop it to the highest level; less features but properly refined. The onboarding process and the UI are the components into which most effort should be invested. As a general rule, the onboarding process should be easy, fast and flawless, but on a standard website there could be many reasons for a slow onboarding. For a typical SaaS solution, this is one of the most crucial parts of the design process. The UI is another delicate point to handle; desktop software is famous for not prioritizing features whereas websites are full of links and interactive areas. In a SaaS solution, the UI must be very clean and simple: "less is more" is a principle that should be followed. A desktop solution is conceived to be powerful and meant to be explored, a SaaS solution is designed to carry out a specific set of tasks quickly and efficiently.
Desktop or SaaS?
Even if a SaaS solution may seem like a lesser version of its desktop counterpart, the former has many advantages over the latter that may justify its development. A desktop application lives in the computer and, if we update the operating system there may be incompatibility issues; if we buy a new computer we might have to reinstall the software, also we cannot use it on mobile devices. A SaaS app lives in the cloud and runs in the browser, and if we start working on a desktop computer, we can resume our job on mobile or using a different computer: office, home, or on the road, the software always follows us. Another point for SaaS is that there are a lot of developers specialized in web technologies, and they can work in an existing infrastructure; this keeps costs for developing SaaS solutions lower.
The final choice depends on what our final goals are, and these have to be clearly defined: trying to build CAD software that must challenge the best-in-class… well, it can be an overwhelming challenge and an SDK surely offers more possibilities than web programming languages. Building an app as a SaaS solution must have clear advantages over desktop. It may be a very specialized app that offers the same experience on every device or it could be just a reduced version of a desktop application, less powerful but easier to use and, thanks to reduced development, maintenance and distribution costs, much cheaper (or even free).
More great blog posts from Alessandro Loverde
Tighten Your CMS Security
A small investment early in the deployment phase can go a long way to creating a secure environment. Fine tuning permissions Every CMS allows administrators to set permissions for different users or groups and, for the sake of better security, one should check that editors can only do what they...
Image Optimization: A Comprehensive Roundup - pt.1
In the beginning, the World Wide Web was all about optimization. Standard speed was around 3 kb per second, and hosting space larger than 5 MB was expensive. Then broadband became available for everyone, and web designers grew less and less obsessed with image optimization. Nowadays, younger web...
Video Tutorial: Building a React App - pt5: Working with External Data
In the previous part of this tutorial we explored components: the distinctive React feature. We did no magic because we wanted to focus on the basic structure of components, but now the time has come to explore the advantages of generating code employing external data. Replacing hard-coded with...
Strategies for a Multilingual Website
Having a website just in English may be okay for most businesses. In fact, even if you occasionally need to reach foreign visitors, you can expect that whoever is interested in your services has enough knowledge of English to clearly understand what you are offering. But if you sell something...
HTTPS and SEO: How to Cover your Assets and Avoid Common Pitfalls
Back in 2014, Google started to consider making the use of a secure connection (HTTPS) a parameter in their search algorithm. It began with just a 1% weight over all the other factors, but they pushed it further and further; and now, in 2018, every professional website must be served through a...
WordPress and SEO; Costly Missteps to Avoid
WordPress is often a popular choice for a website builder and it is appreciated by many because it gives the users a lot of freedom regarding tools and plugins. Unfortunately, this approach is not good for your SEO because WordPress does not offer many SEO tools out of the box and, if you don't...
Video Tutorial: Building a React App - pt3: Code Components
In the previous part of this tutorial we have converted an existing HTML page into a React app, but we have not seen much interactivity so far. In this new chapter we start exploring one of the most interesting React features, the components. Let's build something dynamic We are going to create...
Rising Stars and Falling Comets in the CSS Universe
CSS is our friend; the relationship between it and web designers has been a bit turbulent over time, but near the end of the first decade of the new millennium, it settled down with mutual love and respect (in the meantime Internet Explorer has met its fate but nobody mourns the loss, right?)....
A Bit of SASS Magic: Automatic Text Color in CSS
We already talked about SASS and how it can revolutionize your approach to writing CSS. We talked about variables and indenting; powerful features but easy to handle nevertheless. We mentioned that SASS has more advanced functions, and in this article we are going to explore a handy one. The SASS...
This Is How We Do It - The TROX Case Study
TROX understands the art of handling air like no other company. It’s a dynamic firm and, through research and development, TROX became a global leader of innovation in ventilation systems. A business can be efficiently run only with efficient tools and TROX has chosen Scrivito to manage over 70...
How to Up Your UX Best Practices for Mobile Apps - pt2
One central guideline for a designer is to have a clear understanding of the medium, the way users will interact with our design. It can be a television, a computer, a book, or any number of things: design is everywhere. A mobile phone is not just a small computer; it has its own unique features...
DOM Filtering with jQuery - What You Need to Know
We have already given an introduction to the jQuery library, showing how useful it can be for web designers and developers: it simplifies the JavaScript syntax for lots of useful DOM-related tasks and it can dramatically speed up the routines to select DOM elements. Now it’s time to expand your...
How to Up Your UX Best Practices for Mobile Apps - pt1
The concept of mobile apps has greatly evolved: with the first apps, developers tried to replicate the same experience of a desktop but, given the limited resources, the results were pretty different and, in some cases, disappointing. A more modern approach is to create mobile apps that offer the...
Video Tutorial: Building a React App - pt2: Installation
In the first post of this video tutorial series, the basics of React.js were covered. Now it’s time to move a bit forward: we will install React.js and configure it. Eventually, the web page of the standard web application will show up in the browser. The installation process The very first step...
Obscure HTML 5 Features That May Make Your Day
Stumbling into one of those popular, so called “cyber cafès” means that nowadays you will probably find tables occupied by hipster-like web designers, delighting themselves into glorifying the moment when they embraced SASS, React.js, jQuery, Node JS, Ember, Bootstrap, Angular and others. Well...
You Asked For It - Scrivito Features & Benefits
The web is changing at a truly fast pace! New technologies break into the market more rapidly than before. The period of caution and skepticism grows shorter, as the IT world has finally understood the impact of being stuck for too long on technologies which are reliable but outdated. The time to...
Getting Sassy with SASS - Your First Steps
CSS is great and there would be no web without it: if you have been involved enough to remember the state of the web in the late nineties, you will immediately get the point (probably, along with a couple of shivers). Unfortunately, CSS has its limitations and they are not easy ones; that’s why...
DOM Traversing with jQuery - What You Need to Know
The Document Object Model (DOM) is an object-oriented representation of a web page which can be modified with a scripting language, like JavaScript: we can think of the DOM as a representation of an HTML page in a way JavaScript can understand. JQuery is a very popular JavaScript library that...
Tips & Guidelines for A Better Mobile UX - pt2
Mobile websites are not just a trend; they meet the user’s demand for a better and more rational use of their time. If we are already out of the office and need to check if the product we want to buy is effectively in the store we are confidently heading to, it’s nice to be able to check this on...
Tips & Guidelines for A Better Mobile UX - pt1
When the iPhone came out it started the mobile web revolution: for the first time, we could browse web pages on a mobile phone in a decent and usable way. As soon as people had started to do that, the limits of the resizing technology used became evident, accompanied by a high demand for a...
Five Quick Tips to Learn JavaScript Faster
JavaScript has been around quite a while now and we can almost consider it part of the ”old wide web”. But the JavaScript we use now has evolved immensely since its first days. We could better say that what really evolved were the projects that had JavaScript as their core and that made the web...
Video Tutorial: Building a React App - pt1: Introduction
Anybody interested in Javascript development has likely stumbled on MVC frameworks, a term that is pretty much going strong recently and defines a library built according to the “model - view - controller” design pattern. React.js is a Javascript library that acts as the “view” part of an MVC...
Traditional, Headless or Decoupled: The New State of CMSs
Headless CMS is a term that has been on everybody’s lips recently, along with Content as a Service and Decoupled CMS. Actually, these three concepts are very closely related; you can’t talk about any of them without citing the others as well but, for a better insight on the topic, talking about...