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.
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.
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.
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.
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.
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.
save responses Reusability Why Next.js? 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.
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.
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.
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.
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.
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. Thanks.