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

Overview

Zoho Sheet is an online spreadsheet application that lets you create, share, collaborate and publish spreadsheets on the go. Given the role of product designer, I was responsible for designing the mobile product for the existing web application. The application was designed to cater in the platforms of iOS and Android and to accommodate various form factors in each platform. The application is designed with native guidelines and components to comfort the users with a familiar interface and navigation.

Project Type & Involvement

Work for Zoho Corporation - Product Design

Timeline

Jan 2016 - May 2017

Platform

iOS & Android

My Role

I was a solo product designer working on the mobile products right from scratch by strategising, conceptualizing, designing and delivering the hand-offs to the developers working for multiple platforms. My primary responsibilities included defining the product strategy, the vision for the product, wireframing low fidelity designs to prototyping high fidelity designs and collaborating with the product managers and developers by managing the entire design lifecycle in bringing out the product live.

The business need for the application

1.To design the Zoho Sheet web product on mobile platforms.
2.The web app users demanded a mobile application ASAP.
3.Ship the product sooner to onboard thousands of web users to the mobile product.
4.Design an application which is simple and usable across all the platforms for the users.

Designing the Agile way

The product was meant to reach the users as soon as possible since this was the first version of the product and the evolving mobile world demanded a need for it. Hence, the agile methodology was defined to bring out the product quickly. Each step of the process was very quick and at its best pace contributing to the development of the product. The agile methodology process is as shown below

Learning about mobile users

It was important to know about mobile users before designing the product as the users in this category are much more different than desktop users. They want to get tasks done as quickly as possible and used it whenever they don't have access to their desktop or web application. Users need to accomplish their goals quickly and efficiently. Some qualities learned about mobile users are below.

Categorising and inquiring users for valuable insights

Initially, we identified and talked to some spreadsheet users and categorized them into three classes and aked the question of what would be the most used features by them on daily basis in a mobile spreadsheet software to each category. The users were primarily web users and also who were using alternate mobile spreadsheet software currently. These answers were the base to start designing features for version one.

1. Beginner

Uses spreadsheet atleast once in 10 days

Most users wanted to view the shared spreadsheet or use basic formatting options in the application. They wanted the maximum real-estate in the application to view the spreadsheet and share the same with collaborators and export it in a readable format(i.e)PDF.

2.Mid-Level

Uses spreadsheet atleast once in 3 days

Users in this category used to view, edit or share spreadsheets when they were away from their computers. Most of the users frequently viewed the existing spreadsheets created from their personal computers and preferred to have options such as alignment, text colour, cell colour and some minor functions & formulas.

3. Power Users

User spreadsheets everyday

These people were the major target audience and the important user group who does everything from their mobile. This user group were power users whose everyday work depends on a spreadsheet. They wished to have at least basic formatting, sharing, collaboration and formulas & visualizations to apply to their data.

Key Features identified

1.View, edit spreadsheets on the go.
2.Collaborate in real-time and share your spreadsheets with a team or other users.
3.Formatting and calculation options to generate complex data.

User-Flow Diagram

Designing for the user experience began from sketching out a typical user journey based on the accomplishment of specific tasks within the app. Once the user journey had been established, the team began to unpack the design flow for general and specific use cases.

Conceptualization and Sketching

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

Low-Fi Prototypes

The Low fidelity prototypes helped us take the sketches to a next level but a step before the high-fidelity mockups. Simple prototypes were of great use in identifying components for framing the design system and also to get an initial feedback from the team before we stepped into concentrating on the visual design which required a mamonth effort.

Read the detailed product design 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."

Framing a design system for multiple platforms

A design system was created for each operating system incorporating the set of visual elements like colour, 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 components increasing code efficiency.

High Fidelity Prototypes

View Spreadsheets

The primary function of the application that most users expected was to view spreadsheets when they are on the go and also that was the first basic feature we built and laid the foundation to the product.

Format/Edit Spreadsheets

Almost every user from the inquiry expected the basic editing functionalities to a spreadsheet application like text style, colours, merge cells etc and we made sure that these are the next layer we are going to build over the foundation that we laid.

Collaboration & Sharing

Collaboration and sharing is the most important feature that every document application should have which allows users to quickly share the spreadsheet with their team members or other users when they are on the go. This allows them to review and make quick changes if any and instantly share it. Also, live collaboration allows the user to co-author a document efficiently with ease.

Calculate using formulas

Being a vital feature of every spreadsheet application, ormulas are used to perform calculations that are required to facilitate the understanding of data. There are over 250 functions to choose from for calculating complex data. Although beginners and intermediate users don't use formulas as much as power users on mobile platforms these quick functions are handy when there is a need.

