Since the dot-com boom of the 1990s, the software as a service (SaaS) model has transformed how businesses engage with consumers, build brands, and increase revenue. The earliest iterations of SaaS applications were light on graphics and heavy on text, but contemporary SaaS products place a premium on thoughtfully designed interfaces and unparalleled user experiences.
Still, the path to quality SaaS design can be thorny, and a weak design process threatens user satisfaction and product longevity. With more than 20 years of experience designing SaaS websites and applications, I have found that the most effective solutions prioritize a compelling UI and a consistent, value-driven user experience at every stage in the design process. With this in mind, let’s look at how three SaaS web design best practices—ensuring cross-device consistency, leveraging user research, and avoiding feature creep—can help you create seamless SaaS experiences.
Create Cross-device Consistency
SaaS has revolutionized how users access information online. Before the age of SaaS, companies interested in improving their software systems had to purchase external storage mediums, such as CDs or floppy disks, to download updates onto individual computers. SaaS allows customers to access features and updates from any device with an internet connection, no download required. With this technological shift, users have come to expect consistent experiences across all their devices.
Cross-device consistency has several benefits. For the user, it eliminates the need to relearn or adapt to different interfaces, thereby enhancing productivity and simplifying onboarding and training processes. For SaaS companies, it reinforces the credibility and trustworthiness of their brands by signifying an attention to detail and a commitment to delivering high-quality experiences. In turn, users are more likely to trust a consistent SaaS product, which can lead to increased adoption and positive brand perception.
Here are three ways to implement cross-device consistency in your SaaS design process:
Prioritize Responsive Design
Responsive design is key to creating cross-device consistency. With the rise of remote and distributed work models, the need for accessing SaaS applications from different devices has become even more critical. Collaborative tools, project management platforms, communication apps, and other SaaS solutions are used across devices to facilitate seamless collaboration and productivity regardless of physical location. Therefore, the SaaS user interface and layout must adapt to the user’s screen size, resolution, and aspect ratio, irrespective of the device they are using.
Shopify, a SaaS e-commerce platform, employs responsive design to ensure its merchants can offer visual consistency across different devices, for example. This practice is crucial for maintaining uniformity in the appearance of merchants’ online stores, allowing them to cater to customers who shop using various devices.
Shopify’s responsive interface was designed using flexible grids, breakpoints, and fluid design techniques. The flexible grid system provides a foundation for organizing content and maintaining consistency in layout and spacing. Breakpoints are defined based on standard device screen sizes, and the design is adapted as the screen size exceeds or falls below these thresholds. Finally, fluid design principles are implemented by using relative units like percentages and scalable assets to enable content to adjust dynamically.
Adopt a Visual Language
To achieve visual consistency, designers must ensure that branding elements, typography, color schemes, icons, and familiar on-page elements help establish a cohesive and recognizable identity for their SaaS products.
Creating reusable UI components that embody your brand’s visual language can also help you ensure SaaS uniformity across devices. These components can include buttons, cards, form inputs, and modals that share consistent styles, behaviors, and interactions.
It’s also essential to implement recurring visual cues and feedback to guide users and provide a clear understanding of interactions. For example, aim for consistent hover, focus, and active states for buttons and interactive elements. Ensure these visual cues are implemented across all screens and devices to build familiarity and aid usability.
Google Workspace is an excellent example of prioritizing visual consistency. Across its desktop, web, and mobile applications, a primarily white background is complemented by interactive components and informational content that uses Google’s signature vibrant colors. The platform uniformly employs the Google Sans font, a clean and legible typeface that enhances readability. Additionally, Workspace uses a card-based design, side navigation menus, and floating action buttons to bolster consistency further and help users quickly navigate the suite.
I also recommend establishing guidelines or a UI style guide that documents visual design decisions. This guide should include examples of how to use each UI element to eliminate ambiguity and serve as a tangible reference for all team members and stakeholders.
Ensure Device-appropriate Navigation and Features
Achieving experiential consistency can be complex because each device has unique constraints, from screen size to usage patterns. For example, desktop spreadsheet applications typically have numerous columns, rows, and cells. Trying to fit all this information on a smaller mobile screen can result in a cramped and cluttered interface, making it challenging for users to navigate and interact with the data effectively. This is why the Google Sheets mobile application omits the custom scripts, app integrations, and advanced chart customizations found in the web version.
As demonstrated with the Google Sheets example, creating SaaS consistency across devices doesn’t mean replicating the same experience on each device. For instance, you could use expansive menus in a desktop app, whereas on mobile you might prioritize collapsible menus. Additionally, you should allow for different input methods and usage patterns. For example, touchscreens require larger buttons and touch-friendly gestures, while keyboards may rely on shortcuts and precise cursor movements.
Identify Experience Gaps With User Research
Companies that aren’t aware of their users’ objectives, pain points, and behaviors are more likely to create unintuitive SaaS products, resulting in poor user adoption and satisfaction. In contrast, successful SaaS companies have customer-led design processes. Slack, for example, strongly emphasizes user research to understand needs and workflows. By conducting user interviews, usability tests, and feedback sessions, it has refined its user interface and continuously improved user experience, resulting in a highly intuitive and widely adopted product.
Implementing a user-centered design approach starts with gathering user feedback and analyzing usage patterns to identify what users hope to achieve at different stages of the user journey. However, it is essential to note that user research isn’t a one-size-fits-all pursuit, and the questions asked or the methods employed depend heavily on the client’s issues and goals. Getting to the heart of a design problem requires more than asking, “What isn’t working?” Instead, setting aside time to inquire about the customer journey or performance measurements can put SaaS designers on the right track toward optimizing the user experience.
When I was the head of UX at a cloud-hosted collaborative automation platform, I led a team charged with the redesign of a SaaS web application initially built for engineers. When the app’s focus shifted to product management teams for financial services, we discovered that its features didn’t align with the goals of our new users. To remedy this, we returned to the basics: conducting user research. In particular, we used “How might we” questions, such as “How might we increase awareness of tasks that can be performed with our app?” and “How might we ensure users are aware of the app’s latest and most relevant features?” to create actionable problem statements.
Our research taught us that these product management teams often use Microsoft Excel spreadsheets to organize tasks and planning. This made sense, considering Excel’s ease of use and popularity among users on finance and accounting teams. Although most of these tasks could be performed in our application, our new users wanted more control over tables to edit each cell, which we weren’t currently offering. Based on this information, we refined our app’s UI to allow users to manually organize tables and fields without changing the overall platform structure.
The takeaway? This seemingly simple insight helped my team pinpoint what our users needed and where to make the changes. If we had charged ahead without involving users in the earliest stages of the design process, we would have overengineered the product, potentially restricting its growth in other markets.
Avoid Feature Creep by Focusing on Core Functionality
Successfully scaling a SaaS product is crucial for handling increased user demand, growing data volume, and changing market trends. However, SaaS scaling can be challenging, and feature creep is one of the key pitfalls to watch out for. Feature creep refers to regularly adding new features without a clear focus or strategy, resulting in an overloaded UI that overwhelms users. This phenomenon is often the result of SaaS companies feeling pressure to keep up with competitors or fulfill customer demands for additional features.
Designers can avoid feature creep by focusing on core functionality during the early design phases. This strategy ensures the product vision remains clear, conserves resources, and prioritizes developing features that offer users real value.
The startup Notion is an excellent example of a SaaS company that initially set itself up for success by focusing on key features before expanding its offerings. In 2016, Notion version 1.0 was launched to target small tech and startup communities seeking a flexible, all-in-one productivity tool. The original app was a note-taking system with task and project management capabilities that enabled users to create to-do lists, assign tasks to teams, set deadlines, and track progress. Simple as it sounds, this was a unique approach to productivity software at the time. Notion attracted early adopters and power users who, impressed with the potential of the app’s flexible structure, spread the word and helped build a dedicated user base.
Having established a solid foundation, Notion introduced several additional features to reach a broader audience, including marketing and creative teams, educational institutions, and remote work platforms. Its extended offerings included custom database template creation, Kanban board functionality, and enhanced features for real-time collaboration. As of 2023, Notion is valued at $10 billion, has more than 4 million paying customers, and is a successful example of how prioritizing essential user actions early on can help a product succeed.
In an example from my own work, I recently worked as UX lead for an IoT platform that was switching its focus from SaaS to desktop as a service (DaaS). We researched industry-standard DaaS features and shortlisted those that would most benefit our client’s customers. Then, instead of investing weeks or months developing features, we employed the “fail fast” methodology, which emphasizes rapid experimentation, quick validation of ideas, and learning from failures early on. We created a rapid minimum viable product (MVP) and used it to validate our initial assumptions with feedback from our customer base. This approach helped us determine which features were truly valuable and encouraged a mindset of continuous learning, experimentation, and adaptation.
Successful SaaS Design Starts With the User
Saas continues to be a significant opportunity for designers, and its growth in 2024 is projected to be substantial. The industry’s ongoing expansion presents novel challenges and opens new avenues for designers to enhance their skills and advance professionally.
Meeting the multifaceted and nuanced expectations of an enterprise company and its users requires performing a careful balancing act. However, by following these best practices—ensuring cross-device consistency, leveraging user research, and avoiding feature creep—I believe SaaS design teams can deliver sustainable, competitive, and, above all, user-friendly products.