Modal Form Improvements:
Enable Medicine

As a Product Designer for the biotechnology company Enable Medicine, I conceptualized templates and guidelines to inform the design of modal forms across the platform.

PROJECT BACKGROUND📖

Here's some context

the problem📖

Scientists are struggling with modals.

High Volume of Inputs

Deficit of Instructions

Inconsistent Hierarchy

FOR EXAMPLE📖

A scientist wants to run DeepCell Segmentation on images...

Hover over image to zoom

SOLUTION📖

Templates and Guidelines

I implemented a set of templates and guidelines to use in the creation of modal forms moving forward, addressing major obstacles identified above.
Improving usability of modal forms at this stage in the product’s growth is critical, as their number will only increase along with the product’s growth.

Mindmap📖

To kick off this project, I reconciled critical additions and improvements for modal forms by creating a mindmap.

WIREFRAMING AND INITIAL MOCKUPS

Reflecting major insights from the mindmapping exercise

How can form fields split across multiple modal screens while helping users maintain a sense of progress?
Solution: incorporation of a stepper

How might we inform users of which fields are required vs. optional for successful submission of a form?
Solution: nesting optional form fields under a dropdown

Wireframing process

Establishing placement of elements on modal screens

Iterations

High-Fidelity Mockups

GUIDELINES

To reference in the creation of modal forms moving forward

Problem: discerning required vs. optional form fields

Solutions:

  • Upon opening modal, all displayed fields are required.
  • Optional fields are initially hidden under a dropdown.

Problem: too many inputs on single modal screens

Solutions:

  • Modal forms consuming more than 80% of a screen should split into multiple steps, appearing across a sequence of individual modal screens.
  • Inclusion of stepper to track progress.

Learnings and Takeaways

Lessons learned from this project

The importance of sharing designs with developers early

I learned during meetings with developers that my initial set of guidelines didn’t accurately preview interaction patterns, and that I needed to correlate each guideline directly to a visual aid.
My revisions after the meeting produced a final set of directions that will be helpful and not confusing while implementing new interaction patterns.

Creating within an existing design system enables faster implementation

At the start, I was drawn to creating new components that didn't exist in Enable’s existing design system.
For a project necessitating far reaching revisions across the platform, ideating within the bounds of the design system would ensure faster and more accurate implementation.