Wireframes and Form Design

Form layout templates offer variety in design while supporting internal high-scale business model and quick turn into market requirements. Consistent UI design integrating UX best practices decrease completion time on forms and conversely increase conversion rates.

Two Ocean Education Partners develops robust and highly-engaging marketing campaigns on behalf of its Partners. Proprietary software programs and applications are used to design, build, approve, and launch Creative into the market. One way I helped to support the high-growth goals and short turnaround demands of the organization was to audit existing form designs and simplify them into a set of templates that could be built by Developers in the web builder program and then customized with tools to assign color, typography and imagery.

I took the lead on the team’s UI and usability enhancements for the company’s marketing forms. The forms were a primary method of collecting inquiry data on behalf of Partners. Submitting a form directed the user to a landing page outlining helpful information on the school or how to prepare for and what to expect in college.

50/50 vertical content and image layout

Image background and floating content layout

Form inputs and sections with responsive layout considerations

Vertical spacing and interactive states for inputs. Examples of recommendations pushed through on the first iteration of enhancements included:

• error icon added to error state to avoid reliance on color alone

• consistent padding between labels and inputs

• heuristic of proximity to communicate sections on form

• input fields match expected input length

• completed checkmarks indicated by solid filled checkbox

• font weight of labels less heavy to demote visual prominence

• introduction of single date input vs. three separate inputs for month, day and year