Interaction Design

Challenge

Two Ocean Education Partners develops robust and highly-engaging marketing campaigns on behalf of its Partners in higher education. Proprietary software programs and applications are used to design, build, approve, and launch Creative into the market.

Overtime manual edits and outdated CSS had created inconsistencies across forms with odd spacing, clunky inputs and lack of appropriate interactive states for accessibility.

Process

One way I helped to support the high-growth goals and short turnaround times of the organization was to audit existing form designs and simplify them into a set of templates that could be built by Product developers within the web editor software and then outfitted with features to choose custom colors, typography and imagery that reflected the Partner’s visual brand.

In the interim, I took the lead on the UI and usability enhancements for the company’s digital marketing form pages until the release of the Form Editor. The forms are a primary method of collecting inquiry data from students and parents on behalf of Partners. A form submission takes the user to a landing page containing helpful information on the school presented in the form of a quiz, competitive bracket or step-by-step guide.

Outcome

The Product team acquired a variety of form layouts supporting a highly scalable approach and a quick launch into the college search market while avoiding a cookie-cutter result across clients.

For the existing collection of forms, my UI enhancements and style specifications created a consistent experience for users and integrated UX best practices decreasing completion time and conversely increasing conversion rates.

 

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 input labels unbolded to demote visual prominence and place focus on the user’s input

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

  • focus states include a visual indicator aside from color alone typically in the form of a focus ring or border

  • standard line heights for button labels