Quiz: Mock up and implement front-page quiz

[jessicaschilling]

Take the question(s) outlined in #204 and mock up a visual presentation of how this will manifest as a front-page quiz on ipfs.io. (ETA: This issue now extends to implementation of the quiz, primarily under PR 323, ipfs-inactive/website#323 )

• Visual state for unanswered question
• Visual state for answered question and cues to go to next steps
• Indicator of what elements will be used to trigger the metrics we want to collect
• Visual state for some form of thumbs-up/down or "is this helpful?" feedback mechanism
• Anything else?

Testing on this effort is taking place under #247, which is itself part of the larger test plan in #207.

[tapaswenipathak]

Hi @jessicaschilling, @ericronne: Can I add the quiz mock up visual presentation? or is the ticket internal?

[jessicaschilling]

@tapaswenipathak We don’t have the questions from #204 sorted out yet, but if you’re interested in talking through ideas for a mockup, please chat with @ericronne (I’m away from work with extremely limited connectivity for a few days). Thanks!

[jessicaschilling]

Notes: I'm going to close PR #217 (affiliated with this issue) without merging for now, since the questions that @tapaswenipathak include in her useful outline in the PR are better suited to a future (longer-form) version of this quiz. I've captured her outline in issue #204, since that issue creates a dependency for this one: this issue is more for creating a visual mockup of the quiz questions we settle on in #204. Thank you!

[ericronne]

