QiCard —Survey

Dynamic, mobile-friendly customer survey app for Android

Duration: 3 months (May — July 2016)
Role: Design & Development

Tools:

  • Sketch
  • Android Studio

This was a design & development project for QiCard, International Smart Card. The task was to convert a long survey of questions into an Android app.


Objective

The requirement was to convert a questionnaire form of 17+ questions into a mobile-friendly design. Questions must be presented in a manner that does not overwhelm users. They also have to be consistent on both phone and tablets.

On the development side, the user’s responses had to be recorded and packaged into JSON, to be sent to a server.

Challenge

Users are very reluctant to fill a survey. But even assuming they do, the length of the survey is enough to scare them away.

Hence keeping these in mind, the following challenges were faced

  • Carefully presenting questions without overwhelming users
  • Maintaining design consistency among phone and tablet
  • Handling navigation among questions
  • Validating answers before proceeding

Solution

To begin with, I had to avoid making the survey appear large to users. So I split the entire questionnaire into small sizeable pieces. Around 3 questions on average, per screen.

Splitting the entire questionnaire into smaller answerable questions, separated by screens helped reduce cognitive load on users.

Ideation

The first step was to immediately prepare mockups for the first few screens. This helped establish a strong sense of the final product, not just for me, but for the clients as well.

Quickly iterating over the designs helped finalize the app structure, color scheme and questions split up.

Design

I came up with a simplistic, card-based design with a color scheme that matched QiCard’s brand.

Variants

Initially, choosing a palette that involved playing around with different color schemes from the brand’s palette. I presented the client a few variations, including one of my own personal taste.

We finally decided to go with ‘Brand Concept 1’, which I personally felt had the strongest brand correlation.

Cards

Cards are a convenient means of displaying content composed of different elements — Material Design guidelines

Users will be interacting the most with question cards. It was important that each card remained visually similar. But each question was different and required a different answer format. This included checkboxes, radio buttons or even a text input field. Hence, I aimed to keep the underlying design same, with slight variations to accommodate these differences.

Tablet Support
Cards were presented in a linear fashion on mobile. However for Tablets, cards were displayed in a grid.

Actual screenshot of app from Nexus 9 Tablet

Creating a sense of progress

With each screen serving only 3 questions on average, it becomes easy to lose track of where we are. Users need know where exactly they are within the app. Hence a Progress Bar was used.

Using a global Progress Bar to indicate to users, where they are.

At any given point of time, the Progress Bar indicates 2 things —

  1. number of questions answered
  2. number of questions YET to be answered

Interactions

As per the survey, certain responses required users to answer an additional question. While on the PDF form, this would be visible to users, it was hidden on the app.

Only the required questions are displayed to users. Based on certain answers, an additional question would sometimes display. In this way, only the mandatory questions were visible to users, making the survey look smaller.

Key Points

  1. Floating Action Button (Next Arrow)
    The only way to navigate to the next screen is by tapping on this prominent button. Once all questions are answered, it turns pink indicating that the user can now proceed.
  2. Revealing additional cards
    When a user gives a specific answer to a question, it prompts an additional question card. This will be dismissed if the user changes his prior response
  3. Auto-scrolling
    The list scrolls to bring the current question in focus, thereby saving user effort.
  4. Progress Bar
    Clearly indicates current and pending progress to the user.

Development

Architecture — MVP (Model View Presenter)

(From left to right) 1. MVP architecture, credits: macoscope.com, 2. Project structure — Packaging by layers

Responsive Forms using RxJava

RxJava was used to make the forms react to real-time user input.

Unlike typical forms, the survey visually indicates if the on-screen questions have been answered or not. This is indicated in real-time by the Floating Action Button (FAB) on the bottom-right.

It grays out when there is a pending question to be answered. It turns pink when all questions are answered and the user can proceed to the next screen.

Recording taken from actual app. FAB color indicates whether user can proceed to the next screen.

Tech Stack

Libraries used in this project include —

  • RxJava — Asynchronous and event-based programs using observable sequences
  • RxAndroid — RxJava bindings for Android
  • Butterknife — Annotation based view bindings and callbacks
  • Gson — Java serialization/deserialization library for JSON
  • Retrolambda — Lambda support in Java 6 & 7

Other Screens


Final Outcome

The final deliverables to the client included the entire, working Android app itself. As design was very important to them, the app made sure it stuck to the proposed UI mockups.

Client Feedback

Suleiman is an extraordinary professional. That’s why as a lead-developer I didn’t hesitate to contact him when we needed to transform a complex paper form into a simple, easy to use mobile survey. He translated the form into a beautiful Android survey with smooth and beautiful transitions.
— Hussain Y. Abbas, Lead Software Developer at International Smart Card.