QiCard —Survey

Dynamic, mobile-friendly customer survey app for Android

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Questions are purposefully altered with mock content due to confidentiality.

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

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post

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)

Image for post
Image for post
Image for post
Image for post
(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.

Image for post
Image for post
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

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store