Webforms - simplify UI

[janagombitova]

Context

As part of Cisco we aim to scale our remote data collection functionalities. Webforms are a big part of that. From having web forms running on all Flow instances for the past year (released in June 2020) we learned about the issues the implementation has in terms of scalability and usability. As part of Cisco we decided to tackle these issues:

• Scalability issues - this should focus on handling known bugs and the underlying implementation
• Usability issues - listed here below

Since the release of the feature to all Flow users, we have gathered feedback from partners either via support (coming directly from partners), direct partner calls (Jana during some parter feedback moments), and internal user interviews. All notes are here: https://docs.google.com/document/d/12y_p7Ybm_hp2IQZzM20VQLQzX-yU5tYPOLnT_X69NW8/edit#heading=h.7ffmus5fhgwr

Webforms users

We see two main use cases for Webfroms:

• an alternative to the Flow app - partner staff submits the data using web forms during phone-based interviews via their computers, or on their mobile devices as they have iOS devices or do not want to have to install the app and go through that workflow
• webforms are part of a webpage where the users filling in the data are the actual respondents

These two usecases show two different users:

• Salim (or Alphonso) - employees of the organisation itself, often the M&E or project staff often involved in the form design too
• Respondents - 'holders of the data'

Usability issues

Below are the issues identified:

• Question count
  • Currently we show the count of visible questions. This count can increase depending on skip logic. However, interviewed users found that confusing.
  • If the user is Salim, he knows the size of the form. But seeing a smaller starting count is confusing as he wonders if the form was not saved correctly.
  • If the user is the Respondent - they like to know the size of the form to know how much time and effort it might take.
  • Both users find it useful to know the progress and how much more there is left to do.
  • An idea was to instead of showing the total question count, to show the estimated time one needs to complete the form
• Password confusion
  • Especially for cases where Salim creates and fills in the data for the webforms, it is odd that he needs to put in a password, considering he himself created the form. Secondly, the webform can be shared via a website. Often the respondents need to log in to a website first in order to access the form so a level of user validation is usually already in place. However, there are cases, when password protection might be helpful.
  • An idea was to keep the password protection (with the predefined password to keep the implementation simple) but to make it optional. So by default, there is no password. Thus when defining the form and before getting the web form URL it could be an option to enable the defined password (similar to Lumen's dashboard password).
• Too much information in the screen - we often heard that the webform page presented too much information that distracted from the core purpose - filling in the data. For example:
  • the count of mandatory questions is shown twice,
  • users thought the arrow to which the side panel can be closed was actually to navigate to the previous group (then would not close the side panel as they found it useful to see the group overview)
  • users did not understand the pin icon and data point ID showing in the screen as this information is not useful (or needed) when submitting data
  • there is a white footer overlaying the questions and making the space where questions show smaller
  • accent is put on actions as clear and undo rather then on submit

Next steps

With this issue we will aim to improve on the overall usability of the webforms. @Kiarii can you please share your proposed redesign here?

Please note that the option to overview and download was not considered during our research and should be considered (its usability and need) as part of this work.

[Kiarii]

Here is the latest mockup iteration. For your interest, here are background notes from some back and forth with a couple of partner team colleagues.