Personal SaaS UX/UI Design Process (Part 1)

Gerald Canario — Personal SaaS UX/UI Design Process Illustration

I’m sharing a condensed, based on true facts, step-by-step processes of real-life UX-UX projects.

In this particular scenario I’m focusing on the SaaS design process framework, and quickly mention the main touch-points of the process, that maybe it will bring some clarity for new.

With all that being said, let’s start with the first, crucial stage, Analysis and discovery.

1. Analysis and discovery

1.1 Management

For companies that have to deliver good quality-innovative products, planning the work ahead, discussing strategies, scheduling, brainstorming, assigning tasks.

Leaders of this step are the leaders and decision makers: executives, project managers, lead developer, and lead UX designer (of course, it will depend on the companies structure).

You will find this way of work a huge time saver aftermath and bonds the team to the same objectives.

1.2 Discovery Research

Most companies skip this step because sounds like an expense, and I can’t stress enough how important is and how involved the research is in the success of any product.

Data collected is revealing, avoids bias and suppositions on topics unknown for the team, and affects decision making on every level of the product development (Yes, even on design).

There are many options I’ve explored and they are easy to use, from cheap to free

• Focus groups Interviews
• Competitive Analysis
• Market behavior Analysis
• Surveys

1.3 Analysis and information architecture

You’ll mostly analyze what you had previously gathered on the interviews and competitive analysis, and check what is technically possible, how the data is going to be organized, and what is your scope within your budget and your business goal and deliver a final sheet with the specific specs globally and by module, of the complete project which will be fed to developers and designers.

Let’s summarize all that in 5 points:

1. Data collection and analysis
2. Card sorting
3. Personas
4. User flow map
5. Project specs

Notice, there are many other good points we could add, but since I’m basing on my experience these are all I had the opportunity to implement in my previous jobs.

2. Wireframe and prototype

2.1 Wireframing

In this stage, at last, the design is coming and the UI designer starts to involve.

• With the previous information, we already know:
• How many screens there are going to be
• What each screen are going to have
• What are the most relevant screen to work on

This led us to make black and white raw drawings, handmade sometimes, not detailed, or branded, just with the basic information.

These drawings have to be sketchy, drafts that can be quickly replaced. In fact, doing them on paper and allowing the team to make scratches can help to have a better vision of the information distribution, layout arrangement, functionalities, etc.

Making changes in this step is painless, besides the final design, which can obviously take longer.

Finally, there are 2 more steps in the design stage, which are prototyping, and working prototype, but will be covering all that with more detail in the second part of this lecture.