Emily
readey

designing qualtrics' custom code feature

01 / PROBLEM

context

  • my role

    designer
  • team

    austin hewlett / engineer
    jeff barlow / product manager
  • timeframe

    july 2020 – september 2020 (launch)
  • deliverables

    detailed design reviews w/ stakeholders
    pre-launch collaboration w/ developers
  • impact

    widespread adoption by 100+ brands
    one of qualtrics' most used automations "tasks" or features
  • goal

    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
2. explore
continuously iterate, seek out feedback, repeat
3. execute
product + dev + design stakeholder reviews
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.