designing qualtrics' custom code feature

01 / PROBLEM
context
my role
designerteam
austin hewlett / engineer
jeff barlow / product managertimeframe
july 2020 – september 2020 (launch)deliverables
detailed design reviews w/ stakeholders
pre-launch collaboration w/ developersimpact
widespread adoption by 100+ brands
one of qualtrics' most used automations "tasks" or featuresgoal
as a user, i can add custom code to enhance any step of my qualtrics automated workflows.
01 / PROBLEM
old vs. new design

old / legacy design — never been released, developed with Angular

new design – released september 2020, developed using React JS
01 / PROBLEM
process
1. define
background research, interview people that code
decide requirements with pm + dev lead
decide requirements with pm + dev lead
2. explore
continuously iterate, seek out feedback, repeat
3. execute
product + dev + design stakeholder reviews
create detailed design specifications
create detailed design specifications
4. support
collaborate w/ developers on interaction details
01 / PROBLEM
new design pattern for coding errors

01 / PROBLEM
code task error validation states
state 1 — check code toggle is disabled

state 2 — check code toggle is enabled

01 / PROBLEM
developer specifications


01 / PROBLEM
lessons learned
1. everything is an opportunity to make something great
initially, this was intended to be a simple visual refresh. however, all stakeholders were excited when i suggested the inline error interaction, and we were able to greatly expand the scope of this project.
2. good collaboration is everything
the lead developer on this project was great to work with. i remember him calling me to screen share as he was configuring the settings on the drop shadow of the modal. it ended up looking much better than if he had just followed the figma spec.
3. all feedback is good feedback
i relentlessly sought out feedback from many design teams and individuals while working on this. a month into the project, i showed this at design crit and got feedback that led me to completely change my design proposal. i'm grateful that my team member took the time and effort to honestly deliver constructive feedback, which led to a better final design and product for everyone.