Form builder

Lyceum Health improves patient care by linking doctors, patients and the pharmaceutical industry.
‍
I designed our company's form management solution, enabling us to collect relevant patient data efficiently.

Platform

Desktop

collaboration

Product Manager, Lead Engineer

duration

2 months

category

Form management, Enterprise software

The Problem

The company needed a way to digitize healthcare forms in order to launch our new product (RxNexus) and improve clinic workflows. I lead the redesign for our company's form management software, enabling us to enter data about a new form and/or review, edit or delete an existing form (CRUD).

The Solution

The form production process involved taking paper/PDF forms -> Creating them in our Internal Form Builder Tool -> Outputting them in our consumer platform, RxNexus.

Research

Key Takeaways from talking to our current users:

We plan to reuse questions across different forms.
We need a way to handle sort order of questions.
An explanation of what form parameters were needed and their functionality.

Competitive Analysis

Features to explore:

Drag & drop - common way to manage the sort order of questions within a form.
Tabs - a good way to organize all of the different parts of adding a question.
Side menu or floating toolbar - common ways to manage/add different parts of a form.
Question card - each question was separated in their own cards.

One thing that I noticed was that a lot of these form builders didn't have a way to reuse questions across forms, which was something that we were trying to do.

User Flow

We decided to create questions separately from the form (like a question bank) because:

If we are reusing questions, what would happen if we change it in one form? Would it change in all the other forms where that question exists?
Less overwhelming if you didn’t have to create the questions while building the form.

Feature 1 - Managing questions in our form builder

Forms consist of multiple questions.

Decision 1 - How questions appear within the form builder

Question card in it's preview state

As you can see, each question is separated in it's own card to provide hierarchy, make it easier to browse, and provide a clean way to contain all of the actions related to a question in it’s designated card. This card state is a preview of how a question would appear when being filled out by a user - they would only see the question, question description, and question options.

Question card in it's edit state

For users that are creating a question, there are a lot of other parameters that need to be filled out for functionality, but aren't part of the front-end view of a question. I decided to add an edit icon on the top right of the card as a way for users to open the expanded/edit state - when clicked the card would open similar to the functionality of a toggle. I decided on this interaction because I didn't want to navigate users away from the form to view details (i.e., on a separate page).

Decision 2 - Group question elements using tabs

Why tabs?

Reduce vertical scrolling
Group question elements
Scalable if we need to add more information

Decision 3 - Presenting optional content

We needed a way to add follow up questions (which we're calling feedback) for each question option that could be selected. However, this content was not mandatory.

Option A - More menu

More icon, select “show feedback” and table would appear.

Pros:

All the feedback would appear at once, less clicks

Cons:

Extra scrolling when all of the feedback tables were shown
The action is a bit hidden behind the more menu

Option B - Modal

Using icons to open modal with feedback table.

Pros:

Can focus on one feedback at a time
Get rid of the 3 dots menu

Cons:

Devs were not a fan because they said it was harder to save data in modals
Couldn’t see which option you were working on (Usability heuristic)

Option C (Solution) - Accordion

We decided to have the feedback table open like an accordion, which would be triggered when the user clicks on the feedback icon. That way you could only open one question option’s feedback at a time, which made the page a lot cleaner, and reduced scrolling. The accordion also worked since this content was optional.

You can interact with the prototype below!

View prototype full screen

Feature 2 - Adding form components

A way for users to build forms by inserting form components (think of new questions, attachments, categories, and sections as building blocks put together to create a form).

Decision 1 - Add components with a floating toolbar

Going back to my competitive analysis, I was mentioning that we were considering a floating toolbar or drag & drop sidebar.

I met with my PM and lead engineer for feedback, and we decided to go with the floating toolbar, which always appears below the active component being worked on. This was to ensure users would know where a component was being added.

Here are some of the reasons we went with the floating toolbar instead of a sidebar:

The drag and drop functionality of the sidebar would have taken more dev time.
We did not have enough functionality to list in a sidebar
The sidebar conflicted a bit with our other sidebar on the left, which we were using for navigation between other pages.

Floating toolbar is always below recently added question

In this example, the floating toolbar containing the components is below the second question card since that was the most recently added question.

Floating toolbar moves below active question

If I go and click on the edit state of the first question, the toolbar would float beneath it since that question is currently "active" and the toolbar always follows the card you are currently working on.

Decision 2 - Adding categories

Categories helped determine how questions were going to be grouped on the form. I decided to add a wrapper/border around all questions contained in the same category so that users knew which category they were working within.

Final Prototype

Feel free to navigate through the prototype below:

Feedback

A few months after launching, I got feedback from my coworkers about the most important information they always check for when creating forms. Because some of this information was hidden behind 2-3 clicks, I made some revisions to bring this information to the preview state of the question.

Results

50%+

Reduction in form build time

~92

Digitized forms

Active clinics across the USA are using these forms

As new forms are constantly appearing, or existing forms are being updated, we have an easy way to digitize these questions and collect data from patients and healthcare teams.

Takeaways

Open communication helped solve the complexity of the software

There were a lot of complex parameters to work with, which took some time to understand and figure out how to display to users in a way that wasn't too overwhelming. To gain a better understanding, I collaborated closely with the devs, sought clarification by asking lots of questions, and welcomed feedback to iterate on my designs until we had the MVP of a product that got the job done.

Prioritize features for MVP

We strategically prioritized features to craft an MVP for the form builder amidst time constraints. Despite ongoing updates to our management software, our preparedness ensured meeting immediate business needs and set a clear roadmap for future enhancements.