Dynamic, mobile-friendly customer survey app for Android
Duration: 3 months (May — July 2016)
Role: Design & Development
- 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.
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.
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
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.
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.
I came up with a simplistic, card-based design with a color scheme that matched QiCard’s brand.
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 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.
Cards were presented in a linear fashion on mobile. However for Tablets, cards were displayed in a grid.
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.
At any given point of time, the Progress Bar indicates 2 things —
- number of questions answered
- number of questions YET to be answered
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.
- 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.
- 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
The list scrolls to bring the current question in focus, thereby saving user effort.
- Progress Bar
Clearly indicates current and pending progress to the user.
Architecture — MVP (Model View Presenter)
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.
Libraries used in this project include —
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.
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.