Redesigning Forminator | UX case study
An application to generate Forms, polls, and surveys for precisely targeted audiences i.e. Residents of the IIT Roorkee campus.
About us❤️
At IMG, we discover, emphasize and fulfill the digital needs of students as well as faculty, be it the count of attendance, fear of missing important notices, peek pressure of internships and jobs, or sending out heart anonymously to your crush on valentines.
About the Project 💻
Forminator is a pre-existing application on Channel i ( official intranet portal of campus ) used by professors to keep their academic forms segregated at one place, that can only be accessed by their chosen audience.
👀 Fun fact: It was introduced well before Google forms came into existence.
Why Redesign? 🤔
Previously, Forminator was designed in such a way so that professors could make forms that might comprise of a survey, poll or a medium for assignment submission .The existing design does not match the demands like notification for new forms, retrieving filled responses and had various user experience, usability, and accessibility problems as follows:
1. File submission == Polls == Custom form ? ( Ans. PARADOX)
In the current Forminator, 3 types of forms could be created by faculty :
- File submission: For accepting assignments or any other documents.
- Poll/Survey: It is used often for a decisions to be made withing a class or department through voting.
- Custom form: It consists of a form to collect general data of the students.
They seems pretty different from each other however all it does was to prefill form type field, and providing 3 options to start confused users, because it caused increase in cognitive load( Yup one can also justify it with Hick’s Law ), hence providing one Affordance for creating a new form will reduce the cognitive load and efficiency of users.
Also users found it difficult to comprehend these icons as the entry points for creating the form and even mistook the heading “Create forms” as the link for creating a new form.
So what’s wrong with it apart from increasing Unnecessary scroll, Lack of accessibility, and bombarding a user who just came to see his published forms with icons missiles, Well it’s more than enough to irritate our users.
2. Progress tracker
It is a good practice to keep users updated about their progress in the task they are doing, but it should be in coherence with other elements else it might lead to problems like in this case where the stepper’s Icon didn’t have a link for navigation, but user tried to use them to navigate which can be justified by the placement of back button at the bottom left of the page ( hence difficult to reach ) and the breakage of the cognitive pattern of using Icons to navigate that we ourself introduced to users when they find their way that had to click on the icon to start making a form.
3. Immortal forms 👻
There are certain forms like Fresher forms, Convocation form, Bhawan form, etc. whose audience changes because every year new students enroll and pass out students leave the institute, hence a form admin has to make a new form every time it’s audience change.
Current Forminator neither accept the forms without expiry date, nor once set can be edited. Once a form is published, the publisher is only allowed to download a CSV of responses 🥲
A form without a expiry date, will solve this as a form with audience set as Xth year, or Y bhawan, the students entries are changed in database in global level at Institute server.
4. Other Usability issues
- The current system is mainly comprised of rows, which makes it difficult to use it over a small device i.e. Not responsive
- There is no way of retrieving your responses for a filled form.
- Faculty can not share any corresponding link for the form but rather tell and remind verbally about the created form.
- Student must have a 6th sense that he/she has a got new form to fill in the dashboard because they are not notified about a new form until they open formulator on their own 6th sense intuition 🥴
Research 🧐
Identifying the User
The point of a form is to collect certain personal information from your Audience, it can be an email address or their perspective on a certain topic. But why would a user share their details with you if the form they’re being asked to list their information on is difficult to use, hard to understand, or visually unattractive to even focus ?
Similarly, would an owner/creator of a form be able to achieve their objective if the provided information is in a cluttered way, the format of data being too bad to compare responses, discrepancies in final form between users and form owner because of bad UX?
The Form — Accessibility
Set of the questionnaire is the first thing that pops into our mind when we think of a form, however, in user research that I conducted via remote interviews (thanks 🙏 to Covid19 ), I found the following factors affecting the cognitive decisions of users before filling a form :
- Basic details of forms
- Degree of importance
- Author of the forms
- Validity
Once a user has onboarded on a journey of filling a form, we can save plenty of time and lessen the risk of frustrating them by :
- Autofill: It simplifies the form completion process. By enabling autofill, we are not only ensuring valid information is being submitted, but we are also saving user’s time, streamlining the form completion process, and helping them remain as efficient and accurate as possible.
- User-friendly Form skeleton: The ease of noticing, comprehending, and finally filling the form plays an important role in the journey of a form. If fields aren’t connected to each other (eg. Name, Address), Arranging form fields in single-column format is very efficient, It allows effective scanning and limits errors or missed fields as it helps viewers to scan the form in one go. It is easier to associate them due to their proximity. Also, the top-left aligned labels work pretty well in this case.
However In case of multistep forms, buttons placed at right corner also indicates sense of progressiveness i.e. Next step because right direction/ right sided arrows etc are often associated with moving forward ( eg. Gesture interactions, mousepad interaction to go back & forth on a browser etc.)
- CTA positioning: We have been using buttons in digital and physical machines. There had always been a CTA associated with them, and you are familiar with it, so here is a simple question? Which of the below is better?( I know, I just sounded like an Instagram post 🤦♂️)
Your answers could be “I like button on right, its more visually appealing”, “I like button on left because of the eye-tracking like in above case”, So which is it? Both seem right at their perspective, but let’s take a peep at what our surroundings teach us about this?
The first action is positive, the second is negative or neutral. This is the natural order of things. You start something as the first action, and finish as the second, even in our case, while filling a form, the primary action would be submitting it( Though not giving a cancel option also makes sense, since for filling the form we don’t have a negative action i.e. Delete )
- Information sensitivity: This has always been an issue or at least puts a question mark in our concise before sharing our personal details with “someone”, but how do we decide if we want to share some particular details while having a conversation with “someone”, well the answer lies in that “Someone”, because the familiarity or the sense to whom we are sharing our data makes us easy and help us to decide which data we should share.
Mentioning the Form Author ( A person or a group ), designation and department will help users to familiarize and can develop trust, helping them to answer the questions with clear minds.
User flow 🕸️
The user flow helped me check the continuity of the product, and it allowed the developers to get started with the backend while I utilized that time to work on the wireframes and mockups.
I proposed the flow and had hours of brainstorming with faculty and some administration members about how their needs can be met.
Wireframes and Iterations 🕵️♂️
Dashboard
As mentioned above, Dashboard will mainly comprise of: My forms, Published forms, draft forms, and a CTA for creating a new form. To make it compatible with mobile, I decided to use cards instead of rows to represents the forms.
With Jakob’s law of internet UX in my mind, I was exploring various user interactions with different states of an element that is used often by our primary users i.e. Students. And I realized Instagram stories are a really good example where a user can identify their already seen stories by a colored outline and used it as a familiar interaction.
However, during interviews with the users, considerable users weren’t able to comprehend it 👀 and were unable to understand the difference in states of a form ( i.e. New, opened, filled etc. ), At the initial stage, I wasn’t able to grab, I was baffled where I went wrong but later in further research I found out possible reasons as:
- The domain of Instagram stories is different than that of forms, hence users were unable to recall it.
- Users were getting confused when there were more than 2 rows of cards, because just using an outline, without an outline and different shade was too much for users to process because of Visuospatial Sketchpad in perceptual storage model of humans .
Then, I tried to make a more descriptive design which would reduce the cognitive processing, where each card can be tagged for New, filled with different appearances so users don't need much time to process it and leading them to make mistakes frequently and it worked like charm in testing even with more than 2 rows of the card.
Create Form
Creating a new form is consist of 4 steps :
- Form intro : Basic details of form comprising title, description, expiry date.
- Form Fields : Comprises of questionnaire of forms.
- Form Audience : User decides the set of people that should be notified and allowed to fill the form.
- Form settings : It comprises of the final property of form like accepting anonymous responses, accepting multiple responses and allowing audience to edit their responses.
Analysis of Form Responses
This is the last phase in the Journey of forms, it’s the reason why a form was created in the first place so that we can get the responses and hence assess them with respect to the task.
Final UI and Prototype 💻
After doing the required iterations in wireframes, I started to make the UI mockups, since at IMG, we use Semantic UI for development, so I tried to use most of the component already provided by it, hence also making it more consistent . However in terms of colors, other apps at Omniport (official intranet portal of campus ) are mostly monotonous in color hence I had to do the same.
I have used Blue color as primary color . Also Research shows that Blue color calls to mind feelings of calmness or serenity. You can use prototype here.
UX writing and Visual assets 🎯
UX writing helps us in crafting UI copy that guides users within a product and helps them interact with it, During testing, I have identified various such points where Users were seems baffled about next steps or why things not working as they wanted due to large gulf of execution.
1. Onboarding Screens
Using a new app is like meeting someone for the first time. The initial interactions could be awkward and confusing or there could be an instant connection. In both of these settings, first impressions matters a lot, and we can educate the user about the different functions.
- Using their name for welcome creates a motion of familiarity.
- It can educate users and give a better clarification during early stage interaction.
2. Creating form fields
Creating questionnaire is the most time taking step in form journey, it needs to be smooth and intuitive. in early testing, I found out some pain points of user :
- New field affordance : Some users didn’t find tapping on field type from field table as starting entry point, and mis clicked however once noticed it was easy to use, but in order to avoid it and making interface invisible( metaphorically) between user and task, I added a visual representation of what they are supposed to do.
- Tooltips and additional information : There were measure taken to avoid data exploitation through this app, like for predefined fields, users are not allowed to change title(label) of the field to avoid user’s from exploiting data of the users, and to avoid user’s to figure our why they can change title of some fields but not for predefined fields, I have added tooltips and default information even if user miss tooltips.
Similarly considering some other case like some fields which are defined for students but not for faculty and vice versa. hence for a form where form audience comprises of students as well as faculty fields will only be visible to respective roles, which have that associated data.
eg. designation, starting date are only associated with faculty and administration, similarly designation, starting date.
Scope for future developments 👀
Adding templates: To facilitate form creating process, providing pre made template according to fixed audience would save time and will be more efficient.
Allowing students to make form: Currently only professors and administration are allowed to create a form, However students are not allowed (Currently we have provided feature that students can contact IMG if they still want to create a form and permission would granted for time being.) because administration stated that it might led to data exploitation, however providing templates like Freshers template, Class representative template, campus group templates etc, where audience would be restricted according to template, will save us from possibility of data exploitation, so even students would be allowed to make forms.
What I learned 📝
Forminator is a extensive app that is having an impact on 10K users in IIT Roorkee, designing it was a task of huge responsibility where not only I had to design and develop solutions but also had various restrictions from administration. Through this semester-long and mind storming process , I have learned plenty of things like Qualitative & Quantitative iterations, interpretation of heatmaps, and WCAG accessibility guidelines.
