Create "Splash Screen" on dashboard

[wonderchook]

We need some sort of intro for the dashboard so people know what they are looking at. This would be a good time to link to the documentation as well.

[wonderchook]

@nastynoel is going to be responsible for the wording that goes in this.

[clash99]

@nastynoel - Based on our conversation Wednesday I wanted to start a list of some examples of splash screens with various levels of engagement:

• https://storymaps.esri.com/stories/2016/national-park-memories/index.html (large photo covers screen and rolls back to reveal map)
• https://crowdsource.storymaps.esri.com/stories/science-fair (smaller area overlays map in background)
• http://www.wri.org/applications/maps/aqueduct-atlas/ (another smaller one)
• http://www.landmarkmap.org/map/ (small disclaimer)
• http://www.metoffice.gov.uk/food-insecurity-index/ (text page but love the video and tutorial buttons on the left of the interactive map)
• http://opendataenterprise.org/map.html (messaging is good)
• http://resources.amdigital.co.uk/ah/map/# (lots of text but done nicely in transparent layer)
• http://www.sprawiedliwi.org.pl/wystawa/dobry-adres/en/ (splash page clicks to map that includes help text in lower right box)
• http://www.fiftythree.com/paper (video of what paper does)
• http://unionstationdenver.com/ (lets you pick the video you are interested in)
• http://oceanplanning.wwf.ca/#!/home?view=64.9486|-90.1108|4||928|794&layers[]=oceans (dedicated area on right that stays throughout site)
• https://timeglo.be/1799/1816/napoleon (dedicated area on left)
• http://muxlab.github.io/map-effects-100/Leaflet/17_map-on-video.html (not really a splash page and a little crazy but inspiring if we could tell our story on one layer and interactively map on another)

[wonderchook]

Thanks for gathering all of these Chandra. I think we need to think through a couple things:

1. What are we asking the user to do?
2. What is our overall message?

Feedback I got recently on the demo site was that the person didn't now they could make an org and project and then would have full permissions to do everything. I'm not sure if we communicate this here, but perhaps we should have some level of explanation.

Another question: Should this be customizable? Do we want to say something on demo that is different than the platform site?

[nastynoel]

Thanks, Chandra!

I think the first few examples are close to what would work initially for us to briefly provide users some more additional info and options for even more detail. The second and third options in particular offer a good starting point.

I like WRI’s option there of additional links with some limited messaging.

I do think we need a different splash map for demo vs. production.

As our repository of materials, videos, etc. grows, I can see us graduating that opening dashboard, or updating the land page, to be more like some of the later examples you’ve captured.

