Reimagining the end-to-end setup process
Project completed while working as a product designer at Ideally.
Short story
Redesigning the test builder in Ideally to improve clarity, reduce churn, and boost customer confidence.
First-time users were struggling to create surveys on their own, leading to delays, drop-offs, and extra work for our team. This redesign aimed to simplify setup, clarify credit use, and reduce internal overhead.
- I led design from discovery through to dev handover.
- Ran user testing sessions and internal QA.
- Worked closely with product, dev & company wide stakeholders.
We looked into support tickets, analytics, interviews and internal feedback. We found that:
- Users were unsure which test type to use.
- There was ambiguity on how Ideally worked.
- Many duplicated questions were being added to tests particularly questions already included in our frameworks.
- There was high drop-off during survey setup.
- People were confused around how credits were calculated.
- Our research team often ended up uploading surveys manually.
We mapped out new flows and explored ways to make the process feel simpler and more human.
Some key ideas:
-
Split the flow into two parts to help with cognitive load: Brief and Builder.
-
Use natural, friendly language (eg. “What are you wanting to test?”).
-
Show our framework questions clearly while users set up their tests.
-
Add a visible, expandable credit breakdown.
-
Use empty states and dashed containers to guide users on steps.
-
Bring in progress feedback.
- Support drag-and-drop and inline editing.
We ran two rounds of testing with eight customers (a mix of industries and experience levels).
Mid-fidelity prototype Credit display prototype
Key insights from these testing sessions:
- Framework questions under each idea helped understanding.
-
Credit breakdowns were confusing across multi-market tests.
-
“Add component” button lacked visibility.
-
Users expected clearer drag-and-drop cues.
-
Tab placement felt off – users expected centred steps.
We made updates to layout, labelling, and interactive states based on this feedback we received in user testing sessions.
Final designs
Accordion reveals our framework questions Hover state reveals credit cost and drag icon
- Updated the design system and pushed tokens via Token Studio.
- Used Figma Dev Mode and annotations for clear specs.
- Met daily with devs to resolve implementation questions.
- Reused components from PrimeReact where possible to speed up development time.
- Worked closely on custom elements to ensure polish.
- QA’d post-build and raised tidy-up tickets to fix styling inconsistencies.
- Fewer support tickets around frameworks and setup.
-
Record-high credit spend post-release, linked to improved clarity.
-
Drop in abandoned test flows.
-
Faster time-to-launch for new users.
-
Less manual survey setup by research team.
-
Stronger foundation for future automation and scale.
This project reminded me how important it is to scope UX work properly, align with upcoming system changes, and design for clarity, especially when onboarding new users. It also reinforced the value of collaboration and keeping language human throughout the product.