Digital Forms, Tangible Connect

[vc_row][vc_column][vc_empty_space height=”50″][/vc_column][/vc_row][vc_row][vc_column width=”1/6″][/vc_column][vc_column width=”1/6″][edgtf_custom_font title_tag=”” font_weight=”500″ font_style=”” text_transform=”capitalize” text_decoration=”” text_align=”” title=”My Role” font_family=”IBM Plex Mono” color=”#333333″ font_size=”16″][vc_column_text]

UI Design
Prototyping

[/vc_column_text][vc_empty_space height=”20″][edgtf_custom_font title_tag=”” font_weight=”500″ font_style=”” text_transform=”capitalize” text_decoration=”” text_align=”” title=”Collaboration” font_family=”IBM Plex Mono” color=”#333333″ font_size=”16″][vc_column_text]

UX Design
Customer Support
Engineering

[/vc_column_text][vc_empty_space height=”20″][edgtf_custom_font title_tag=”” font_weight=”500″ font_style=”” text_transform=”capitalize” text_decoration=”” text_align=”” title=”Year: 2015″ font_family=”IBM Plex Mono” color=”#333333″ font_size=”16″][/vc_column][vc_column width=”3/6″][edgtf_custom_font title_tag=”” font_weight=”600″ font_style=”” text_transform=”” text_decoration=”” text_align=”” title=”Overview” font_family=”IBM Plex Sans” color=”#333333″ font_size=”24″][vc_column_text]

The form design project started as part of a new strategy for Formzero.in which realigned its business model to focus more on the academic front. Hence, to cater to the specific needs of the users, research was done to find out the pain points for the applicants while filling in the online applications. Several new challenges appeared on the completion of the research which were totally untouched before and had limited information on how to solve them. These challenges were specific to the Indian audience that had limited exposure to the internet. This drove the team to work on a solution which draws relationships from familiar concepts of forms for everybody, reducing the cognitive load and making it easier for the new users to complete their applications.

[/vc_column_text][vc_empty_space height=”10″][edgtf_custom_font title_tag=”” font_weight=”600″ font_style=”” text_transform=”” text_decoration=”” text_align=”” title=”New Users” font_family=”IBM Plex Sans” color=”#333333″ font_size=”24″][vc_column_text]

+ Rural and semi-urban youth applying for government colleges.
+ Parents applying for their kids’ admission.

[/vc_column_text][vc_empty_space height=”90″][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” simple_background_color=”#eeeeee” css=”.vc_custom_1548068233102{padding-top: 40px !important;padding-bottom: 60px !important;}”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][edgtf_elements_holder holder_full_height=”no” number_of_columns=”two-columns” switch_to_one_column=”” alignment_one_column=””][edgtf_elements_holder_item item_padding=”0 10% 0 0″ item_padding_680=”0px” item_padding_1025_1366=”0 10% 0 0″ item_padding_769_1024=”0px” item_padding_681_768=”0px”][edgtf_custom_font title_tag=”” font_weight=”600″ font_style=”” text_transform=”” text_decoration=”” text_align=”” title=”—Problem” font_family=”IBM Plex Sans” color=”#555555″ font_size=”18″][vc_custom_heading text=”Users with lack of experience of using internet and a clear disconnect between online forms and paper, thereby increasing the cognitive load to complete the application process.” font_container=”tag:h3|font_size:28|text_align:left|color:%23333333|line_height:1.6em” use_theme_fonts=”yes”][/edgtf_elements_holder_item][/edgtf_elements_holder][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row row_content_width=”grid” simple_background_color=”#ffffff” css=”.vc_custom_1548069307221{padding-right: 100px !important;padding-left: 100px !important;}”][vc_column][vc_empty_space height=”80″][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”6775″ img_size=”full” style=”vc_box_rounded” onclick=”link_image” css=”.vc_custom_1548069064133{padding-right: 50px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][edgtf_custom_font title_tag=”” font_weight=”600″ font_style=”” text_transform=”” text_decoration=”” text_align=”” title=”Research” font_family=”IBM Plex Sans” color=”#333333″ font_size=”24″][vc_column_text]

During the research we identified problems ranging from ease of filling forms to the challenges linked to every control type. Once the initial stage was completed we classified them into categories, making it easier to define the solutions by functional and aesthetical changes. All this helped us to work on the final structure and visual style of the forms.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”80″][/vc_column][/vc_row][vc_row row_content_width=”grid” css=”.vc_custom_1548069322758{padding-right: 100px !important;padding-left: 100px !important;}”][vc_column][vc_empty_space height=”80″][vc_row_inner][vc_column_inner width=”1/2″][edgtf_custom_font title_tag=”” font_weight=”600″ font_style=”” text_transform=”” text_decoration=”” text_align=”” title=”Observations and Feedback” font_family=”IBM Plex Sans” color=”#333333″ font_size=”24″][vc_column_text]

The key findings from the research revealed that a large amount of applicants filling the applications for government colleges were from small cities and villages where the internet penetration is low. The applicants were using public cyber cafes to fill the forms and the transition from paper forms to digital forms was quite overwhelming for them. Similar, trends appeared while going through the to customer supports logs where applicants were calling in to get support for simple problems. 

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”6778″ img_size=”full” style=”vc_box_rounded” onclick=”link_image” css=”.vc_custom_1548069075027{padding-right: 50px !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”80″][/vc_column][/vc_row][vc_row simple_background_color=”#eeeeee” css=”.vc_custom_1548832438088{padding-top: 60px !important;padding-bottom: 60px !important;}”][vc_column width=”1/6″][/vc_column][vc_column width=”1/6″][edgtf_custom_font title_tag=”” font_weight=”600″ font_style=”” text_transform=”capitalize” text_decoration=”” text_align=”” title=”Design Solution” font_family=”IBM Plex Sans” color=”#333333″ font_size=”30″][/vc_column][vc_column width=”3/6″][vc_column_text]

Based on the research and findings we decided to work on the core functionality of the forms and the overall design of the forms. To make things easier and relatable, we designed a system which directly related to the structure of paper forms with multiple blocks together. This approach reduced the length of the forms however, the initial design looked quite busy so we worked on a grid structure with rules of grouping the control types together for better visual aesthetic and ease of use. Several layers of assistive functioning were added based on common problems and mistakes by applicants while filling the forms.

[/vc_column_text][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_empty_space height=”60″][vc_gallery interval=”3″ images=”6862,6861″ img_size=”full”][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row css=”.vc_custom_1549009631827{padding-top: 50px !important;padding-bottom: 50px !important;}”][vc_column width=”1/6″][/vc_column][vc_column width=”1/6″][edgtf_custom_font title_tag=”” font_weight=”600″ font_style=”” text_transform=”capitalize” text_decoration=”” text_align=”” title=”Control Elements” font_family=”IBM Plex Sans” color=”#333333″ font_size=”30″][/vc_column][vc_column width=”3/6″][vc_column_text]

The control elements were designed to have a direct impact on the form filling experience to reduce the mistakes which we observed during our research. One such example was the “date of birth” field where the applicants used to hover over the date elements (month, year) but didn’t click on them to be registered in the system. This led to default date being saved on the application, creating a huge problem in processing the them, since the date of birth governs a lot of criteria based decisions. Hence a design with visual interface for the date selection was introduced, giving direct feedback to the applicant while entering the dates along with important info about application, exam dates etc. Similarly, other control elements were crafted for better experience along with feedback system (tips and suggestions) while entering the data in the fields.

[/vc_column_text][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row row_content_width=”grid”][vc_column][vc_empty_space height=”60″][vc_gallery interval=”3″ images=”6872,6868,6873,6871,6870,6884,6891″ img_size=”full”][vc_empty_space height=”60 px”][/vc_column][/vc_row][vc_row][vc_column width=”1/4″][/vc_column][vc_column width=”1/2″][vc_custom_heading text=”I like working on interesting projects with responsible humans.” font_container=”tag:h5|text_align:center|color:%23777777″ use_theme_fonts=”yes”][vc_column_text]

Let’s Connect! 🙂

[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row]

Tags:
Prev project Next project
Scroll up Drag View