Balancing the old & new: first four design decisions we made to upgrade our app

When I joined Datalogz as the only product designer, I inherited a functional product with design challenges: a hard-to-scale navigation, inconsistent design patterns, and reliance on older frameworks that slowed down development.

An immediate challenge presented itself: How can we create modern, scalable designs while respecting the functionality and structure of an existing system?

The goal wasn’t just to refresh the UI, but to build a foundation for product evolution.

I’ll break down key design decisions we made, the rationale behind them, and how they’ve improved our product’s user experience and technical foundation.

Establishing Design Principles

Right off the bat, we were mindful of several priorities from our primary persona - BI admin:

1. They need a tool that conveniently adds to their demanding daily responsibilities.
2. They need to trust the data and recommendations.
3. They need to feel easy and streamlined when completing a task.

We don’t want Datalogz to become another complex tool they had to learn.

With these needs in mind, I focused on creating a design that prioritized simplicity, intuitiveness, and trustworthiness.

The commitment to make the interface straightforward, foster confidence in the data guided every decision, and ensure the platform felt like a valuable tool—not a burden.

This approach led to a set of design principles:

1. Simplicity First
2. Intuitive Navigation
3. Trust Through Clarity
4. Empowering Productivity
5. Minimal Learning Overhead

Introducing Sidebar Navigation

An obvious yet strategic decision. When I joined, the product used a stacking layout for navigation. It worked but had limitations:

1. A stacking layout struggles with additional sections, resulting in cluttered visuals and poor hierarchy.
2. Context switching increases cognitive load. A lack of simple structure makes it harder for users to locate information or perform tasks efficiently.
3. Lack of white space. For a data-heavy app, it's critical to use white space effectively to focus on key data points.

A good design should seamlessly guide users through their tasks.

Switching from a stacking layout to a sidebar navigation layout could solve many of these issues:

• Improved scalability: collapsible sidebar navigation can accommodate additional features without overloading the vertical space. This keeps the interface clean and focused.
• Improved usability: consistent sidebar navigation keeps users oriented, enabling quick access to key sections.
• Optimized visual design: a sidebar creates visual breathing room by organizing content hierarchically, supporting clarity and trust.

Introduce Modular Design Systems

After understanding user needs and multiple BI environments, we realized we can standardize the use case of each displayed dataset and keep it reusable, scalable, and consistent.

We introduced a modular design system because

1. It’s responsive by default.
2. It ensures consistent application of visual rules like spacing, typography, and hierarchy across all screens, reducing cognitive load on users.
3. It saves time for designers and developers.

This shift helps create clean, user-friendly interfaces while ensuring systematic design patterns for faster iterations and polished results.

Replacing Bootstrap with Tailwind CSS

The product was initially built with Bootstrap, a reliable but outdated and inflexible framework in 2024.

Bootstrap was limiting us:

• Rigid defaults: customizing Bootstrap’s pre-built components often felt like working against the system rather than with it.
• Bloat: the framework included unnecessary styles and components, adding weight to the codebase.
• Generic aesthetic: Bootstrap-based designs often lacked the modern, polished look we wanted for the product.

Switching to Tailwind CSS brought significant benefits:

• Utility-First flexibility: Tailwind let us create custom designs quickly without the constraints of pre-built components.
• Lean and performant: We reduced CSS bloat and improved performance by using only the utilities we needed.
• Empowered collaboration: Tailwind’s approach allowed designers and developers to iterate together, creating a more agile workflow.

This decision wasn’t just about aesthetics. It improved the team’s velocity and gave us the tools to create a more refined product.

Removing Features: Less Is More

Over time, the product accumulated unused features:

• Cluttered interface: the UI was overwhelming and harder to navigate because of too many options.
• Confused users: new users had to sift through unnecessary complexity to find what they needed.

I worked with the team to identify and remove under-used features. The result?

• Simplified navigation: users could focus on the features that mattered to their workflows.
• Improved usability: a cleaner interface made the product easier to learn and use.

This decision wasn’t just about cutting; it was about creating clarity and focus for our users.

Looking Back

2024 was about solving problems that might have held us back in 2025 and beyond. We didn’t just focus on making things look good—we focused on making things work better for both users and the team.

By balancing the old and new, we achieved:

• Scalable infrastructure: sidebar navigation and modular design systems created a foundation for growth.
• Improved performance: Tailwind reduced technical debt and improved development speed.
• Enhanced user experience: streamlined features and consistent design made the product easier and more enjoyable to use.

These decisions weren’t flashy, but they were impactful. They transformed the product into something that could grow and evolve without sacrificing usability or efficiency.

If you’re a product designer facing similar challenges, my advice is simple: start with what’s essential. Build systems that scale. And don’t be afraid to simplify.

Design is a craft, but it’s also a strategy. Every decision you make today shapes what’s possible tomorrow.