From: Kate Chapman [mailto:notifications@github.com] Sent: Saturday, 30 July 2016 3:45 AM To: Cadasta/cadasta-platform cadasta-platform@noreply.github.com Cc: nastynoel ntaylor@cadasta.org; Mention mention@noreply.github.com Subject: Re: [Cadasta/cadasta-platform] Create "Splash Screen" on dashboard (#492)

Thanks for gathering all of these Chandra. I think we need to think through a couple things:

1. What are we asking the user to do?
2. What is our overall message?

Feedback I got recently on the demo site was that the person didn't now they could make an org and project and then would have full permissions to do everything. I'm not sure if we communicate this here, but perhaps we should have some level of explanation.

Another question: Should this be customizable? Do we want to say something on demo that is different than the platform site?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Cadasta/cadasta-platform/issues/492#issuecomment-236246237, or mute the thread https://github.com/notifications/unsubscribe-auth/AOLqSm92w4bHYtT7GYrKDRkK5yWlBpYYks5qajwogaJpZM4JSNOx .

[clash99]

For collecting feedback or contact us links, should we use the current email address available on the contact us page of Cadasta.org (info@cadasta.org)? Have we thought of developing a form specifically for platform feedback?

[wonderchook]

info is fine for contact us.

We should think through the feedback path as well. I think a form would be useful.

[nastynoel]

Here's an initial thought on content and layout for a small overlay splash screen. my lovely button selections are obviously just there as placeholders. they would be Alexified to align with our branding. buttons would take the user to their selected option. Behind those we could have links that re-direct to forms for feedback, one for email, etc. https://docs.google.com/a/cadasta.org/document/d/1VRF9cOZx_D29pQD2uGGaOFsnyyKuLS9ClN_zjze0cVc/edit?usp=sharing

We should also think about improving the pathway for providing feedback from within the Platform itself. Maybe change the "i" label on the tab to Support and build out more support links there with videos, links to user guides.

[nastynoel]

I should also point out that the draft is for the Demo site only at this point

[clash99]

@wonderchook and @nastynoel:

Here is the first pass at some splash/onboarding options for the demo platform: https://drive.google.com/a/cadasta.org/file/d/0BzpiEtMtHC3rU21OQXJ0SmRhUHM/view?usp=sharing

My goal for these pages is to help new users become successful within our platform as quickly as possible. As you can see I've tried to reduce the number of options a user has to pick from to only one or two initially. We want to provide some choices, but not overwhelm.

These are based off using something like Appcues (http://www.appcues.com/) to provide short guided tours through various sections of our website. I think there are lots of advantages to this such as contextual user-guided tours, a/b testing options, ability to share access to creating and managing these tutorials across team members, maintenance of screenshots in documents becomes non-issue, and lots more.

I'm going to revisit these on Monday with a fresh head. Let me know your thoughts. Thanks!

[wonderchook]

@clash99 looks great. I think the 1st option is the best one. How difficult will this be to implement?

[clash99]

@seav - this is still in progress but I have a few questions I was hoping you could help with:

• What is the best way to implement a page to only show on the demo site? Eventually we will serve different variations of the page to the different sites, but for now we just want this to show on demo.cadasta.org.
• The functional tests are breaking because the modal backdrop covers the map and the map points aren't clickable. Once I'm done can you adjust the functional tests so that when the splash screen is on, it ignores the clickable map points test?

Let me know what you think - I'm working on this today.

[seav]

@clash99: For the first question: I think the best way is to set a variable in Django settings. If you'll notice when you follow the link, we already provide different settings for production vs. development. We can split the production settings into the actual platform vs. the demo platform. I think the easiest setting that we can add is the name of the splash template to use, and we then provide either selectable templates like splash_demo.html and splash_production.html.

[seav]

For the functional tests, sure I can help with fixing them. Just tell me when you are ready.

I guess I just need to add code to close the splash screen so that normal testing steps can proceed?

[clash99]

Quick synopsis of reviewing third-party walkthrough providers.

Important features for us initially:

• Easy implementation
• Customizable css
• Multi-lingual
• Multi-page walkthrough
• White label
• Pricing
• Web and mobile-web support
• Analytics
• Local host supported
• Nice to have additional help features such as hotspots, inline help, chat

Reviewed these third-party walkthrough providers:

• WalkMe
• MyTips
• InlineManueal
• AppCues
• TourMyApp
• Tutorialize.me
• Iridize
• Intercom
• Intro.js
• Joyride
• Helppier
• Nickelled.com
• WhatFix
• Chameleon

[clash99]

Screenshot for splash screen walkthrough of dashboard for DEMO platform.

I'm still working on the last screen and some formatting issues. This is meant to be a more "hand-holding" type of walkthrough of the dashboard. I think we should continue to build more of these out for targeted interactions such as drawing a project boundary on the map, adding member permissions, etc.

@fhpichel and @dpalomino: If you have a minute, I would love another set of eyes to look for typos, grammar, etc. in the style that would be most useful for our audience.

[fhpichel]

@clash99 thanks for the work on the splash screen / walk through. One quick comment, on the last image (What do you want to do next?) with the left side (Start exploring...) would browsing the map be in the demo platform or production? We should make clear and also reiterate that it would only be the public projects that are seen

[clash99]

@fhpichel - All links would keep the user on the production site (except for the link to the production site). I will make sure to include "public projects" in text whenever possible.

[clash99]

• Added splash walkthrough of dashboard that shows once for everyone upon visiting Cadasta demo platform home page. This can also be triggered by "i" underneath left map controls on dashboard. This trigger is a temporary fix until info link in header gets replaced with full help section where these walkthoughs will be available all the time. (#622)
• Added trigger for demo user sign-in walkthrough that appears as "?" on sign in button to public users.
• Added simple project walkthrough that is more of a tour of the project layout rather than a full tour of a project. This needs more polishing because I need to figure out how to get conditional variables to work within a walkthrough to prompt a user to login as a demo user if they are not currently or logout/login if they are currently logged in as another user. (#623) Once that logic is in place, we should link this tour to actions such as create a new project or create a new location.

[clash99]

@wonderchook: Updated text on splash screen. Shortened it to make it more scannable - let me know if we should modify:

[wonderchook]

We use "Design, Collect and Share" where we describe the platform., but that seems a bit awkward to me to use here. Any ideas?