SaaS UX Design : Where to Start ? The UX steps

Step 1: Developing UX Strategy

Before delving into the design, development, or modification of a SaaS software, it's imperative to establish a robust UX strategy. Among the UX stages, this part is closely linked to the vision and overall strategy of the company developing the SaaS and is crucial in crafting a memorable user experience. While most UX Design managers within a SaaS excel in "practical" skills (UI Design, Mapping, Mockups, Prototypes, Design System, etc.), they must also master strategic aspects.

The main objective is to grasp business needs, analyze the competition, and understand the platform's users. By analyzing various internal documents from different teams (marketing strategies, operational strategies, sales forecasts, market positioning, user feedback collected by customer success managers), UX Design managers will be able to devise a vision, clear objectives, and an action plan for the SaaS UX strategy, even before its implementation.

According to the Nielsen Norman Group, the 3 essential components of UX Strategy are:

1. Vision (where to go and why)
2. Objectives and performance indicators (how to measure progress)
3. Action plan (which exact actions to implement)

Once the strategy is well defined, it's time to move on to understanding what UX Research entails.

Step 2: UX Research for SaaS

This research phase aims to understand the SaaS product, user attitudes towards it, their needs, pain points, and why the software is or will be used.

Among the UX stages, this one is key to avoiding the design of an unused product. It helps avoid wasting time, money, and effort. Thus, there's no need to fix errors that could have been avoided and that cost a lot in terms of time and money. UX Research is involved at every stage of SaaS product design. It's about relying less on assumptions and more on data.

To gather the right data, we rely on both qualitative and quantitative research:

Examples of the most used data from qualitative UX Research:

• In-depth individual interviews
• Focus groups
• Case studies
• Field observations
• Contextualized usage studies

Examples of the most used data from quantitative UX Research:

• A/B tests to compare different versions
• Eye tracking to understand visual behavior
• Heatmaps to identify areas of interest
• Activity measures, such as the number of connections or specific actions
• Structured surveys
• Detailed usage statistics and analyses, such as the number of clicks on specific elements.

Once the research is done, we analyze the collected data to transform it into information that we will document.

Step 3: Analysis of Collected Data

Once enough data has been collected during the research phase, it's analyzed while keeping in mind the varied needs of stakeholders, including users, managers, developers, and UX Design experts.

Throughout this UX analysis stage, the main objective is to understand who the customers are, where our user category stands, what information they need, and why they prefer this information.

The data, often voluminous and diverse, requires proper organization to be accessible and understandable. This organization may involve creating tables, charts, or using specialized software.

Once the data is organized, we proceed to process it to transform it into usable information. We then analyze this information to identify essential insights into user needs, preferences, and challenges, focusing particularly on the main feature needed to avoid product complexity.

With usable information, the results can be interpreted to draw meaningful conclusions about user behavior. This interpretation often requires a deep understanding of the context in which the data was collected, as well as knowledge in psychology and design.

The conclusions obtained are then formulated as observations or insights, serving as a basis to inform the design or improvement of the product or service.

Finally, the results of the data analysis must be communicated clearly and concisely to the relevant stakeholders, such as designers, product managers, or decision-makers. This can be done through reports, presentations, or data visualizations to facilitate understanding and adoption of insights by the project team.

To illustrate our point, here's an example: A SaaS company specializing in human resources management collects data from its customers, such as platform usage data, user feedback, and feature performance information. The analysis team examines the data to identify usage trends, friction points in the user experience, and the most and least used features.

The data is organized in a centralized data management system, allowing developers and designers to easily access and interpret relevant information for product improvement.

Usage data is aggregated and analyzed to identify the most common user paths, conversion rates, and platform performance issues.

The team discovers that customers struggle to find certain key platform features, suggesting a need to improve the user interface and navigation.

By examining usage data by industry sector, the team identifies differences in customer needs and preferences, leading to offer customization to meet the specific needs of each industry.

Insights are shared in a meeting with the development and design team, where discussions are held on actions to take to improve the user experience and optimize platform features, while meeting specific customer needs.

Step 4: Interface Design (UI Design)

After handling all necessary information, the most well-known and creative phase of UX stages finally arrives: the visual and functional design of the interface (UI Design). This stage is divided into five essential parts:

1. Idea generation, sketches, and drafts: In this phase, the design team generates ideas and explores different approaches through sketches and drafts. This is the moment when creativity is at its peak, where each team member can contribute with their ideas and concepts.
2. Wireframing: Once the ideas are consolidated, the team moves on to creating wireframe mockups to define the structure and layout of user interface elements. These wireframes serve as a basis for creating interactive prototypes that allow testing and validation of concepts before moving on to the visual design phase.
3. Visual design and interactions: In this part, wireframes are transformed into attractive and functional visual designs. User interface elements are stylized, words are well chosen, and interactions are carefully designed to provide an intuitive and engaging user experience.
4. Documentation: The interface design is documented in various forms, often using software where mockups are made, such as Adobe XD, Figma, or Sketch. In this highly graphic documentation file, you will find the Design System and prototypes/mockups. This stage is divided into five essential parts:
• Design System: A design system is developed to ensure visual and functional consistency of the interface across all pages and features of the application. It contains guidelines for each component and their operation. This document can be in PDF format, or Figma or Adobe XD file, depending on the preferences for use by developers.
• Figma Files: Designs documented in Figma files, a collaborative design tool, allow developers to access "dev mode" to extract useful information and facilitate front-end integration.

5. Development: This stage involves transforming approved designs into functional code.

   • Front-end: Front-end developers translate visual designs into HTML, CSS, and JavaScript code to create the visible and interactive user interface.
   • Back-end: Server-side functionalities are developed to handle complex operations and interactions with the database.
   • Databases: Databases are set up and structured to store and manage application data efficiently.
   • User testing, fixing, beta testing: Once development is complete, user tests are conducted to identify any issues or bugs. Any dysfunction detected is corrected before the final deployment of the application.

Step 5: Production

Once the interface design and user experience are completed and developed, the SaaS solution is deployed on servers or in the cloud to be accessible to end users on the web. Deployment can be automated using continuous deployment tools to ensure a fast and reliable process.

After deployment, the SaaS application requires ongoing maintenance to ensure its proper functioning and security. This includes performance monitoring, bug fixing, feature updates, and managing security patches.

Conclusion

As UX is extremely important for SaaS products, you know now that by following the right UX steps during the design and improvement of a SaaS product, user experience can truly be optimized. It all starts with establishing a UX strategy, then moves on to research, analysis, before the actual interface design and its production. All these UX steps are crucial to creating a sublime user experience. However, we know that in reality, it's not always easy for SaaS companies to follow all of them to the letter due to lack of resources. But remember:

GOOD FOLLOW-UP OF UX STEPS = BETTER USER EXPERIENCE = HAPPY USERS = MORE USERS = MORE REVENUE = HAPPY TEAMS

Once you're done with the 5 steps, do not forget to check out our list of 10 points to not verify before lauching a SaaS product or module. If you need assistance, our merveilleUX agency can accompany you in the design and improvement of your SaaS solution, whether you need help with all UX steps or just a step like designing mockups or prototypes.