UI Form Design

Iteration Portfolio

UI Developer | UX Researcher

Developing UI Forms

Before I began the  form design process, I carefully considered the overall approach behind the application desired intention. I began to think about how I might create such UI iteration forms, its personality if you will. When you carry on a conversation with someone about a given subject matter, you adjust what you say according to your understanding of the other person reasoning. You might consider how much he/she cares about the technology, how much they already know about the form process ability and can they understand the process without feeling lost. The YIPTV form design project began as a series of brainstorming ideation meetings with engineers, stakeholders, developers and marketers. Acting as the project UI-UX lead designer, I began my research methodology based on developing user personas culled from realtime data analysis.

This analogy lead me to some obvious design decisions for both the engineering and marketing team. By developing a subject-specific vocabulary to go along with the form's design pattern, I was able to formulate a clear call to action for our intended target audience. My philosophy has always been centered around the idea behind thinking about problems using UI-UX design as a vital step one, to later hash out these results with code and engineering efforts. When our users first encounter our applications in the wild, whether on a mobile device, TV screen or any other user input A.I tool, the code is never present nor do they care how it was created. Rather, a successful transition between a well designed UI and the ability to turn a passive user into a product ambassador relies on creating an effective product that does't make the user think. The application design should flow downstream like a majestic river, allowing the user to find what they are looking for with ease. 

Client Brief

The forms needed to follow YIPTV branding style guides along with several technical requirements. These included connecting the forms to our backchannel API's which loaded Angular.js and WordPress for the custom CMS we build for the marketing team. As per the forms themselves I developed each layer using HTML5/CSS3, Javascript with PHP for the validation methods. Using Adobe Illustrator CC as a vital prototyping tool before jumping into code. 

 

 

Application UI Form-Desktop

Application UI Form-Mobile

Application UI Form-Multistep

Application UI Form-Error

Application UI Single Sign On

Application UI Log-In Captcha