How Setu saves 50% time in shipping UI

The age of the specialist is over, the time of the generalist has come.

It’s better to be a jack of all trades, and be very good at some, than just a master of one. The entry barrier to learn a new skill has never been lower, and in this are of mass-layoffs and cheap education, it’s inexcusable to not pick up other avenues of knowledge, adjacent to your current area of expertise.

To this end, in the Setu Design team, we encourage designers to learn UI engineering. This not only saves time, but also enables the designer to understand the development cycles better. This has a curiously positive side-effect — we’ve stopped mocking up UI that simply cannot be built, as we now understand the constraints and shortcomings of the system better.

To this end, I came up with Fictoan a few years back, and we began using that in Setu, and over-time, the engineers and designers at Setu have transformed it into a robust, scalable and performant framework, and we now want to share that with you.

Fictoan is built in such a way that the UI code is very similar to how a designer would configure a component in Figma or Sketch — and the resulting syntax is extremely familiar, and not scary at all. For example —

Compare this to Tailwind or a similar framework, the difference is light and day. No complex nomenclature to remember, no naming convention to memorise. Everything is plain English, all are mostly intuitive.

This way, Fictoan has saved Setu ~25,000 work hours from 2019–2022.

Handing-off Figma mockups and FE engineers having to build from scratch is painful, and takes twice or even thrice as long. But handing off ready-to-integrate UI in code saves time for both Design and Engineering teams —

• Design can focus on UI/UX

• Engineering can focus on backend integrations, deployment and scaling

Win-win!

Here’s some rough math—

Three main projects that the Design team handles, and approximate time saved by eliminating hand-off:

• Setu Website. Near-zero hand-off. Let’s say 95%.

• Setu Documentaion. About 70% hand-off eliminated, until 2022.

• Bridge v1, and Bridge v2. About 50% of FE-only hand-off eliminated, until 2022.

On average, that’s ~70% across three projects.

A handful of designers use Fictoan extensively. If we say about 8 developers from the Engineering team who would have otherwise had to sit and build UI from scratch, over the last 4 years—

• Work hours per year per person: 40 × 52 = 2080 hours

• Multiplied by number of people: 2080 × 8 = 16,640 hours per year

• Multiple by number of years: 12,480 × 4 = 66,560 total man-hours

Even if you take a conservative time estimate of 50% instead of the 70% time saved across these projects, that comes to ~33,000 hours saved. Let’s round that down even more, to 30k. Hang on to that!

Website requires constant updates, new pages, new products added and removed etc. Here we’ve saved the time of one developer, full-time. 95% of 8320, comes to 7904 hours.

Docs, definitely requires at least two developers sharing the work, but maybe there wasn’t constant work on this. Let’s take 25 hours a week worth of work. 70% of 5200 hours is 3640 hours.

Bridge, until 2022, Engineering handled integration — all static UI was done within Design. That’s easily three developers on this full time. 50% of 24,960 is 12,480 hours.

Put that all together, you get 24,024 hours saved. This is without counting our other products and deliverables, and only for the three constant work-streams we have going at any time.

Nifty, eh?

Interested? Check it out at fictoan.io.

The Fictoan docs are still a work-in-progress, but the framework itself is good to go. Take it for a spin, and let us know what you think of it, and feel free to help make it better.

Special thanks to Dhruv Misra, Dhiraj Bhakta, Kayva Jha, Naresh Ramesh, Sreejit De and specifically Rohit Singhal who made Fictoan what it is today.