How Luffy Turns Excel Chaos into a Seamless Data Visualization Platform

Introduction

In the internet industry we encounter data every day—tables, calendars, charts, text, numbers, emojis—and we need to extract useful information from it. Many business units still rely on traditional Excel for data display, aggregation, and analysis, which creates pain points such as blocked team collaboration, cumbersome file sharing, low analysis efficiency, high manual cost, and inconsistent presentation styles.

To solve these problems we created the Luffy platform from zero, symbolizing a clear direction for users navigating the blue ocean of data.

Project Analysis

Luffy is a data‑display and analysis platform aimed at users who need to read and analyze data, such as operations, product, and team leaders. The project’s core characteristic is massive data presentation, requiring design solutions that prioritize intuitiveness, readability, and security.

From inception to the first release, the development cycle was short and future extensions are many, so the underlying design components had to be built early to ensure high design efficiency, low modification cost, and strong extensibility.

Design Goals

Adopt a minimalist style that focuses on important information and reduces visual noise.

Reconstruct data visualization comprehensively while maintaining data security, lowering the user’s understanding threshold.

Fully componentize styles and workflows to boost team collaboration efficiency and reduce maintenance cost.

Design Process

Minimalist Style

The platform uses a flat design with simple navigation, background, and filter modules, while data charts employ high‑saturation colors for clear emphasis.

The primary brand color is technology blue, chosen for its strong association with data‑driven tech across many industries. Supporting colors are derived from this base.

Simple Framework

Because Luffy is a data service, complex hierarchies and interactions would hinder information retrieval. The navigation adopts a tab‑switching approach to lower the learning curve.

Interface example

Data Visualization

Data is visualized using appropriate charts for three main dimensions: sorting, trend, and proportion.

Sorting

Bar charts display relative sizes on a single axis, using vertical orientation for better scalability.

Trend

Line charts combine data with time to show development over periods, suitable for many Luffy metrics.

Proportion

Pie charts illustrate the share of each category within a whole (100%).

Watermark Data Protection

To safeguard sensitive data, a watermark is applied across the page. Transparency (4% black), a 45° tilt, and an 80 px vertical spacing balance security with readability.

Style and Components

The design adopts a component‑based approach: colors, spacing, typography, forms, filters, and charts are all managed through a shared component library, enabling easy updates and extensions.

Color variables extend the primary blue into 20 HSL‑based chart palettes, stored as Sketch Color Variables for instant reuse.

Text styles prioritize the PingFang font on macOS and Microsoft YaHei on Windows, ensuring consistent appearance across platforms.

Responsive components are built with Sketch’s Layout constraints, allowing buttons and other UI elements to adapt fluidly to content size while maintaining minimum dimensions and consistent padding.

Conclusion

To date, Luffy has completed three rapid iterations, transforming legacy Excel data into an efficient, low‑threshold analytics platform that boosts manpower productivity, efficiency, and collaboration. The design process demonstrated the power of componentization for design speed, and future work will focus on making data more intelligent and proactive, with continued collaboration among product, engineering, and testing teams.