
Coreo is a digital survey building tool.
I was asked by Natural Apptitude to improve the user experience of Coreo form section.
Coreo is their SaaS no-code survey building tool.
The business goal is to improve user retention and conversion. I had a long conversation with the CEO and CTO to get more insights on the company and to better understand their values and goals.
Currently you need to go back and forward between the above screens to build a child form (sub-form), and you have to build them independently and connect the child form to the parent form afterwards.
Due to budget and time constraints, I decided to analyse and compare similar products and competitors to highlight patters and user flows.
I created a prototype and presented my design solutions to the CEO and CTO.
As a solo designer for this project, I did competitive benchmarking, interaction design and UX design.
Research and Analysis
Fastfiled
On the left there is a list of items you can add in the in the form.
On the right the settings for each item
Sub-form option disabled and available only after creating a subform
Typeform
You land on the form builder page. Click the “+” on the top left corner and a modal opens with the form items list. Click on any of them to add to the form. Form items are grouped by categories
The Approach
I started to sketch on paper to quickly explore possible solutions.
The sketches helped put my ideas on paper quickly and effectively and initiate a path to find solutions to the problems.
After I was happy with the sketches I started recreating Coreo existing UI in Figma with a plan to add my solutions in a high-fidelity prototype, because I wanted to present my ideas to stakeholders with a design which they’re familiar with.
When I finished recreating the existing UI in Figma, I started adding elements and iterate with feedback from people around me, as there wasn’t any budget for user testing and I wanted to get initial thoughts from people, to understand if I was going on the right direction.
The feedback was helpful to understand that users want to avoid clicking back and forward to change form and sub-form settings and add items.
Therefore I designed the settings button for form and subform in the builder page and I use indentation when user adds a sub-form.
Current Coreo: The sub-form is not indented and to build it and change settings you need to go to a separate sub-form building page with three extra clicks.
My solution: The sub-form is indented and can be created in the same page. Form and sub-form settings are available in the same page, so no need to leave this page. Settings buttons open modals.
Indentation to visually
communicate the
sub-form
I was satisfied with my solutions and I decided to tackle other issues I noticed while using Coreo
1. App preview
Currently it’s not possible to see a preview of the changes made before sending them live, so I designed a preview button where you can see the your changes before pushing them live.
When you make any changes, the save button becomes enable and when clicked pushes changes to the app.
My solutions were to get rid of the save button completely and introduce the preview icon to have a visual representation of the changes. Then I added a “Go live” button to push those changes live when the user is ready to do so..
Conclusions
I really enjoyed working on this project. I think I got some pretty good improvements that can impact the usability and create a smoother user flow.
Sketching gave me the ability to quickly visualise ideas and solutions I had in mind,
before starting more costly and time consuming processes.
The next step will be conducting usability tests and iterate on users feedback.
With a bigger budget and more time, I would definitely have focused on qualitative and quantitative research and test with user as I designed.
I presented those solutions to the CEO and CTO of the company with a high-fidelity prototype, which helped communicating my message with a familiar UI.
They really liked my work and I believe we will collaborate again in the future.