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

What do users value? Creating a game-like survey with Next.js

What do users value? Creating a game-like survey with Next.js

Instead of using a boring traditional online survey, use Next.js to build an interactive, open-source budgeting "game" that has been used by over 40 government transportation agencies to find a user's true preferences.

Brendan Nee

October 27, 2020
Tweet

More Decks by Brendan Nee

Other Decks in Programming

Transcript

  1. Brendan Nee
    What do users value?
    Creating a game-like survey with Next.js
    @brendannee
    I'm Brendan Nee and we're talking about creating a game-like survey with Next.js to figure out what user's really value.

    View full-size slide

  2. My Company BlinkTag Inc works with transportation-related government agencies and non-profits to build web apps and mobile apps. One thing transit and
    transportation agencies often want is user feedback on transit system expansion and improvements. Agencies have a fixed budget with many possible things they could
    spend it on. While this talk is going to focus on the specific niche of transit agency surveys, the game-like solution to getting user feedback could be used for any type of
    organization, and the code for everything we'll discuss is open source so you can use this same style of gameified survey for anything you'd like.

    View full-size slide

  3. Surveys are boring
    A common way to get user feedback is with a survey. But surveys are not always a great way to get user feedback.

    First, surveys are boring.

    View full-size slide

  4. Users tire of lengthy surveys with large grids of similar questions, ranking style questions or questions that ask if they "strongly agree", "agree", "neither agree not
    disagree".

    View full-size slide

  5. People want everything
    Second, when asked, users want all the things. If not given any tradeoffs, why not ask for everything.

    View full-size slide

  6. Here is an example of a fairly ineffective survey, most people would answer "yes" to all of these questions since they are not given any tradeoffs or constraints.

    View full-size slide

  7. People don't know the costs
    Third, people don't know how much things cost. In the transportation world as in most areas, costs for different types of improvements vary widely.

    View full-size slide

  8. 7000X
    $350,000,000/mile
    1X
    $50,000/mile
    For example, a city could be considering adding bike lanes to a street and also extending an underground subway line. If asked which they prefer, users are not aware
    that subways cost at least 7000 times more per mile than bike lanes which could greatly change their opinion.

    View full-size slide

  9. Create a Game
    (Which is actually still a survey)
    I've worked with over 40 transportation agencies to develop a budgeting game (which is actually still a survey) that overcomes these downsides. Built with next.js, it is
    extensible and customizable, extremely easy to deploy and has admin features baked in.

    View full-size slide

  10. Here is how the game works. Users are presented a list of possible "improvements". each with a cost and benefits listed. They are given a budget and asked to select the
    set of improvements that they prefer. As they select and deselect improvements, the total cost of their selections is shown. Also, the total benefits across several different
    categories such as "environment" or "passenger experience" is visualized in realtime. They can see the impact of an specific improvement immediately and quickly see
    that some types of improvements cost much more than others and that you can't get everything you want.

    View full-size slide

  11. Enjoy participating
    Feel their voice has been heard
    Learn something
    The feedback from agencies and the public using these interactive game-like surveys has been overwhelmingly positive. Users really enjoy the game as opposed to a
    traditional survey. They feel that their voice has been heard and that their feedback is important. For agencies, not only are they collecting feedback as any survey would
    but are actually educating the public by teaching them the relative costs and benefits of proposed improvements.

    View full-size slide

  12. Admin CSV export of responses
    Translation support
    API route to save responses
    Reusability
    Why Next.js?
    Why is next.js such a good fit for developing this type of game? Besides all of the obvious benefits of next.js and react like ease of development, built in routing, caching
    etc there are several including reusability of the survey, translation support, built in API routes for saving responses to a database and creating an admin route for
    exporting formatted survey responses as CSV.

    View full-size slide

  13. Reusability
    data/strategies.js
    Reusability. It was important to make it easy to change and reuse this survey framework as needed. By structring all of the improvements as a JSON object, its really
    straightforward to add/edit/rearrange survey questions. Just add a title, description and some cost and benefit info and it shows up in the list.

    View full-size slide

  14. Translation support
    data/settings.js
    Translation support. Many agencies want the game to be in more than one language. By making all text on the site a JSON object and using Next.js routes,
    professionally-translated versions of the survey are easy to add in as many languages as needed.

    View full-size slide

  15. API route to save
    responses
    pages/api/save-survey.js
    API routes. Using next.js API routes, an endpoint for formatting and saving responses was easy to add. In this example, it saves the timestamp, ip and useragent along
    with all responses to mongodb - although it would be easy to connect to any type of database.

    View full-size slide

  16. API route to export
    responses
    pages/api/export.js
    basic-auth
    json2csv
    Environment variables
    Admin API route to export the results. Using HTTP basic auth and a new npm packages, here is the code for an endpoint that reults a CSV of all responses. It is
    protected by http-basic auth, so only admins who know the username and password stored as environment variable can retrieve the responses.

    View full-size slide

  17. Users love it
    40+ agencies
    Open source
    This gameified survey has been used by over 40 transportation agencies, including BART, Long Beach, Salt Lake City, las Vegas, Honolulu and many more. Users really
    love the format - feedback on the actual has been overwhelmingly positive. And it is open source.

    View full-size slide

  18. github.com/BlinkTagInc/design-your-transit-system
    Brendan Nee
    @brendannee
    [email protected]
    The github URL for the code is here. While all of the examples in this talk focus on transportation, there is nothing about this way of collecting data specific to that niche -
    you could use this to collect feedback from any type of user for any type of product. Feel free to build off of what we've already created or integrate this into a larger
    survey or application.

    Feedback and questions are appreciated my twitter and email are provided.

    Thanks.

    View full-size slide