Challenges in designing some important components

The function bar

The function bar is the one on which the user inputs data, formulas etc. There were many iterations of the function 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 function bar was kept at the bottom for the comfort of the user's eyes and also increase reachability 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.

Analysing the competitors

If you are a spreadsheet user then this might be the most important component you will use. Most of the applications had the function bar at the top same as the desktop applications. But this solution was not efficient as the user needs to juggle his eyes back and forth for the input and the function bar.

Solution

The thought process was to place the function bar in a not disturbing place when the user is viewing, but also to be in the right place when the user wants to input data and also to be close to all the input actions like the keyboard, confirmation button etc. The solution was to show the function bar at the top which they can enable or disable in the menu when viewing and bring it to the bottom when editing which makes it easier for the eyes to view and hands to get all the inputs easily.

Designing a custom keypad

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 novice 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 serving the purpose but not in an efficient way.

Iterating multiple solutions

We worked hard on it and started exploring the solutions for multiple platforms, formfactors and orientations. The whole process consumed atleast a month to zero in on the solution which would be suitable. The developers did have a tough time to develop a few solutions roughly for us to get an idea. We even did an internal testing of how the users were able to acheive thier goals quickly. But we figured out that the users were concious when switching keyboards and was not naturally comfortable doing the same. Hence we thought of an alternate solution to this.

Solution

Although we iterated multiple solutions for the custom keypad, the users always felt that there was an extra step to use the custom keypad which made them deviate away from their goal. Hence we came up with an idea called smart bar where the sheet tab converts into a custom symbol set and formula suggestions contextually. This naturally allowed the users to enter symbols with easy without the need to switch keypads often.

Leveraging the power of native platforms

iOS application

The iOS applications followed the Human Interface Guidelines and the components were based out of the native components to comfort the user with the familiar elements of the platform. Also, this helped the developers to quickly develop the application since they were available already and required a minimum effort yet and an efficient one. The application was also integrated with all the native add-ons.

Send documents via iMessage

Zoho Sheet was the first application to allow users to send spreadsheets via iMessage. Users can send documents to other iOS users through this. The users will be able to view the spreadsheet sent to them even if they don't have an application through HTML rendering.

Widgets | 3D Touch

The widgets provisioned users to access the most used spreadsheet without having the need to open the application everytime which reduces an extra step for users who are constantly accessing the same spreadsheets every day. The 3D Touch functionality also provides users to quickly create a new spreadsheet or access their favourite spreadsheet at ease.

Splitview on iPad

The Split view enabled users to bring documents, images, text directly into the spreadsheet by just dragging and dropping elements minimizing the need for the user to switch between application to bring in elements they need inside the spreadsheet.

Android application

The application was designed adhering to the material design guidelines with bold colours and typography & 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.

Multi-window Support

The native multiwindow support provides the user an ability to simultaneously work on another application while working on Zoho Sheet. Also, when there are more than one spreadsheet open they are opened as separate activities facilitating the user to work on multiple spreadsheets at once. Thanks to the engineering team who helped in acheiving this. :)

Quick Actions & Homescreen widgets

The widgets provisioned users to access the most used spreadsheet without having the need to open the application everytime which reduces an extra step for users who are constantly accessing the same spreadsheets every day. The 3D Touch functionality also provides users to quickly create a new spreadsheet or access their favourite spreadsheet at ease.

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.

Product Launch video

The Impact

Zoho Sheet's iOS version was launched in May 2016 and the Android version on December 2017 that onboarded multiple web product users into the mobile product. Receiving almost a 90% liking from the people who have used the product, it was a big impact competing with the tech giants in the same industry. Also, the app was a part of the Zoho One suite comprising of the major products from the company. Here are some reviews found on the respective platform stores

Version 2

The version 2 of Zoho Sheet involved a lot of feature additions which could transform the way spreadsheets would work on mobile platforms and a small visual overhaul which supported the then latest iPhone X. Also, the application was integrated to support Apple Watch which was used for quick comment replies and more. I could not disclose more as a lot of features has not been built yet. To know more drop in a mail.

Key takeways & Reflection

1.Had an opportunity to work as a the only product designer for a complex SaaS product.
2.Experience designing for multiple platforms and multiple form factors.
3.Understanding platform guidelines and deliverables.
4.Knowing the inside happenings of an app development process. 5.It was heart warming to see thousands of people using and appreaciating the product.


Like what you see??
View my résumé, follow me or contact me below

tcsreeni93@gmail.com