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