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.
What do users value?
Creating a game-like survey with Next.js
I'm Brendan Nee and we're talking about creating a game-like survey with Next.js to ﬁgure out what user's really value.
My Company BlinkTag Inc works with transportation-related government agencies and non-proﬁts 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 ﬁxed budget with many possible things they could
spend it on. While this talk is going to focus on the speciﬁc 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 gameiﬁed survey for anything you'd like.
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.
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
People want everything
Second, when asked, users want all the things. If not given any tradeoﬀs, why not ask for everything.
Here is an example of a fairly ineﬀective survey, most people would answer "yes" to all of these questions since they are not given any tradeoﬀs 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 diﬀerent types of improvements vary widely.
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 beneﬁts 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 beneﬁts across several diﬀerent
categories such as "environment" or "passenger experience" is visualized in realtime. They can see the impact of an speciﬁc improvement immediately and quickly see
that some types of improvements cost much more than others and that you can't get everything you want.
Feel their voice has been heard
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 beneﬁts of proposed improvements.
Admin CSV export of responses
API route to save responses
Why is next.js such a good ﬁt for developing this type of game? Besides all of the obvious beneﬁts 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. 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 beneﬁt info and it shows up in the list.
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
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
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
This gameiﬁed 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.
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 speciﬁc to that niche -
you could use this to collect feedback from any type of user for any type of product. Feel free to build oﬀ 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.