A scalable plug and play feedback widget
for web applications

Self Initiated

Project Type

3 Days


Solo Project

Solo/ Team

Research + Design


Let's see what is 

requirement is

Design a responsive web based widget or pluggable component to provide quick feedback. This widget needs to have a fluid minimalistic design, so that it can be configured as “plug-in” for any existing office web app. The design needs to be scalable, intuitive as well as efficient to enable users to provide quick feedback within short span of time i.e. minimum number of clicks.


  1. Requirement understanding

  2. Assumptions

  3. Ideations

    • ​Initial ideas

    • Why do we collect feedback

    • Content style

    • Possible entry points

    • Placement

    • Type of scale

  4. ​Task flow

  5. Wireframes

  6. Testing

As its a widget, recording the feedback need a token of user identity, sign-in details to be taken from app login. Hence user's email ID wont be needed in this process

Widget will be triggered manually rather than auto-popup. Can depend on business decision and usability testing


Assuming Widget will be used for Office Products, hence considering office branding for the solution

Assuming the feedback is for overall application experience, the set of questions will be rating and the category of the feedback only

Assuming the widget is onboarded, following solution presents the post plugged experience

Provided solutions are defined hypothesis, usability of the widget shall be determined by usability testing


Initial Ideas, What all I'll do here

  • Design for Office experience 

  • Should feel native

  • Recognizable experience but avoid distraction

  • Focus on task completion

  • Easy understanding

  • Give user the control

  • Make actions reversible

  • Should work with Mouse pointer and human touch  

But, why do we collect feedback?

  • Collecting voice of customer 

  • Learn why users leave app

  • Get ratings of your product

  • Evaluating customer satisfaction

  • Capture testimonials of your website

  • UI should focus on key functions rather than branding, icons, etc. 

  • Crisp and meaningful content

  • Accessible, friendly with assistive technologies

  • Avoid right click components

  • How will the widget be triggered? Time based auto-popup or manual icon positioned in the application?

  • Has to be scalable for more questions in future

I want to content really simple

  • Capitalization: Sentence style

  • Voice: Warm and Crisp, don't be too technical

  • Avoid Jargons

  • Prefer US English 

  • Avoid too lengthy sentences

How can we invoke user's behaviour?

  • User will act on the feedback if his/her motivation, ability and Prompt is triggered at the same time. 

  • Prompt can be triggered as a subtle motion before the application is closed.

  • Since the user is closing the application, meaning his/her tasks are completed for now, hence user's motivation for giving feedback will be higher as we are disturbing in between the tasks.

  • The button for invoking feedback widget should be very simple.

Finding possible entry points for the user to trigger the widget

Now once Widget is triggered, where should I place it?


Way too many type of scales!! Let's see

Task Pane

Using task pane seem to be a native feature, it could be difficult to place the plugin during development

Center Pop-up

Since feedback is an avoidable feature by the user, it certainly is important for the product health, hence it would be a good idea to block user from other activities.

Side Panel

Side panel seems to be a good choice as it covers full height of the page and covers relatively lesser width area.

Task Flow

Wireframe Iterations

Option 1
Option 2
Option 3
Final Option

Instant confirmation by change of color and text weight for the response selected

Scroll can be avoided, however
testing would bring out the usability of current pattern used

Button style and shadows used from
Office Design Guide

User Testing

Testing in progress...
ETA: March