Investor Survey
Designing for prolonged user engagement

Survey comp 4a99ad21be5101ae2ac5f84518180d9ff9b42778b91c3cf7fec83c1d00d1232d

Project

A San Mateo-based financial institution wanted a forward-thinking visual aesthetic for its new investment taste profile survey.

Primary Issue

Generating an accurate taste profile requires a lot of feedback from the user but crafting an engaging user experience around a long-form survey is difficult.

Challenges

  • The survey had eleven sections, some with multiple sub-sections.
  • The survey design required a clean and consistent way to communicate instructions, hints, and headers that may not be present on every page or every section.
  • The survey required a progress bar that gave users an indication of their progress.

Users

The survey was primarily targeted at new investors between the ages of 30-55 with a high interest but little experience in personal investing.

Solutions

  • To keep the survey engaging for users, I employed several different presentation methods.
    Survey presentation toggle a48f67be2487b42ed0ad9d17bfdefe790949322ea21ea5aef0fa231bd336c53a
    By staying consistent to the basic aesthetic principles I developed, it was simple to design different abstractions whenever the traditional Likert scale started to feel redundant.
    Survey presentation liekert cad23ee2e7008d38a0caff1fa04dd40a43dc4d075eea15997bbcb4badb06eb2d Survey presentation cards ef7a6b357ac5a067d98d74a4142b4a4380f868344cc97a69ddca50b99b96e58a
  • When a section required additional context, I used subtle contrast techniques to insert elements such as sub-section headers and the Likert value key.
    Survey context b2fbeadc40e9b69622d8fbae9b21d85511195d9f232ebd635d4071f436f553fa
    I started with small desaturated text that barely popped above the darker background, then keyed-up the saturation just a notch to catch the eye without distracting from the primary text. The color is a significantly warmer gray than the cool, dark grays of the background, increasing visibility for these otherwise subtle cues.
  • I used subtle light and shadow effects to make the interactive elements of the survey, such as sliders and rating scales, pop in contrast to their flat contextual counterparts.
    Survey presentation slide 3185719caa0ef1c22fc46ea1bbbbd7181fa7db4a8febffaf2207a3d5c72c1c41
  • Contrast also played a large role in communicating user’s selections.
    Survey button states 394c1b2073ce73c4e35ed8f5597292f7edc43effd92e39be7bafa63390b518cc
    For consistency and visual interest I used the brand’s primary color in various states of saturation to indicate the difference between unmarked, hover, and selected states.
  • I designed a colorful yet inconspicuous progress bar to help users see their progress at a glance.
    Survey progress bar 4af1918eced740e4aa2697438fa9fa66915b5b9e242b32483cb7f356ba701e6f
    I used the client’s primary brand color to indicate the current section and one of the secondary brand colors to mark the previous pages. A gradient between the current page and previous page markers adds a sense of forward momentum.

Retrospective

Survey loading 6827fbcf9dbfcf083a7ce7fbd994ff7979457f1493d32c534cae062de246fb26

Design has gained some traction in the financial services industry, but its importance remains largely misunderstood at the strategic and tactical level with respect to the user experience. In designing this survey, thought was given to the language used to communicate with the respondent, however the UX team didn’t initially consider visual design in developing an engaging user experience. I was able to deliver the design elements even though I was brought on to the project late, however, I learned that when visual design is considered earlier in the development process, the team can work more efficiently to deliver a high-quality product.