Zoho Sheet - An app to view, edit
spreadsheets on your mobile

About the project

Zoho Sheet is an online spreadsheet application that lets you create, share, collaborate and publish spreadsheets from anywhere. Given the role of product designer, I was responsible designing for its mobile products. The application was designed to cater in the platforms of iOS and Android and to accomodate various form factors in each platform. The application is designed with native guidelines and components to comfort the users.

Project Type & Involvement

Work in Zoho Corp - Product Design

Timeline

Jan 2016 - May 2017

Platform

iOS & Android

Challenges & Goals

1.To design a complex saas product on mobile platforms.
2.Build a platform agnostic software that adopts to various Operating system and its form factors.
3.An application adhering to the native guidelines of each platform.
4.Design an application which is simple and usable across all the platforms.

Conceptualization and Sketching

After finding out the basic requirements of the user, the key features were identified and ideated. Sketching low fidelity wireframes helped us as we followed an agile method to quickly get an idea of the how the product is going to shape.

Article on the process

Designing my first platform agnostic SaaS product.

"The inside process and takeaways from designing the first version of Zoho Sheet — a SaaS based spreadsheet application on mobile platforms."

Key Features

1.View, Edit spreadsheets on the go.
2.Collaborate in relatime and share your spreadsheets with users.
3.Formatting and calculation options to generate complex data.

Framing a design system for multiple platforms

A design system was created for each operating system incorporating the set of visual elements like color, typography and UI components. These components were, in turn, converted as symbols in sketch to use the elements throughout the application. This not just helped me in design but also allowed developers to reuse componenyts increasing code efficiency.

App Screens

Designing the function bar

The function bar is the one on which the user inputs data, formulas etc. There were many iterations of the fuction bar as this is one of the primary component and where the 90% of the users land when there is a need to input data. The fuction bar was kept at the bottom for the comfort of the the users eyes and also increase reachablity for the user. Also, the user need not juggle his eyes top and bottom to have a look at the function bar and the keyboard.

A secondary custom keyboard

A custom keyboard was required in order to make the data input efficient and easy. We spoke to spreadsheet users of all types from power users to naive users. We finally zeroed 20 symbols as the most wanted symbols and iterated multiple sets of keyboards for both the iPhone and iPad using them. Two variants were made as prototypes and tested with users of the above mentioned categories. A/B testing both the keyboard proved to be servinf the purpose but not in an efficient way.

The smartbar - a smart solution

The concept of custom keyboard was not completely efficient as the user has to toggle back and forth for the normal keypad and the custom keyboard. Hence we reiterated to a better solution which we called the smartbar which can intellignetly double as a formula suggestion bar and the scrollable symbols bar. This also allowed the user to use the default keyboard and symbols at teh same time.

iOS App Screens

Android App Screens

The application was designed adhering to the material design guidelines with bold colors and typography and imagery with native components. Few components were custom designed to accommodate the needs of an interface or a feature still maintaining the coherency of the product.

Evaluating interfaces and usablity

The people whom we involved in evaluating the solutions involved people both new spreadsheet users and power users who were regularly using spreadsheets in their day to day tasks. Each user was given the same task sheet with different variants of the user interface to carry out A/B testing and multivariate testing in order to determine the finest one in terms of usability and functionality.