banner+3.jpg

Zoho Forms

 
banner.png

UX Case Study: Zoho Forms Mobile App 

People need information constantly, whether it be for work, school or leisure. They are always on the search for a way to save and consume the information in a easy-to-use and innovative medium. 

Zoho Forms is a form-building tool with an objective to quickly collect information from people. It includes sharing , collaboration and other features. The challenging part in designing this was coming up with solutions that could address both B2C and B2C needs.  

In today's fast paced life, people need their work on the go, and require functionalities on their mobile. A business person should be able to access the forms on the fly without the need of an active internet connection, say even if they're on a flight.  Keeping this in mind, I came up with a design for the Zoho Forms iOS and Android mobile apps that will be easy to use and convinient.  

 

Research

I have picked the verticals that they are using the form as their one of the major element, the list be like

  • Courier Service

  • Restaurant

  • Saloon

  • Car service station

  • Ecommerce company

ZOHO Forms will help the Ecommerce company be like

  • Support enquiries

  • Warranty claims

  • Return pickups

  • Product Feedback

  • Delivery acknowledgement

They don’t need to store any of the paper files and just imagine everything would be created and controlled in mobile. It will reduce the error percentage for the users.

Based on sources we tried to arrange meeting with few of the managers and IT department of the business and I understood the work process of them and how paper form plays the role in business and how they are using it and what are the troubles they are facing.

Based on the data we generated a survey and we ran geographically to get the data insight to understand the value better.

 

Problem

  • All business records are in paper form which is tough to manage

  • Transparency between the salesperson and the manager is not visible.

  • Tracking the business record are really tough in form of paper

  • Collaboration is not happening.

  • Accounting is not easy and timing consuming.

  • SMB company are not ready invest their money on SRP tool.

  • Spreadsheet is only use for the internal purposes.

  • A restaurant or a local business could add logic at the end of a form to collect bill amounts without need of a separate billing software.

  • When a user enters a record, it will come into the cloud after which it back up in the device as app data. This enables users to access form data anytime on mobile without any internet.

 

Mobile App Functionality 

We wanted to build an app that would help solve most information collecting problems, from small organizations to large. Here's a quick glance at the intended functional purposes of Zoho Forms: 

  • A restaurant or a local business could add logic at the end of a form to collect bill amounts without need of a separate billing software. 

  • It's easy use feedback forms for teams and organizations. 

  • The forms can be anonymised and shared via email. 

  • For events with registration deadlines, a date can be set for the forms to be active, after which it will automatically stop accepting responses. 

  • The app stores data offline for access on the fly. When a user enters a record, it will come into the cloud after which it back up in the device as app data. This enables users to access form data anytime on mobile without any internet. 

 

Onboard.png

Design Goals  

Before I started working on frame for the iOS app, I identified the following problems: 

1st Problem: I wanted the mobile app to be handy and self-sufficient. To do this, we needed to give more control to mobile users.

I had to build UI so that it would fit into the mobile screen and allow creation and distribution of forms in the app itself. 

Solution: After research and few iterations, I came up with a design solution that would allow the user to create as well as view, fill and distribute forms. 

Hence the real estate constraint on the mobile platform was sorted and users could now carry out the 360 degree wheel of functions (creation, collaboration, publication and sharing) in the Zoho Forms mobile app itself. Now a user can create a form, collect data, consume and collaborate- all from mobile itself.

2nd Problem: The next target was mapping a clear flow inside the product between the creation functions and the consumption functions. 

Solution: I created a home screen which provided users with enough options. An add icon on top of the screen will lead users to create. Once the form is created, after the user taps on it, it will directly jump into accessing the records. 

For the created forms, one has to swipe right for editing the same form. 

3rd Problem: To create a form in the tool, one requires fields. Now the number of fields in the tool may be vast when it comes to the mobile interface. The display for phones had to be edited to do justice to the limited screen space. 

Solution: To sort out the listing for phone screens, we introduced the iOS UI scroll controller. We also split the fields as 9x3.     

We applied the grid system in listing the fields, vertically and horizontally with minimal space. It accommodates 8 fields in a screen at a time, requiring two more swipes to see the balance field sets. 

Some other tweaks I added: 

  • I introduced phone camera based visiting card scanner for the so that cards can uploaded into the system directly instead of manually typing them out. 

  • Provided a seamless user flow to create and fill out forms offline. The web and mobile app are in sync to stay connected. 

One thing I religiously followed through the entire app design was adherence to the standard iOS guidelines. This is to make sure that a user won't have to struggle and it will give the feel of a native app. 

 

1. New Home screen  

This is what the final home screen of the product looked like : 

1. The Home screen for the mobile app has a bottom bar split into five options: Forms, Reports, My Tasks, Approvals and More. There is also an in-line search bar on top for quickly accessing forms. 

i. Forms: It the primary window for viewing the forms. There are two categories: My Forms and Shared Forms. Under the first, the forms created by the user are listed. Shared includes those shared via email and social media sharing (Facebook, Twitter, LinkedIn). 

ii. Reports: The created reports will be listed here based on the categorization of the forms. One can filter reports based on forms as well. 

iii. My tasks: The records can be assigned as a task. The assigned records will be listed in the My Task page. 

iv. Approvals: It is a process where the hierarchy-wise reviewing and approval of data takes place. 

v. More: Offline app data can be accessed from here. One has the freedom to customise which app data to store. Flat listing of notifications like addition of records will be displayed here, including touch. It also has an option for configuring the 3d touch. Lastly, settings includes several functionalities like giving passwords to secure form data, themes for the app, controlling order downloads and access feedback, login and signup details. 

 

2. Create

The create button is positioned in top right of the home screen. Using this one can: 

  • Create a form from scratch

  • Pre-select a format for the form out of any of the pre-existing template 

     

 

3. Swiping right on any form brings two other actions: 

Tapping on this opens up the form editing window. The following components come on the screen: 

A. Builder 

Tapping on this opens up the form editing window. The following components come on the screen: 

  • Position of fields

  • Creation of fields

  • Rearrange the fields

  • Field Properties

  • Delete Field

 

More

Tapping on this the user can jump to a quick-access menu with several form controls:

  • Dedicated page for the list of the menus

  • Perform one action at a time

  • Email address sharing 

  • QR Code sharing 

  • URL sharing 

  • Social media sharing 

 

View/Add Records

Tapping on a particular form gives user access to the entries made for the forms. The screen is divided into two windows: My Reports and Shared Reports. From here users can: 

  • Analyse the data

  • Search across the data

  • Filter the data

  • Choose the field which you want to show in the report

 

Conclusion

Combining the three functionalities of create, collaborate and share on the mobile platform turned out to be the next big step in the expanding the width of Zoho Forms. Presently I am working on a payments via forms feature in the mobile app where a payment gateway is configured int the function.