Preparing the new interface for edgeryders

Final API documentation is now available, for the system as implemented.

Ok, finally, after tumultuous developments we have it - the final tablet version. If it’s ok and everyone agrees, I will tomorrow have the mobile and desktop versions as well:

Questionnaire digital 30.09.19 FINAL.pdf (67.7 KB)

I hope it’s all clear if not, I am here to answer any question

the Exit button comes at some point - in my mind, it would actually transport you at any point to the final slide, where you have to give your data and submit. So the information that you can finish anytime will show once you hoover over it. Would that work? Very sorry it took so long. TAblet is most important as it will be part of the exhibition, so let’s start with it.

1 Like

I ask that you

  1. mention that this tool has been built with support from the Edgeryders community and organisation.
  2. make sure the code is uploaded onto our github repository.

Of course, I have already sent the credits for the catalogue print and the exhibition design.

I am really thrilled to have been able to get Er to a biennial and to cook up this little thing - very excited to see how it works.

I will make sure the code is there.

@owen and @hugi, let me know if there’s anything you’d like to change, and if not, how long do you think this might take?

Thank you all

Questionnaire digital iPad 01.10.19 FINAL.pdf (68.3 KB)

With a tiny update - this won’t change, we’re moving forward with the mobile and desktop

There are some things that need to be added for the design to work with the API.

  • How should these answers be compiled into a post? How should it look on the platform? Should questions be made into headlines and bunched together? Headlines are quite long.
  • Where should the age information be stored? API has no place to store it except in the post. Should it be included there, like “Age: 54” at the top of the post?
  • Check point 6 under “Typical usage” under 3.4. Multisite account creation in API description, the design needs to include that “Account summary” page once a submission is completed.
  • This design does not include how error messages should be handled. Either include that, or the developer will just use the simplest “out of the box” design which you might not be happy with.

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.
  • App must be delivered by November 1st.

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:

  1. The question definitions should be configurable via a configuration file in JSON or YAML format.

  2. 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”.

  1. 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.

  2. Age - at the bottom of the post

  3. 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.

  4. 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?

1 Like

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).

1 Like

Questionnaire digital iPhone.pdf (67.9 KB)
Questionnaire digital iPad 01.10.19 FINAL(1).pdf (68.3 KB)

Once again, final versions (we changed the progress bar for smaller, leaner dots) for tablet and mobile

I expect to have the domain registered by the end of the week as well

1 Like

It looks very nice @natalia_skoczylas.

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.

3 Likes

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.

1 Like

@nadia I can implement this.

Ideally we’ll set up an address - something like forms.edgeryders.eu to host all the forms we use. Will ask @matthias.

2 Likes

and the desktop is ready now as well

Questionnaire digital desktop.pdf (67.9 KB)

I have posted the bounty here.

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.

The domain could be retirement.edgeryders.eu or bio26.edgeryders.eu @owen - we will also have a domain provided by the museum, we can use it as an alias

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.

Ok, thanks @matthias

This is our setup for the general forms across different ER projects: https://edgeforms.netlify.com/

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,
      }
]