This is the brief I will send out, along with bounty. @matthias: How much money do we have left in the budget?
Brief: Edgeryders questionnaire
We are deploying a new on boarding funnel for edgeryders.eu. Multiple overlapping communities are working on the platform to understand and solve problems. A vital part of this work is to invite new stories and perspectives, and to do so we want to create a simpler and more welcoming first contact with our communities. Our way of engaging people revolves around asking open questions relating to the subject matter we are exploring.
Our new on-boarding interface is a questionnaire where the answers get posted to edgeryders.eu, and the user would then automatically claim that content as their own when they registered on edgeryders.eu.
We are building the first version of it to be used on a tablet at the Biennale of Design in Ljubljana on November 14th. To leave some time for testing, the deadline to have the interface ready is November 1st.
Project scope
Edgeryders have already built the API which creates a user on edgeryders.eu with a given email and makes a post on that users behalf. This API is described in the Edgeryders API documentation, under 3.4. Multisite account creation.
This brief is for creating a fully client-side javascript form which collects:
A users email
Responses to a number of questions from a user
Some additional but voluntary data
It then should then:
Compile answers to questions into a Discourse post
Request a new account to be created with user email
Make post with compiled answers on edgeryders.eu as new user
Requirements:
Design of the app is shown here, and shows how it should look on a tablet. This design shows the actual questions that should be asked and all relevant copy.
App should follow the flow and logic described in API documentation
App should follow error handling recommendations and display relevant error messages when they are returned from API and advice user on how to proceed
Once post has been submitted, app should show the account summary as described on
App should be completely client-side and any code running server side, except for hosting.
The API work used approx. 1500 EUR. So 1500 EUR are left.
Two things I’d add to the brief in order to make the resulting software easier to re-use for our other projects, including by @nadia:
The question definitions should be configurable via a configuration file in JSON or YAML format.
The software should use the Vue.js framework. So that we can settle for that framework as our standard for single-page web application development, and are able to adjust and remix the different pieces of software that will accumulate over time using this framework.
I think you mean “completely client-side without any code running server side”.
I would like the questions to be in bold, starting the paragraphs - i feel like without them many answers will not make sense, so it’s better to have them, esp if someone skips a question for example.
Age - at the bottom of the post
I will add the missing data to the final screen - since there is information like this showing on the final page, after you hit submit, would it be sufficient or I have to add the data you described?
*you will receive the confirmation of your participation and access to delete or edit your data on your email, as well as the updates on the Academy of Life program and events. You can opt out at any time, no spam guaranteed.
I will submit an error-page design asap
Regarding the flexibility - can all the text be adjustable, so I don’t need to design the final page again, but just edit the text in the api when it’s ready?
And would it be possible to leave space for illustrations, visuals, on the side - esp when on desktop/tablet?
The text can be made easily adjustable via a configuration file, as I proposed above. To edit that configuration file, you’d have to edit it somehow, the easiest would be via the web-based editor on Github. After that, it has to be copied to the server from where the website is served (which can be automated, but that’s not always a good idea as it can break the site when somebody editing the Github repo is not aware of that side effect).
For what it’s worth - some of this work has already been done for the festival site. We have a basic component for forms that reads a questionnaire from a JSON file, breaks it down into question/answer instances and sends the response to a server. I can put that component on Github as ‘edgeryders forms’ and we can see where it goes from there, with perhaps an external developer to fill in the missing elements mentioned in @hugi’s post.
do the individual forms have unique urls @owen? It would be great to post links to open the forms directly from posts on edgeryders.eu (topics containing session descriptions) without having to go through the festival website. because that is where people would be coming from in the first place.
I have cross-posted it in the Discourse Meta forum, and I will also cross-post in NGI conversation.
Oliver will also send it to his devs at WorldBrain.
I made the domain bio26.edgeryders.eu and set up DNS with CNAME edgerydersbio26.netlify.com. @owen, this should already allow you to use it via Netlify by choosing that edgerydersbio26.netlify.com subdomain for the site you’d host there.
I’ve kept things simple, only taking the necessary elements to build a form from scratch, all stored in a single json file for now.
There are a few basic customisation options to get started, background colours or images can be set for the introduction page, the navigation elements adopt custom colours too.
Here’s an example of the festival ticket questionnaire:
festival_ticket: {
title: 'Festival Ticket',
slug: 'festival_ticket',
id: 'registration',
description: 'Sign up to the Edgeryders Festival, November 19-29th 2019!',
background: {
splash: '#1AA4B8',
standard: '#EDF2F7',
confirm: '#EDF2F7'
},
color: {
splash: '#fff'
},
link: {
name: 'festival.edgeryders.eu',
url: 'https://festival.edgeryders.eu'
},
splash: [
{
text: "<h1>So, you want to join the Edgeryders Festival in November?</h1> <p>Great! Your skills and knowledge are valuable.</p> <p>Participation does not cost money. You secure your ticket by filling out this form and following the instructions for some small and easy tasks that will be sent to you by email afterwards.</p>",
}
],
questions: [
{
question: "What is your email address so we can contact you?",
small: "Don't worry, we're not going to spam you.",
type: 'email',
id: 'email',
required: true,
},
{
question: "Your name or alias so we know what to call you?",
type: 'text',
minLength: 2,
id: 'name',
required: true,
}
]
I like it, it’s a nice to-the-point definition of what a form would need. We can take that format as a starting point for form-related software infrastructure that would also include the post-to-Discourse system that will be made by@gdpelican, initially for Natalia’s Biennale usage.
Can you publish it please? Best time is asap as it is relevant for @gdpelican as input for his development work.
What is the final consent funnel version for this? Do we have one, or should I prepare it? (as brief as possible)
I’d be happy to make one based on the Field Study Template Kit books, I just got them from a friend and they have basically everything for ethnographic research in them.
The map is to be changed at the end @gdpelican - let me know if it works
Also, will you use “live” text for the interface or the designs directly - because we also have a version in Slovenian language and I’d like to implement it as well, let me know what’s more convenient for you
there;s text in the design, and I need it to be available in two languages - do I send a whole interface design for both options, or would it be enough to just send the text in both language versions? Not sure if I explain myself well, brace with me
as it is relevant for 