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