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 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.
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.
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".
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
brendannee
makenowjust
yui_knk
os1ma
ufoo68
kokuyouwind
fornewid
ksudate
munetoshi
shioyama
iberianpig
jmatsu
jrom
tanoku
myddelton
lara
revolveconf
paulrobertlloyd
mojombo
yeseniaperezcruz
eitanlees
matthewcrist
jeffersonlam
cromwellryan