Mocked up a design with WIP "quiz" content (#204, content development underway in hackmd). This approach creates a big drop-down selector for the user options, and removes the two current hero-area buttons (an anchor link to another section of the page, and a link to a video from 2015 💀— which is also duplicated elsewhere on the page).

I'm not a big fan of burying content inside of selectors, but i conjecture that the high-profile design treatment here will invite users to interact. We should test that theory

Designs for discussion …

Default

Expanded

[ericronne]

An alternate approach @cwaring and i discussed: situating the questions on a sub-page. This reflow is also meant to simplify the install experience, which is currently scatters information in disparate sections of the docs site (as well as the Implementations panel on the home page).

Ipfs.io current high-level experience flow overview

Reflow (for 1- to 2-week test only, perhaps) with integrated goal-based pathways

Invision wireframes for discussion

Please feel free to use the invision comments tool while clicking through the prototype

[ericronne]

I've added an accordion option, which simplifies things a bit (fewer pages, easier implementation …), and also included a feature enabling text-based feedback.

Flow for accordion concept

Revised Invision prototype

[jessicaschilling]

@ericronne @cwaring Sorry to be so slow on responding, I was in transit yesterday! The Invision mockups are awesome. 😄

I really like the redesigned install page with its desktop-first push, and I assume we'd go with these changes no matter what we decide to do with the quiz -- correct?

Of the three options for the quiz content, I'd vote for the accordions in the sense that they're compact and a path of least resistance in terms of not taking the user off the page. However, I'm a bit concerned that by putting the accordions on their own sub-page, we're diluting the power of the quiz by pushing it behind a click -- and we're also in a sense forcing the user to make a decision ("I want to do this quiz") while they still might be in the mental state of just wanting to flicker around the IPFS front page. With that in mind, I'd suggest anything we can do to get the accordions onto the front page without drastically increasing the page's length. What about ...

• Continuing to have the quize fire from the "Get started" button (maybe change that to "Start now"?), but have a click on that button scroll down to an in-page section ...
• ... which could be where the "Here's how IPFS works" section lives now
• Particularly because I've always suspected that "Here's how IPFS works" should live below "IPFS is useful here and now", since "how it works" is more technically complex

If we do these things, we should also probably take a pass at streamlining the language on the front page as a whole. I suspect we probably have about 20% more words on there than we actually need.

Thoughts?

[cwaring]

Hello friends.

Thanks for mocking this up @ericronne! It's looking great. For the benefit of everyone else I'll share some of the thoughts behind this approach and why I believe the additional work to refactor the installation flow will help us to collect the most appropriate data to aid our decisions here.

Using a single CTA button at this point means we can keep the hero area simple and use the funnel to guide people towards the appropriate place as a stage 2, providing an area we can continue to refine. For simplicity this could live as a section on the homepage for now but we can test both options at build stage.

First challenge was trying to reduce the possible options down to the smallest distinct categories to allow people to self identify without out too much decision fatigue. The current proposed set:

1. Develop an app using IPFS (I'm a dweb builder help me get started -> install page)
2. Store and share files with IPFS (I'm most likely looking to use IPFS in a personal capacity)
3. Securely manage large amounts of data (Most likely using IPFS in some sort of professional, enterprise or commercial capacity)
4. Learn about the distributed web (HALP, what is this IPFS/dweb thing?! - I'm most likely a beginner lets show helpful links)
5. Other - open feedback form to inform us of capacities we should be aware of

I'd appreciate your thoughts here so we can refine them while implementing the final flow.

To help support these actions it felt like we also needed to do a better job guiding people to the appropriate install option. Now that IPFS Desktop installs go-ipfs on the path and supports auto-update this should cover the majority of our use-cases, so making that the default route seems appropriate. Once we have more data we can further optimise the order of this page.

As for analytics. I'm interested in which category a person identifies with and what their final action is so we can start to paint this picture. I will setup events for when someone expands a section and the links they click following.

@jessicaschilling I agree with your points about the rest of the homepage too, I'm being cautious to not let this creep into a full rework at this stage (so many more things I also want to tweak!). However we could take the opportunity to reorder things to improve the narrative.

Ultimately I'd like to end up with two CTAs on the homepage, anymore just creates confusion:

• "Get Started" (primary) -> jump to new quiz flow
• "Learn More" -> jump to homepage explainer details

Happy to tweak the language of these actions provided they broadly mean the same.

I'm also bullish on dropping the "implementations" section/link in favour of an all inclusive install page but we should revisit that once this initial work is complete.

📈✨🧙‍♂️

[jessicaschilling]

@cwaring -- thanks for all these notes! I like your four categories. (I'll keep the larger set of more specific ones to inform the personae, but that's another thing!)

DEFINITELY agree on reworking the install info page to be desktop-first; we've discussed that in a number of other contexts (specifically #188 but there are other conversations around the fringes). Do we actually want to tackle the work you've described here vis-a-vis install info in #188 instead, so we can parallel-process them? (Agreed that the two pages are symbiotic, but if they don't launch at exactly the same time, that's not a killer, IMO.)

As far as avoiding scope creep in the homepage itself, maybe let's agree that rearranging sections = OK, but reworking sections = not OK? (I could also open a separate issue for "streamline homepage language" and work on that myself without disturbing the flow of this issue.)

Finally, re button CTA language, what about:

• "Start Now" (the "now" provides some immediacy and differentiates from the other CTA): quiz
• "Learn More": homepage explainer details

cc @ericronne, because the outcome of this conversation will involve changes to his wonderful wireframes (sorry!).

[ericronne]

Good thoughts @jessicaschilling. Porting the install rework over to #188 will help us launch the quiz sooner, so 👍

In the interest of driving traffic to our quiz, i'd vote to have only one button. Since many product sites use "Get started" as their primary CTA, that still feels close to right to me. The content it drives to is a little broader than what you'd normally find when clicking "Get started" on a website, but … maybe close enough. The fact of it being the only high-profile option above the fold should help it draw lots of clicks.

[jessicaschilling]

Maybe a primary and secondary-styled button? Or a button with text link underneath for the secondary CTA?

[ericronne]

The other issue is that the quiz covers both "Learn more" and "Get started" folks.

[jessicaschilling]

That's true. If we nix "learn more" and make everyone pass through "Get Started", at least for now, I don't feel that's egregious.

[ericronne]

These days, "not that egregious" feels like a pretty good benchmark 😆

[jessicaschilling]

And kidding aside, we might have some interesting stuff to learn metrics-wise if we just have the one CTA. Forcing people to go down that path, at least initially, will net us more info.

[jessicaschilling]

@ericronne @cwaring -- I left a bunch of text suggestions in the accordions version of the InVision mockup. (You'll probably need to invoke comment mode to see them.)

Didn't touch the install page text yet, since that's less of an urgent matter, but hit me up if you want any thoughts from me on that sooner rather than later. 😄

[cwaring]

Thanks @jessicaschilling!

[ericronne]

WIP sketch file on g-drive

[ericronne]

Click to check out the working content doc for expanded accordions!

[jessicaschilling]

(Note that the content doc is missing links ... it's at least a useful start, though, hopefully.)

[jessicaschilling]

Rolling #206 into this issue for historical trackability and closing #206.

[cwaring]

Hi folks! I've got the prototype in place for the get started section and have captured a few outstanding tasks. What was decided in the way of content for each section? To keep things organised I suggest we start to add the links required to this spreadsheet, then I can update the web version.

[jessicaschilling]

@cwaring -- I added 3-4 bullets to each of the headers in your spreadsheet, including links. For the first section (learn about the distributed web), I also added a link to Juan's TEDx talk with the intention for that to be displayed as a thumbnail; I know one of @ericronne's mockups had allowed space for video thumbnail links over to the right. However, I'm having trouble finding video content that's apropos to the other three accordions that originated from PL -- which, of course, highlights a need in our overall docs effort!

I'm not 100% thrilled with the destinations of the links -- as in, I wish our docs were better right now that I could point users to more complete/specific/detailed/whatever resources -- but I hope these will act as good straw-man content: useful to users at least as a starting point, and useful to us for collecting metrics about which of these areas of content we should tackle first.

Hope this is useful; please keep me posted.

[cwaring]

Thanks @jessicaschilling, I'll drop these in later today so we can evaluate further. My hypothesis is if we see a lot of interest in one particular area that will help us prioritise the content creation.

[jessicaschilling]

Leaving this open until merged changes from ipfs-inactive/website#326 and ipfs-inactive/website#327 are deployed; otherwise I think we re good to go.