Beautiful

I N T E R A C T I V E

tools made with the power of Javascript

MOBILE

first approach

Cross browser & device agnostic

OUR

APPROACH

Idea

Your idea & our idea

Step 1         
UX Design prototype

Developing a concept design of your thought process.Prototype will be delivered in form of gif, video or pdf.

Step 2         
Code

The approved concept design is developed into interactive tool using javascript/framework, css/framework, SVG

Step 3         
Test

All tools goes through x-browser, device agnostic test

Step 4         
Demo

We deliver a demo of your tool.

Step 5         
Data

Data output is tested throughly before submitting the final tool

Step 6         
Delivery

We deliver fully tested tool with documentation.

Step 7         

FEATURED

INTERACTIVE FORMS

  • Drag & Drop (Label & Images)
  • Drag & Drop (Label & Images)

    A drag and drop with mobile first approach i.e touch optimised and using most of the space available. Most web drag & drop are still not optimised for touch drag & drop. Use our drag & drop in your study. Check out various drag and drop with different approach
    Use for:
    Drag & drop grid with upto 10 scales
    Drag & drop for ranking upto 10 ranks


    View Demo (Drag & Drop - Label & Images)

  • Drag & Drop (label & images with grouping)
  • Drag & Drop (label & images with grouping)

    A drag and drop with mobile first approach i.e touch optimised and using most of the space available. Most web drag & drop are still not optimised for touch drag & drop. Use our drag & drop in your study. Check out various drag and drop with different approach
    Use for:
    Drag & drop multi grid with upto 10 scales
    Drag & drop for grouping


    View Demo (Drag & Drop (label & images with grouping))

  • Drag & Drop on rail (10 or 100 point scale)
  • Drag & Drop on rail (10 or 100 point scale)

    A drag and drop with mobile first approach i.e touch optimised and using most of the space available. Most web drag & drop are still not optimised for touch drag & drop. Use our drag & drop in your study. Check out various drag and drop with different approach


    View Demo (10 point scale) View Demo (100 point scale)

  • Natural Language
  • Natural Language

    Natural language form is a series of field form weaved together to achieve anatural narration statement rather than an interrogation type of question. We can make a use of natural form by combining related questions in a page instead of asking in several pieces of separate question. This can benefit data collection quality with it reduces the LOI and answer naturally


    View Demo (Natural Language)

  • Map
  • Map

    Use a visual map instead of asking to select from dropdown or long list of states or regions. Various countries are available to integrate in your study.


    View Demo (US) View Demo (UK) View Demo (Canada)

  • NPS - Circle
  • NPS - Circle

    Circular NPS question designed to adapt mobile screen. We take the approach of circular arrangement instead of horizontal layout to fit the mobile screen easier for mobile focused survey. Touch interactive design.


    View Demo (NPS - Circle)

  • Gender
  • Gender

    Using gender image instead of text. Normally useful when you want to design a visual rich survey. Gender images can be switched with different design visuals depending on the theme of the study. See below with our own character design.


    View Demo (Gender)

  • Race
  • Race

    Race can be designed using different ethnicity to keep the survey engaged, usually good to pair with visually rich survey design. No harm in using text/label.


    View Demo (Male) View Demo (Female)

  • Age
  • Age

    We have designed different age group to represent it visually with subtle animation when its selected


    View Demo (Male) View Demo (Female)

  • NPS - Horizontal
  • NPS - Horizontal

    Visual NPS design using our own character to represent 11 different points. This can be configured with different characters.


    View Demo (NPS - Horizontal)

  • Circular Slider
  • Circular Slider

    Slider to fit mobile screen easily. Designed to fit the rating question that have upto 10 points scale.


    View Demo (Circular Slider)

  • Image Slider
  • Image Slider

    We have designed slider with different images as it slide. The standard slider is just the rail with slider knob to slide but we can make certain questions to be more engaging. Here is an example of household members where the house size change as the number of member increase. Such example can be used with questions where you want to ask about size like XS/S/M/L/XL. See more examples


    View Demo (Household Members) View Demo (Income)

  • Simple Counter Slider
  • Simple Counter Slider

    A simple slider to use for numeric question with number indicator as you slide. Can be used for single or multi slider


    View Demo (Simple Counter Slider)

  • Numeric Box - Animated
  • Numeric Box - Animated

    We have added a subtle animation for numeric box, just making it a little more interesting than normal text box.


    View Demo (Numeric Box - Animated)

  • Semantic Differential Question Type
  • Semantic Differential Question Type

    Different way of representing semantic differential question for a 2 scale instead of using radio button.


    View Demo (Semantic Differential Question Type)

  • Drag & Drop on rail with fetch point 100 scale
  • Drag & Drop on rail with fetch point 100 scale

    A drag and drop with mobile first approach i.e touch optimised and using most of the space available. Most web drag & drop are still not optimised for touch drag & drop. Use our drag & drop in your study. Check out various drag and drop with different approach


    View Demo (Drag & Drop on rail with fetch point 100 scale)

  • Integrate google map with markers/pins, Single Marker
  • Integrate google map with markers/pins, Single Marker

    Use for various map related question where you want respondent to point location of their shopping centres they visit in last 6 months or cinema they go to and so on. We can configure upto as many markers are needed

    The data will store longitude, altitude and address of each marker.


    View Demo (Integrate google map with markers/pins, Single Marker)

  • Integrate google map with markers/pins, Multiple Markers
  • Integrate google map with markers/pins, Multiple Markers

    Use for various map related question where you want respondent to point location of their shopping centres they visit in last 6 months or cinema they go to and so on. We can configure upto as many markers are needed

    The data will store longitude, altitude and address of each marker.


    View Demo (Integrate google map with markers/pins, Multiple Markers)

  • Path/Polyline + Mixed circle
  • Path/Polyline + Mixed circle

    Integrate google map direction Use for direction map related question where you want respondent to point location of their vacation destination plans etc. You can allow as many marker or pin as you want. The data will store longitude, altitude and address of each marker.


    View Demo (Path/Polyline + Mixed circle)

  • Multi ranking in 3 page
  • Multi ranking in 3 page

    Imagine you want respondent to rank multiple items for different brands in a single question. We took an approach of this using a custom designed ranking for various brands


    View Demo (Multi ranking in 3 page)

  • Image Highlighter
  • Image Highlighter

    Respondents highlight areas of interest on an image.


    View Demo (Image Highlighter)

  • Text Highlighter
  • Text Highlighter

    Respondents highlight or click on highlightable words or sentences to select answers. The text highlighter must have at least 1 marker and multiple highlightable words or sentences. The text highlighter is desktop, tablet and mobile compatible.


    View Demo (Text Highlighter)

  • Card Rating
  • Card Rating

    Respondents select button responses for cards presented on a sliding carousel. Card rating questions must have multiple cards and buttons.


    View Demo (Card Rating)

  • Rating Scale
  • Rating Scale

    Respondents rate answers by positioning a button for each item into a rating location. Similar to the single-select question, respondents can only place each item into one rating. Rating scale questions must have 2 or more rows and columns.


    View Demo (Rating Scale)

  • Slider Decimal
  • Slider Decimal

    Respondents move a slider to a point on the scale to answer the question. Slider questions must have a value range and may contain multiple sliders (i.e., rows). This slider supports decimals.


    View Demo (Slider Decimal)

  • Slider Rating
  • Slider Rating

    Respondents move a slider to a point on the scale to answer the question. Slider questions must have points and may contain multiple sliders (i.e., rows).


    View Demo (Slider Rating)

  • Rank Sort
  • Rank Sort

    Respondents rank answers by dragging the item into a rank position. Similar to the single-select question, respondents can only place each item into one rank. Rank sort questions must have multiple labels and items.


    View Demo (Rank Sort)

  • Page Flip
  • Page Flip

    Respondents interact with a magazine-like layout, while the system tracks the time spent on each page.


    View Demo (Page Flip)

  • Shopping Cart
  • Shopping Cart

    Respondents simulate purchasing products from an online store.


    View Demo (Shopping Cart)

  • Image Annotation
  • Image Annotation

    Respondent can use the annotation tool to rate an area of image. Each point collects rating scale and text input which later are shown in heat map report.


    View Demo (Image Annotation)

  • Selfie or image upload
  • Selfie or image upload

    Respondent can upload selfie or click picture and upload


    View Demo (Selfie or image upload)

  • 360 image view
  • 360 image view

    Show product or object in 360 view


    View Demo (360 image view)

  • Page Timer
  • Page Timer

    Respondents view an ad for a predetermined amount of time, and then proceed automatically to the next page.


    View Demo (Page Timer)

  • Audio Player
  • Audio Player

    Respondents listen to an audio clip. The audio player is desktop, tablet and mobile compatible.


    View Demo (Audio Player)

  • Video Player Variation 1
  • Video Player Variation 1

    Respondents are shown a video. The video player is desktop, tablet and mobile compatible.


    View Demo (Video Player) View Demo (Video Player - Without Control) View Demo (Video Popup - With Control)

  • Video Player Variation 2
  • Video Player Variation 2

    Respondents are shown a video. The video player is desktop, tablet and mobile compatible.


    View Demo (Video Popup - Without Control) View Demo (Multiple Video Player) View Demo (Youtube Video Player)

  • Video Testimony
  • Video Testimony

    Engage respondents with direct video testimonials allowing up to 2 minutes of unrestricted video responses using either the respondents video library or real time video recording. The video recorder is compatible with desktop and mobile devices.


    View Demo (Video Testimony)

  • Media Evaluator
  • Media Evaluator

    Respondents rate a video by moving a slider as they watch it.


    View Demo (Media Evaluator)

  • Chat question
  • Chat question

    Respondents are shown the Quester Interactive Text Box question, similar to an instant messaging session, where follow-up probes are delivered by an automated conversational moderator. Contact your Project Manager at Quester to initiate service and receive the Quester ID for your question. Quester will bill for their services. Similarly IModerate chat can be integrated.


    View Demo (Chat question)

  • Conjoint CBC
  • Conjoint CBC

    Conjoint Analysis is a technique used to assess the different contributions aspects of a product or service make to individuals in the purchasing decision.


    View Demo (Conjoint CBC)

View more designs
Top