Coming up with a easy-to use app that lets users create custom applications so that business tasks are minimised.
Say an employee has been working very hard and has logged in on a public holiday. Now he needs to fill in a form that can give to the manager for approval and at the same time get the thing verified. For this, a custom app can be built in the product that will help achieve this every time someone works on a holiday.
Here's a bigger example:
There is a non-profit association with 1000+ members and they are hosting an event where they need to collecting a lot of details from participating companies and analyze each individual set of data. On basis of this, the participating companies would be gauged on their efficiency and given a rating.
In both these cases, three things are required by the user/company to perform the task well: enough freedom to customise the form, re-brand it and navigate between the sets of forms.
This is where Zoho Creator comes in: It has been designed to create apps to automate vast data collection, create functions using business logic and come up with reports.
All of this with highly analytics the user can access from a dashboard (which is also customisable).
After this, they can go on to publish the app with a custom logo in the Play Store, App Store and MDM.
Using Zoho Creator, even a non-technical users can create a functional 'app' that they can distribute.
A created app in Zoho Creator has three components: Forms, Reports and Pages.
Forms: Used for inserting the primary data and modelling it. The user can add business logic to create functions in the form/s.
Reports: Show the data collected by the form/s.
Dashboard: Shows insights and detailed analytics of the created application.
The primary objective was to include customisation features in the tool so that 80% of business functions are automated. The biggest challenge in doing this was coming up with a UI interface that caters to both and high and low knowledge users.
Zoho Creator has been in the industry for the past 12 years. That meant enough user cases to research where I could identify issues across industries and user profiles.
The user base for the product is itself pretty diverse. I have come across senior users above 65 years of age who use Zoho Creator to make apps for their business. At the same time, it had young developers working on it who are very specific about the requirements and code the form functions themselves.
Users included SMB and enterprises. Industry verticals were mainly education, logistics, manufacturing, non-profits, retail and IT.
As a Design Lead, I decided to identify the problems that users of Zoho Creator across industry verticals were facing. My task was to come up with context-specific solutions for the same.
After going through a lot of support mails and calls, I ran a survey to zero in on some major use cases.
The home page of the tool required a clear app listing. The apps made using the product also needed a branding identity.
The product had to cater for all these industry verticals across all kinds of users.It needed to be less-developer centric and more user-friendly so that people from non-technical background could easily create something without coding knowledge. For example, functions like applying business logic for forms created into the apps, opened into a coding window.
Creating a report was difficult for a first-time user. There were four steps to design a single window, and it needed more flow. There was also no customization provided to users in report viewer, where the form data could be seen.
Dashboard creatiom with HTML and CSS language was highly programming-oriented. The process needed rework.
Lastly, Zoho Creator needed to have a presence in mobile and tablet platforms. A lot of users asked for a mobile app where they could access the created apps on the go.
Lets go into detail below.
Make the process of creating forms simple and straight-forward.
Introducing customizations in form options to suit people's different needs (high and low coding knowledge).
Make the process of applying business logic to forms code-free.
Simplify the process of creating a report, while also providing many options for recording the data with several layouts.
Make dashboard creation clear and simple. Provide the users with several creative options where users can customise the dashboard according to the needs.
Enable branding for the created apps to make them unique and enable their distribution through MDM and Appstore/Playstore.
The product had come with functions it would retain, but in a highly premature state. A lot of others needed to be added, some as part of existing features and some as distinct ones. Hence I had analysed on it and identified the constrains and create a strategy for the product which are CREATE, PERSONALISATION, DISTRIBUTION.
Introducting Creator 5
After a cross-analysis of the problems and goals, I came up with a strategy for the product. All the changes were considered into a bundle and a fresh revamp was launched as Zoho Creator 5. Creator 5 was one of the major launches in Zoho software suite.
These changes under C5 can be broadly grouped under three categories: Create, Personalise, Distribute.
The major breakthrough in C5 was launch of the Zoho Creator mobile app.
Creation is where all things start! The creation function of Creator, as namesake suggests, was central to the tool.
The work I have done on the creation components is listed below:
Forms are used for inserting primary data and modelling it.
The product has 30 different form fields listed in it, which the user can drag and drop into the center to start creating a form. For ease of editing, the field properties have been kept at the extreme right of the page.
So if I want to create a form, I have to select a field and then simply drag it to the created fields. After this, one can choose the field properties from the third column. I made sure the interface was clear and users could create forms free of any hassles.
The list of fields have been designed as big squares so that users will have enough space to handle the fields. The fields again have been divided into basic, advanced and special fields.
Reports show the data collected by the forms. For creating a report selecting the field is required.
User can filter the records in the report and also sort and group them. However, navigating around these can get pretty complicated and they may end up dealing with a lot of information.
This is where the AI helping hand comes in. The machine learning system while creating a report will identify the best matched fields based on the report name and situation and then it will automatically take inputs from there so that report creation is much faster.
There are multiple report layouts which will suit the user's business needs. These are platform-specific and we have analyzed and presented four types of record layouts for web and eight for mobile.
The previous Creator workflow lacked context. It was also highly complicated for a low knowledge user to understand and grasp the products.
A deluge (python) script was initially made part of a product, which allowed users to code the kind of workflow they wanted as per business logic. Since this was coder-restrictive, I decided to provide options in the tool that will let users decide when they want to kickstart the workflow.
Based on the user data base, four options were identified as widely used functions: while using a form, on a scheduled date, during approval process and payment process. All these were added in a new GUI window.
Now, while the GUI was interactive and easy-to-handle (just how we wanted it!) but we also had to keep the best of both worlds. So to not disappoint the coders, a new 'event using script' option was added that would help code-oriented users program functions into forms on their own.
The user flow has been designed to be a step by step in a COD (content on demand) format.
An interesting feed back we got here was clients mentioning how the Deluge (scripting) language was not intimidating at all even for first-time users who are non-coders.
I analysed several case studies to find a proper nexus between user requirements and features in the dashboard. I generated a predefined component of the dashboard that make the process of creating as simple as drag, drop and create.
The components were: Panels, Chart, Progress bar, Creator component, Button, HTML snippet and lastly Zoho Markup Language Snippet. Here's how it looked:
I worked on Zoho Markup Language (ZML), a client-focused XML-based coding platform. Users can insert specific components into the dashboard using this. ZML is presently in Beta stage, and will be rolled out to the other components soon.
Where effort changed into an actual app! The personalization options of Creator mainly allowed the user to program visual changes under a tab called design.
App listing selection
The old app listing was very flat in the sense that there was no individual recognition for the app other than the name. I added a search bar that would pop up only when the number of apps exceeded the viewport, to make navigation easier.
The latest created app will be shown top most in the listing for ease of access.
The earlier navigation did not have an easy flow.
In the construction window, say while building a form, user cannot navigate from report to builder or go into the dashboard directly.
Also, mobile and tab deployment of the product indicated that a new UI needed to be in place because the old sitemap would not sit in place, and instead feel tricky and complicated. So I have defined the navigation for common of all the components, User can navigation from any to any place.
Zoho Creator Mobile app
Expansions into mobile app demanded for an equally functional and customizable platform for users. I came up with a new layout that addressed contextual use cases. For example, while viewing reports, some apps demanded a card listing, whereas others required layouts with large images. Five types of App layouts were introduced to address the business needs, namely: Tab bar, bottom bar, list plain, list card and sliding plain.
I also incorporated hand gestures in the mobile app. For this, I studied mobile iOS anatomy and identified gesture and context for the actions to be performed.
I also included different app themes for more customisation.
I worked on a native app-friendly iOS user interface so that migrating users won't face adjustment issues. The listing page on the mobile app, for example, has been made similiar to the web app listing page for convinience.
I crafted a multiple-records layout where the user could select options based on their business and record. The report was again split into quick view and detailed view, In the latter user can configure as many fields as they want as compared to a maximum of six in the quick view.
The code architecture was retained for mobile and tablet platform. Here I faced a constrain of utilizing same UI component to suit the iPad screen. I solved it later by sorting out the navigation and ensuring that the iPad one does not look like an enlarged version of the iPhone.
Users can select a customised, personal app icon to represent the identity of their app. The icon stays consistent across platforms and can be a custom company logo as well.
There are also 50 + icons according categories to choose from. For branding purpose, users can select brand identity colour and put it into the pre-built icons as well.
Letting the world know about the newly created app.