How Modern UI/UX Design Transforms SaaS Apps: Lessons from Zoho Books

Background: The author has been working on B2B website back‑ends and notes that B2B SaaS interfaces share many interaction patterns with enterprise‑grade web applications, making them a valuable reference for design.

SaaS (Software as a Service) is a cloud‑hosted software delivery model where users access applications through a web browser without installing anything locally.

Translation: Cloud‑based SaaS has replaced bulky desktop software, and delivering an excellent user interface is now essential, though it brings many challenges.

The article outlines key considerations and shares how the design team, after years of experimentation and testing, improved the user experience for online office applications such as Zoho.

Before redesigning, several design problems need to be raised:

Layout: Consider new trends, habits, and multi‑platform, multi‑device environments.

Product workflow: The less time a task takes, the more UX points are earned; a good UX lets users complete tasks quickly.

Visual design: A beautiful interface is undeniably important.

Forms: Forms are tedious, but unavoidable; they must be designed to be easy to fill.

How we redesigned:

1. Navigation – Move top‑right tab navigation to a left‑side menu

Reason: Wider screens provide horizontal space for a left‑side navigation that is easier to touch, saves vertical space for main content, and allows more menu items with scrolling.

2. Three‑column layout

The three‑column layout extends side navigation: the second column shows a project list, and the right column displays details of the selected item.

3. Make forms more engaging

Design custom form controls to simplify entry and improve recognizability, such as searchable dropdowns, inline add‑option dropdowns, and grouped menu items.

Group different form fields into separate tabs instead of flattening everything on one page.

Improve readability by adjusting colors and focus states for a more comfortable visual experience.

4. Right‑hand sidebar

Use the extra space on the right side of the screen for actions related to the main content.

5. Context‑aware operations

Integrate side‑tasks into the main task page instead of separating them, leveraging modern web performance to handle multiple actions without page navigation. For example, when creating an invoice for a product/service in Zoho Books, the UI presents context‑specific settings directly.