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 requirement was to convert a large survey into a user friendly app of questions into an Android app.


Objective

QiCard (International Smart Card) needed a huge survey of 17+ questions transformed into a mobile-friendly design. The entire survey needed to be intuitive so that users would not be intimidated by the size. The survey design also needed to be consistent on phone and tablet.

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

Challenge

To design the survey such that users are not overwhelmed by the number of questions they have to answer.

How might we:

  • present questions without overwhelming users
  • minimize user input
  • maintain consistency across different questions and device size (phone and tablet)
  • validate 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 sizable 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.

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

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 to scroll.
  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

  • 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

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.