Cognito Forms

UI/UX design and Front-End Dev

Cognito Forms is an easy-to-use online form builder, allowing anyone to quickly create, publish, and manage forms. My task was to create a questionnaire form based off Cognito’s public-facing templates, with this as my guideline: Prompt the user with a series of multiple choice questions, one at a time, then provide a summary of how the user answered the questions. This includes:

  • A button that is used to advance from one question to the next

  • The user cannot advance to the next question without answering the current question

  • Once a question has been answered, the user cannot revisit it

  • The summary displays all questions and their respective answers in one view

Stage 1:

Design process

  1. Research and mood board

  2. Sketches

  3. Wireframing

  4. High fidelity mockup

Stage 2:

Implementation

  1. Skill-gap closing

  2. Functionality

  3. Full design implementation

Stage 1: Design Process

1. Research and mood board

2. Rough sketches

I took to my sketchbook to then draw some paper wireframes. My intent was to make it look similar to how Cognito does it, but with an "upgraded" / "more modern" feeling.

I struggled a bit with how I should design the progress bar, as it was different than other progress bars I usually see. This felt like a key feature to the form since it originally has each page denoted with a number and name

3. Wireframes

  • Landing page

  • Regular question wireframe

  • Final question wireframe

  • Summary page wireframe

4. High fidelity mockup

Referencing the font styles and color scheme used in Cognito Forms’ public-facing templates, as well as the text from the questionnaire, I created a high fidelity mockup

Stage 2: Implementation

1. Skill-gap closing

Upon discovering all the languages I was going to use to implement this design were all in languages I had no previous experience working with, I designed a plan to learn all of them in record time.

2. Functionality

After all of my studying, I worked on the functionality of this questionnaire. I learned and re-learned many things through this, but most notably, how to show different parts of the questionnaire using v-if and v-else, as well as how methods and computed functions are used in the html portion of the code.

In addition to meeting my deadline, I was successfully able to get the functionality working with some simple placeholder design choices.

3. Full Implementation

Thanks for reading! :)

Next

Mountain Ridge Marketing Web Design