Matt Segal Dev

Django project blueprint: wireframes

Sat 03 October 2020, by Matthew Segal
Category: Appendix

This post is an appendix to my post on designing a Django project. This page shows all the wireframes for the app, with some additional notes for each page.

Page designs for the user who answers the survey

This section covers the pages required for the "survey taker" user journey:

journey for survey taker

Taken literally, this journey suggests that we should build ~3 pages.

Starting the survey

The person taking the survey should start on a "landing" page, where we explain what's going on and invite them to take the survey.

landing

The "start survey" button can just be a link to the next page.

Answering the survey

Next, we need a page for the survey taker to actually answer the questions.

survey answering page

You will need to render all of the questions on the survey inside an HTML form. The "submit" button should trigger a POST request to the backend.

If you want to answer multiple questions on one page, then you will need to use a more advanced feature of Django: a formset. I found this blog post and this other one useful for creating my formsets, along with the official Django docs on formsets.

Alternatively, you could have one page per question, which would mean splitting up this single page across multiple pages, but it would make your Django forms simpler.

Survey submitted

Once the user submits their answers for the survey, they should then receive confirmation that everything worked so that they don't try to submit the survey again or get frustrated. When they click "submit", let's take them to a "thank you" page.

thanks page

That's it for the survey taker. Next let's look at the survey creator pages.

Page designs for the user who creates the survey

Here's the "survey creator" user journey again.

creator journey

The correspondence between this journey and the pages won't be exact, but it'll be pretty close.

Landing page

We should start the user's experience with a landing page, where we will explain the app to the user and invite them to log in with a call to action button.

landing page

The button can just be a link to the login or signup page. If you're not sure what to write for the landing page, check out this article.

Signing up

We need a signup page for new users to create accounts.

sign up

There should also be a link to the log in page from the signup page, just in case a user who alread has an account gets lost. This blog post is a good guide for how to create a sign up view in Django.

Logging in

We also need a login page for returning users.

login page

Use a LoginView for the log in view. More details on this view class at CCBV. There should be a link to the signup page from the login page.

Survey list

Where do users go after they log in? There are two viable options. You could send them straight to a "create survey" page, or you could send them to a "list" page, where they can see all their surveys. I chose the list page option, becuase I think it's less disorienting for the user and less complicated to implement.

survey list

For this page to work you'll need to grab all of the Survey objects that the user has created and list them in the HTML template.

In this wireframe, a survey can be either in an "active" or "editing" state, where if the survey is "active" then the user can view the results and if it is "editing" then they can add more questions.

This is the first page we've seen that is specific to one user. You need to implement authorization so that one user cannot spy on another user's surveys.

Create survey

On this page a user types in the name of a new survey, and presses "create survey" to create a new survey with that name.

create survey

This can be implented with a HTML form which sends a POST request to a Django view. You will need a Django Form to validate the data.

I have broken the "survey creation" pages (this page an the ones after it) up into many stages to try and make the Django views simple. This is not the only way to design pages for the "survey creation" feature, and you can do this differently, with fewer pages, if you like.

You will need to think about authorization for this view, and all the other views where the user can change data. We don't want users to be able to change the data of other users. You will need to write some code in your views to check that the user who is changing some data is also the user who owns it.

Edit survey

On this page a user can add questions to the survey they just created.

edit survey

Clicking "add another question" takes the user to a seperate "add question" page. The user can add as many questions as they like until they are ready to make the survey "active".

When they click "start survey", the button should use an HTML form to send a POST request to a Django view which moves the survey from "edit mode" to "active mode".

Add a question to survey

On this page the user can create a new question for the survey. They type in the prompt for the question, like "what is your favourite colour?" and then click "add question" to create the new question.

create questions

Add options to a new question

On this page the user can add multiple options to a question that they just created.

add options

Survey details

This is the final page that a user who is running a survey wants to look at. They will view this dashboard to check the answers of a survey that they've created and sent out.

This page tells the user how many people have answered their survey and what percentage of people chose each answer.

survey details

You will need to do a bit of maths in the view for this page. You can calculate the percentages using some fancy database queries using aggregation. Otherwise you can query the Survey model, its Questions and all of its Submissions and their Answers. Once you have pulled all the data you need into memory, then you can write a for loop or something to do the percentage calculations. I recommend using filter and count in your queries.

When thinking about database queries for this view, you should imagine that you have thousands of surveys and each survey has dozens of questions and hundreds of answers.

You will need to implement authorization on in this page's view so that only the user who created the survey can view the results.

If you have any feedback or questions email me at [email protected]