- Create an integrated custom survey building feature: Allow for as much flexibility as possible while keeping the process straight forward and easy to use regardless of technological skill.
Example of how we were able to create consistency throughout by using components with familiar functionality on both the survey and question pages.
Above: Components on 'Create Custom Survey" page with quick links, and delete action behind the more button to reduce errors.
Below: Components on 'Add a Question' page with simular functionality.
- Research: Before I joined the team, research was done by conducting a competitive audit of existing survey builders on the market. A user journey and document outlining basic functionality was compiled and shared with me.
- Wireframing: Using the document compiled in the previous phrase as reference, I created wireframes for the survey builder home page, 'add question' page, and variations of each question format. I was also careful to consider edge cases and designed with this in mind. To make the survey building process as easy and intuitive to the user as possible, I invested time to developing components that could be reused throughout so that once functionality was learnt the same logic could be reapplyed.
On the left: frame when trying to continue (by pressing grayed out buttons) without filling in required fields. Red text signals to the user what is necessary in order to continue. On the right: Once required fields have been completed, buttons become active allowing the user to publish, save, preview or delete progress.
- Iterate: During the wireframing phase I jumped between the design of the "add a question" input pages and the survey output design as I found that one informed the other and led to new questions and ideas regarding functionality. During a review session with the project lead I presented these new insights, and we determined that a new model that would allow multiple questions to be added with the same response options warranted some additional exploration.
Above: 'Add Question' Page V1 with single question, multi answer functionality.
V2 with multi question, multi answer functionality.
V3 with scroll box for question / answer overflow.
Side by side comparission of single question format output and multi question format.
- Prototype: To make the survey building process as easy and intuitive to the user as possible, I invested time to developing components that could be reused throughout so that once functionality was learnt the same logic could be reapplyed.
- Hand-off to Dev: Before sharing the design file with our developer, we had a team meeting where I ran through the prototype and spent time answering questions. Because of the scale of this project, it was especially important that the Figma file was well organized for development. After the meeting I ran through the design again to add some extra notes about things that had come up in the meeting, and finalized all assets to facilitate an easy build.
Prototype orangized into different user flows.
Frames to show survey in various states of completion, with annotations included for development.
