top of page

The most complete design platform

A product design tool to bridge the gap between design and development handover, seamlessly.

ROLE

Product Designer

COMPANY

Zoho

TIMELINE

2019 - Present

mac-front-min.png

About

The design tool is a mac and web based platform where designers can design products and collaborate on them. The tool is majorly split across four modules - Create, Prototype, Collaborate - Discuss, and Handover. Most of my time was spent crafting these four modules.


The Creation and Prototype module allows designers to design products, icons and prototypes - thus forming a central component of the product experience.

Design Process

Research

Wireframe

Iterate

Deliver

Research

Research

Design is an indispensable part of the product-building process. From the initial rough wireframes to high-fidelity UI screens, a finished product completely breathes in the framework created by the designer.

​

There is no doubt that a modern product’s success depends highly on the refinement, quality and functionality of its design. To ensure that designers do their best work, they must be involved at every stage, and in sync with everyone else on the team working on different aspects of product creation. Unfortunately, this is something that often fails to happen in real-life situations.

​

So, I sat down and identified the fulcrum which holds the process together

 

  • Teamwork.

  • Collaboration.

​

Considering these two loose ends, we crafted a brand-new product that brings in the best of both worlds: cutting-edge design and seamless collaboration.

User Interview

I interviewed 10+ product designers and managers, and identified pain points, which could prove to be a major hurdle for a designer to collaborate with their team and make decisions. The major setbacks identified were: 

​

  • Feedback and conversations were lost across multiple design / collaboration tools.

  • This meant they always fell back to phone calls, chats and multiple emails.

  • Teams lose track of design iterations and versions.

  • UX writers always depend on designers to make content changes.

  • Developer - Designer handoff is not seamless.

​

User Insights

90%

Want all design related discussions to be documented.

74%

Want to reduce design handoff effort.

30%

Want to export designs directly as code.

Wireframe

The first version of the design was discussed in 2019. This was more of an attempt to get the best of all existing design tools.

​

The center region of the toolbar was reserved for inserting objects. The right region contained view, comment, and search actions. 

The remaining space was left to the user to add their favourite tools.

 

The right panel was contextual to the element selected on the canvas. The left panel had pages and layers.

​

There's also a toggle on the top-right to switch between design and prototype modes.

​

Ideating this first version took me six months and was fairly good to begin with.

Wireframing
Iteration

Iterate

I conducted a user study by presenting the partially developed version to user groups and concluded that.

​

1. The design platform didn't feel like it had a direction.

2. The toolbar felt uncoordinated, leaving it to the users to organise it.

3. The user experience felt mixed up and unorchestrated as I tried to fit in the best practices of existing design tools to my designs.

​

This is when I decided to reiterate the design platform.

​

This whole redesign took me three months to build from scratch.

This is the latest design, and now the product looks clutter free and feels easy to use.

 

Both the toolbar and the right panel are contextual now.

Deliver

We are already alpha testing with 500+ designers and constantly re-iterating based on their feedback and suggestions.

Listing Page

The listing page is segmented into three columns - Org / Teams, Projects, Pages.

Nila-2.png

Editor

The editor consists of 3 parts - Create, Prototype, Share / Publish.

Prototype

In the prototype mode, designers can make simple transitions, overlays, overflows and also preview their output.

In collaboration, designers can add members to their projects as editors / viewers. Collaborators can view and edit published designs.

Collaborate

Deliver
bottom of page