Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Evolution of a Widget

John W. Long
September 24, 2013

The Evolution of a Widget

A talk that I gave at Crop about the process we went through to design our new widget at UserVoice: http://www.meetup.com/designcrop/events/138607782/

John W. Long

September 24, 2013
Tweet

More Decks by John W. Long

Other Decks in Design

Transcript

  1. THE EVOLUTION
    OF A WIDGET
    @johnwlong
    @joshuarudd

    View Slide

  2. UX DESIGNER
    @johnwlong
    @joshuarudd
    HEAD OF USER
    EXPERIENCE

    View Slide

  3. View Slide

  4. Support Tickets
    Knowledge Base
    Feedback Forums
    Metrics

    View Slide

  5. WHAT WE BUILT

    View Slide

  6. THE CLASSIC WIDGET
    FEEDBACK & SUPPORT

    View Slide

  7. THE CLASSIC WIDGET
    FEEDBACK & SUPPORT

    View Slide

  8. CLASSIC WIDGET
    • Easy to use
    • Tickets + Ideas + Knowledge Base
    • No Instant Answers on mobile
    • Not very responsive

    View Slide

  9. NEW WIDGET GOALS
    • First-class experience for mobile
    • Instance Answers front & center
    • SmartVote: hot-or-not for ideas
    • Satisfaction Ratings
    • Progressively ask for info

    View Slide

  10. DEMO
    Change the order of articles in
    Knowledge Base
    Allow embedding of contact form
    on a web page
    Not sure
    What should we add next?
    Or, post your own idea!
    Send us a message
    Give feedback or ask for help...
    Next
    What should we add next?
    Include a screenshot of this page
    Send us a message
    What should we add next?
    How likely would you be to
    recommend UserVoice to a friend
    or collegue?
    Not likely
    0 1 2 3 4 5 6 7 8 9 10
    Very likely

    View Slide

  11. PROCESS & TOOLS

    View Slide



  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide





  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. HTML PROTOTYPING

    View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. POLISH

    View Slide

  36. View Slide

  37. Help & Feedback
    Omnibox Instant Answers
    Type an idea or question...
    Next
    Overview of bar chart settings
    Submit an idea
    How we generate our bar charts
    Allow us to make bigger pie charts
    3 related articles & ideas!
    Continue
    None of these help!
    Help & Feedback
    I’m having trouble figuring out how to
    customize the colors of my bar charts|
    3 related articles & ideas! Next
    It would be great if there were more
    options for displaying our charts. We would
    really appreciate a 3D option where we
    can adjust the perspective and find the
    perfect angle for our presentations.
    Our boss is currently unhappy with the
    progress we have made thus far and we
    feel theat he would like us better if we
    were able to make bigger pie charts. Thnx!
    No
    Yes
    We collect data from all of your customer
    interactions to generate the finest bar
    charts in the industry. Our bars are pro-
    cessed and crafted by the best and most
    esteemed pixelworkers in America and
    Europe.
    Pre Smartvote
    Article details
    Idea details
    How we generate our bar charts
    Do you still want to
    give feedback?
    Awesome!!!
    Allow us to make bigger pie
    charts
    Yes
    No
    Does this answer your question?
    Yes
    No
    SmartVote
    Does this answer your question?
    Idea title
    Select one
    Email addre
    Email address
    Post your idea
    This will be posted publicly on our forums do
    you want to edit this?
    Submit an idea
    It would be great if there were a couple of
    di erent themes for bar charts that we
    could customize for|
    Next
    Send us a message
    Category
    Idea title
    Edit your idea and post it on
    our public forums
    Edit and send us a private
    message
    Decision point
    What now?
    Go back
    Menu
    Post an idea on our forums
    Send us a private message
    Live chat with us
    Talk on the phone
    Search articles and ideas
    How likely would you be to
    recommend our company to a
    friend or colleague?
    Not likely
    Satisfaction Rating
    0 1 2 3 4 5 6 7 8 9 10
    Very likely
    Submit
    Pre Smartvote
    We take your feedback to
    Thank you!!
    Next
    SmartVote
    Which is better? Change the order of articles in
    Knowledge Base
    1 Your pick
    Touchpoint Toolkit
    Subscribe
    Do you want updates about this idea?
    Great stu !!!
    Enter your email address Subscribe
    No thanks
    D
    A
    I want this
    We’ll update you as this
    idea progresses.
    Great stuff!
    Subscribe
    We’ll update you as this
    idea progresses.
    Great stu !
    Enter your email address Subscribe
    Nevermind
    Yes
    I want this
    Yes
    It would be g
    options for di
    really apprec
    can adjust th
    perfect angle
    Our boss is c
    progress we
    feel theat he
    were able to
    Allow us to
    charts
    No
    Does t
    I

    View Slide

  38. Your pick
    Change the order of
    Knowledge Base
    Wins 33% of the time
    Allow embedding of
    form on a web page
    Wins 64% of the time
    Change the order of articles in the
    Knowledge Base
    It’d be great if I could rearrange the order of
    articles in the knowledge base including by date
    and alphabetical order.
    12 people want this idea.
    What should we add next?
    Change the order of articles in
    Knowledge Base
    Allow embedding of contact form
    on a web page
    AUTOPROMPT REOPENED SCORE? THANK YOU
    CLOSED
    CLOSED
    CONTACT ANSWERS ANSWERS SENT
    Change the order of articles in
    Knowledge Base
    Allow embedding of contact form
    on a web page
    What should we add next?
    How likely would you be to
    recommend InVision to a friend or
    collegue?
    Not likely
    0 1 2 3 4 5 6 7 8 9 10
    Very likely
    How likely would you be to
    recommend InVision to a friend or
    collegue?
    Not likely
    0 1 2 3 4 5 6 7 8 9 10
    Very likely
    Send us a message
    Help us pick great ideas
    Why did you pick that score?
    We would love to know! (optional)
    Submit
    Email address
    Send us a message
    Give feedback or ask for help...
    Next
    Or, help us pick great ideas!
    Are any of these helpful?
    Articles in multiple topics
    It would be great to be able to put articles in...
    Allow us to categorize articles in the...
    I’d like to be able to categorize articles in...
    Change the order of knowledge base...
    I would love to be able to change the order...
    Skip and send message
    Additional details
    Send message
    Email address
    Your email address
    Select one
    Type
    Select one
    How are you feeling?
    Edit what you wrote earlier
    Message se
    We’ll be in touch
    Thank you
    We take your feedback

    View Slide

  39. IN TO THE
    RABBIT HOLE

    View Slide

  40. SmartVote
    Beta
    (February)
    Limited
    Release
    (May)
    UserVoice
    Summit
    New Widget
    Launch
    (September)
    BETA PROCESS

    View Slide

  41. BARRIERS TO ENTRY
    (It’s not a great idea if no one can implement it)

    View Slide

  42. In-app, embedded SmartVote widget
    is the best way to test ideas
    HYPOTHESIS

    View Slide

  43. View Slide

  44. Beta testers’ apps didn’t have the
    real-estate for our inline widget
    ISSUE

    View Slide

  45. View Slide

  46. View Slide

  47. THE NEVERENDING
    WIDGET

    View Slide

  48. Keep prompting for more information
    to increase engagement and provide
    more data
    HYPOTHESIS

    View Slide

  49. View Slide

  50. User fatigue - are we there yet?
    ISSUE

    View Slide

  51. Competed with our customers
    for user attention
    ISSUE

    View Slide

  52. Prompting for Satisfaction rating
    after ticket resulted in skewed
    ratings (detractors)
    ISSUE

    View Slide

  53. How likely would you be to
    recommend InVision to a friend
    or collegue?
    Not likely
    0 1 2 3 4 5 6 7 8 9 10
    Very likely
    Why did you pick that score?
    Enter your feedback...
    Next
    NEGATIVE RATING WHY THANK YOU
    Thank you!
    Help us decide what to add next

    View Slide

  54. THIS IS NOT THE
    EXPERIENCE YOU
    ARE LOOKING FOR

    View Slide

  55. Collect information first, ask
    users what they want to do with
    it later
    HYPOTHESIS

    View Slide

  56. Help & Feedback
    Omnibox Instant Answers
    Next
    Overview of bar chart settings
    How we generate our bar charts
    Allow us to make bigger pie charts
    Post your idea on our
    public forums
    Send this to us as a
    private message
    Decision point
    What now?
    Or, help us pick great ideas!
    Close
    Help & Feedback
    3 related articles & ideas!
    Entered Text
    Help & Feedback
    I’m having trouble figuring out how to
    customize the colors of my bar charts|
    View
    3 related articles & ideas!
    Entered Text
    Help & Feedback
    I’m having trouble figuring out how to
    customize the colors of my bar charts|
    Next
    Go back
    3 related articles & ideas!
    Start by typing an idea or question...

    View Slide

  57. Users write di erently if they’re
    talking to someone privately vs.
    posting a public suggestion
    ISSUE

    View Slide

  58. Additional details
    Send message
    Email address
    Your email address
    Select one
    Type
    Select one
    How are you feeling?
    Edit message
    Are any of these helpful?
    Skip and send message
    Articles in multiple topics
    It would be great to be able to put articles in...
    Allow us to categorize articles in the...
    I’d like to be able to categorize articles in...
    Change the order of knowledge base...
    I would love to be able to change the order...
    Back
    Send us a message
    Give feedback or ask for help...
    Next
    What should we add next?
    CONTACT ANSWERS ANSWERS SENT
    Message sent!
    We’ll be in touch.

    View Slide

  59. Instant UI feedback will improve
    the user experience
    HYPOTHESIS

    View Slide

  60. View Slide

  61. Started receiving 1-3 word
    messages from users
    ISSUE

    View Slide

  62. CUSTOMER
    FEEDBACK IS DEAD

    View Slide

  63. View Slide

  64. LONG LIVE
    CUSTOMER
    FEEDBACK

    View Slide

  65. How likely would you be to
    recommend InVision to a friend
    or collegue?
    Not likely
    0 1 2 3 4 5 6 7 8 9 10
    Very likely
    Why did you pick that score?
    Enter your feedback...
    Next
    NEGATIVE RATING WHY

    View Slide

  66. WHAT WE DIDN’T
    BUILD (YET)

    View Slide

  67. Send us a message
    Give feedback or ask for help...
    1
    Message Center
    Welcome to InVision!
    Hi there and welcome to InVision! My name is
    Clark. If there is anything that you need help
    with while you are here just click the green...
    Clark Valberg - June 19
    Send us a message
    1
    1
    FIRST LOAD
    Welcome to Invision!
    Clark Valberg - June 19
    Hi there and welcome to InVision!
    My name is Clark. If there is anything that you
    need help with while you are here just click the
    green button below and one of the friendly
    people here at InVision will get back to you right
    away.
    Need help getting started? No problem. Here
    are a couple of articles from our knowledgebase
    that can guide you through the setup process:
    Reply
    Back
    MESSAGE

    View Slide

  68. Additional details
    Send m
    Email address
    Your email address
    Select one
    Type
    Select one
    How are you feeling?
    Edit message
    Are any of these helpful?
    Skip and send message
    Articles in multiple topics
    It would be great to be able to put articles in...
    Allow us to categorize articles in the...
    I’d like to be able to categorize articles in...
    Change the order of knowledge base...
    I would love to be able to change the order...
    Back
    Send us a message
    Give feedback or ask for help...
    Next
    What should we add next?
    How likely would you be to
    recommend InVision to a friend
    or collegue?
    Not likely
    0 1 2 3 4 5 6 7 8 9 10
    Very likely
    Why did you pick that score?
    We would love to know! (optional)
    Email address
    AUTOPROMPT REOPENED SCORE?
    CLOSED
    CONTACT ANSWERS ANSWERS
    Send us a message
    What should we add next?
    How likely would you be to
    recommend InVision to a friend
    or collegue?
    Not likely
    0 1 2 3 4 5 6 7 8 9 10
    Very likely

    View Slide

  69. View Slide

  70. View Slide

  71. THANKS!
    http://uservoice.com

    View Slide