qualtrics
designing a teams chatbot app & custom code integration
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/64cf58a1b6dd1deea5a4fdc7_q2.png)
about
my role
ux designer
team
design — andrew chiu
engineering — ohyoung jang, jacob butterfield, + more
product — wojtek kubik, phil presnell
engineering — ohyoung jang, jacob butterfield, + more
product — wojtek kubik, phil presnell
time
june 2021 to august 2021
outcome
led two client presentations with microsoftt
app had a successful release on the teams app store
app had a successful release on the teams app store
link to app on microsoft teams store
link to app on qualtrics' support site
project #1: microsoft teams chatbot
this project resulted from microsoft commissioning the work from qualtrics. as a result, the project had two sets of stakeholders — one from each company. i learned about gaining alignment across people in varying organizations, roles, and levels of involvement.
the goal of the product was for qualtrics account holders to send and take qualtrics surveys — all within microsoft teams. this ultimately involved designing a teams application tab and designing a microsoft teams chatbot experience.
the goal of the product was for qualtrics account holders to send and take qualtrics surveys — all within microsoft teams. this ultimately involved designing a teams application tab and designing a microsoft teams chatbot experience.
primary interfaces
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/64e26865b4f5ea9cdd878cbf_app%20home.png)
application tab
found within "apps" in left nav
found within "apps" in left nav
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/64e26b74f3c0277256b53610_Updated%20menu%202.png)
chatbot
found a) in app icons under message box or b) by sending "@qualtrics" in any chat
found a) in app icons under message box or b) by sending "@qualtrics" in any chat
sending a survey via application tab
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/64e266a30c459d4b6681bcfd_survey%20send%20-%20app%20tab.gif)
sending a survey via chatbot
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/64e266e2d5f18f066931c7f7_survey%20send%20-%20chatbot.gif)
taking a survey
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/64e26f2292befecb2c737dc1_survey%20take%201.png)
step 1:
receive survey link on teams
receive survey link on teams
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/64e26d9f44c35d763505b964_survey%20takek%202.png)
step 2:
complete survey in modals
complete survey in modals
survey question design
original
redesign
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/64e27bf94ecfa09e96f3dca7_before%202.png)
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/64e275034ecfa09e96eda932_q1.png)
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/64e27bf94ecfa09e96f3dcb6_before%203.png)
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/64e27503e41da63fe44af353_Q4.png)
project #2: qualtrics platform custom code feature
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/6540fc37339bd177c5fe0e74_636002614e31c17c09fba726_odl-p-800.png)
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/6540fc466e5b78f21adb477d_636002614e31c151ddfba725_new-p-800.png)
old legacy design
new design
design pattern for coding errors
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/6540fe843542435bcc8c19fe_636002614e31c1328afba72d_code%2520popup-p-1600.png)
check code toggle
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/6541033a55a4593c693afe56_636002614e31c1cb2efba730_modal-p-2000%20(3).png)
toggle disabled
![](https://cdn.prod.website-files.com/64a49785729c1e919a2ff827/65410339176b81ef55767722_636002614e31c1134efba72f_code%2520task-p-2000%20(4).png)
toggle enabled
popover on hover
popover on hover