[MyMeta] Add new block – functionality & templates

[peth-yursick]

We need people to be able to embed more things into their MyMeta profiles.
Right now the only options are the default profile creation elements but we need to make it customizable.
The simplest "add new block" template to add will be an ability to embed links.

More "add new block" template options:

• Dework task completions
• Forum stats
• Verifiable Credentials (from any VC project or eg. course certificates from Coursera)
• Past work template
• Past work imported from LinkedIn
• Random expertise, skills or traits
• Beliefs
• Random questions
  • How to work with me
  • Goals & aspirations
  • Other interests or activities
  • Describe yourself in 1 word
  • ???
• Supplies & demands
• My tone of voice (how to read my text)
• Talk to work ratio? 😁
• A pie chart of tokens in the wallet (no numbers, just %)
• ???

There are more & more reputation & identity protocols as well as web2 & web3 platforms that have data that may be interesting for people to plug into their MyMeta profiles.
The meta solution may be to start integrating more things into MyMeta rather than just looking to integrate MyMeta in other places. If we can aggregate all of data points from different platforms into a single user profile, that could make it the default profile for people 🤷‍♂️
More thoughts in this thread.

• Things on 3box we haven't added yet
• Additional field for contact (an email form?) or a calendly or savvycal embed
• Discourse stats
• Coordinape contributions
• Quest completions
• Discord stats (for guild profiles)
• Gitcoin stats
• Dework tasks completed
• Rabbit Hole
• lvl protocol
• Dework
• DeepSkills
• DAO stats
• Dune Analytics
• Diamond DAO
• ???

[davort]

I'd like to take a stab at this, from a design POV. Where can I see the "add new section" button exactly? Couldn't find it in my profile page once logged in.

I realize that this in itself might not be essential for designing these section templates, but can't help my curiosity :)

[peth-yursick]

I'd like to take a stab at this, from a design POV. Where can I see the "add new section" button exactly? Couldn't find it in my profile page once logged in.

I realize that this in itself might not be essential for designing these section templates, but can't help my curiosity :)

Weird, used to be right here below these other sections..

Guessing it was removed because it was not functional, so here's how it was in the design

[davort]

Thanks @peth-yursick – this helps a lot to get some context around the problem at hand :)

[luxumbra]

@davort have you made progress on this? If there's no frontend builder effort here, i'd be up for building out these templates based off your designs/wireframes.

[davort]

Hey @luxumbra - no progress to speak of yet, but there might be in near future, now that you're kindly offering to help! 😊

[davort]

@peth-yursick
Could you please write a sentence to describe each of the section templates you suggested in #264 (comment)?
Thanks!

[peth-yursick]

@peth-yursick
Could you please write a sentence to describe each of the section templates you suggested in #264 (comment)?
Thanks!

Let's just start with two?
Ok, one it is!

That one is probably both simplest & most important to implement: allow people to embed anything they want.
This should function pretty much as posting anything anywhere. It would be used for pinning any link to your profile.
You end up with something like this:

The next ones on the list (though not necessarily second most important) is "credentials & past work".
Past work is for something like on linkedin, where people post their course or university completion credentials & "past work" for where people write "I worked at X place as an Y, I did this, this & that for this long"

Clicking "add new section" could open a prompt offering a few options, one of which is functional (link embedding) & the others that would serve more like "thank you for voting for this feature to get implemented next :)". But that's just a random weird user testing/analytics idea I just had 😂

[davort]

Thanks @peth-yursick, sounds good! We'll start with those two templates then.

@luxumbra – seems like we have a 2-part challenge here:

1. Figure out the general flow of adding/editing new sections
2. Configuration/design of sections, respectively

I'll get down to making a quick wireframe and run it by you ASAP.

[luxumbra]

1. Figure out the general flow of adding/editing new sections

Maybe for adding, clicking the 'New Block' button loads a list of block types that are available, the user selects the type and the relevant form is loaded into the 'new block' container and displayed on save. Similar flow for editing but with an edit/settings icon, top right of the section, that when clicked, loads the edit form in the container.

I'll get down to making a quick wireframe and run it by you ASAP.

I look forward to having a look! 😄

[luxumbra]

Link to initial wireframe from @davort https://www.figma.com/file/zDHqledo5H2aKR3KDvbur8/Meta-Game?node-id=6818%3A33

[davort]

I updated the wireframe, and made a quick prototype: https://www.figma.com/proto/zDHqledo5H2aKR3KDvbur8/Meta-Game?page-id=6814%3A1840&node-id=6818%3A33&viewport=600%2C322%2C0.47077539563179016&scaling=scale-down

@luxumbra – please take a look and check the questions I listed at the bottom right corner of the last screen. Are any of the questions unnecessary? Are there any missing? Which ones would you prefer having mockups for, before you start building this? Let me know!

[luxumbra]

I updated the wireframe, and made a quick prototype: https://www.figma.com/proto/zDHqledo5H2aKR3KDvbur8/Meta-Game?page-id=6814%3A1840&node-id=6818%3A33&viewport=600%2C322%2C0.47077539563179016&scaling=scale-down

@luxumbra – please take a look and check the questions I listed at the bottom right corner of the last screen. Are any of the questions unnecessary? Are there any missing? Which ones would you prefer having mockups for, before you start building this? Let me know!

Thanks for the update @davort 👍🏻 I'll take a closer look this afternoon. One thing I did think on first look was that it would be nice to have the preview like you had in the modal version. So it loads the preview below the input when the user inserts the embed URL?

@peth-yursick any thoughts on this, ser?

[davort]

Thanks for the update @davort 👍🏻 I'll take a closer look this afternoon. One thing I did think on first look was that it would be nice to have the preview like you had in the modal version. So it loads the preview below the input when the user inserts the embed URL?
Yeah, sure it would be a nice reassuring moment in the flow. It's not a "must-have" IMHO, but definitely a "nice-to-have" feature 👍 How about feasibility?

[luxumbra]

Yeah, sure it would be a nice reassuring moment in the flow. It's not a "must-have" IMHO, but definitely a "nice-to-have" feature +1 How about feasibility?

Sorry for the delay @davort. We are going to want to render what the preview would display as the embed anyway when the user saves their link. This would just be making it more async.
Due to CORS issues, we can't just fetch the html of another site and pull the relevant tags within React. It needs a little node.js to handle it. There's a few node packages that will do it but I'd like to ask for input from one of the other builders - @mquellhorst @dysbulic or @dan13ram perhaps?

[davort]

Sorry for the delay @davort. We are going to want to render what the preview would display as the embed anyway when the user saves their link. This would just be making it more async.

Good thinking. Users are probably more willing to wait for the preview to render during the process of adding the block than after they hit the "Save" button, anyways. This way, when they save it, it will be instantaneous.
I'll expand the prototype with that bit.

[davort]

That one is probably both simplest & most important to implement: allow people to embed anything they want.
This should function pretty much as posting anything anywhere. It would be used for pinning any link to your profile.
You end up with something like this:

Hey, @peth-yursick !

1. How did you come up with this particular screenshot/mockup?
2. Is it us who will decide what the preview will actually look like, or will it come "predefined" in some way, and we'll just need to "make it fit into the box"? (cc @luxumbra)

[luxumbra]

• Is it us who will decide what the preview will actually look like, or will it come "predefined" in some way, and we'll just need to "make it fit into the box"? (cc @luxumbra)

@davort - We will be grabbing the content of the relevant Open Graph data from the Meta tags (og:image og:title og:description) from the page being linked to by the user, so will have control over how the preview is displayed.

[davort]

Thanks @luxumbra!

I've updated the mockups: https://www.figma.com/file/zDHqledo5H2aKR3KDvbur8/?node-id=6814%3A1840

And here's a quick prototype for the happy path: https://www.figma.com/proto/zDHqledo5H2aKR3KDvbur8/Meta-Game?page-id=6814%3A1840&node-id=6818%3A33&viewport=600%2C322%2C0.47077539563179016&scaling=min-zoom

Notes and questions

1. You'll notice I added og:url at the very bottom of the block. What are your thoughts on that?
2. Next I'll do "Edit/Delete" flow, and I'd like to make a design for errors. Can you think of some errors that users might run into during this workflow?
3. Mobile version will come after that.

[luxumbra]

Looking good.

• You'll notice I added og:url at the very bottom of the block. What are your thoughts on that?

Nice. I guess i thought we'd just add the url they pasted as it might be a link to a referral or something but we could display the og:url value and have the pasted URL as the destination of the link?

• Next I'll do "Edit/Delete" flow, and I'd like to make a design for errors. Can you think of some errors that users might run into during this workflow?

Sweet!! With regards to errors:

• Invalid URL which shows the correct format to use, ie: ensure http/https is included
• Failed request - please try again. In the case of a 404 not found, forbidden, 500 internal server error, etc on the resourse being linked to. I imagine this would just display the contents of the error message and a prompt to try again?

• Mobile version will come after that.

Smashing!! 🙂

[davort]

@luxumbra – please check out the Edit/Delete flow in the prototype 👉 "Add Block" on Figma

Let me know your thoughts! cc @peth-yursick

[luxumbra]

@luxumbra – please check out the Edit/Delete flow in the prototype "Add Block" on Figma

I like this @davort 👍🏻 Maybe it would be good to add a "success/error" notice once delete is pressed, before the section is removed or if it fails? 🤔

[peth-yursick]

@luxumbra – please check out the Edit/Delete flow in the prototype "Add Block" on Figma

I like this @davort 👍🏻 Maybe it would be good to add a "success/error" notice once delete is pressed, before the section is removed or if it fails? 🤔

This reminds me, at some points I'd like to go through & put in more thinking around all the text on MyMeta, on each step, prompts, error messages etc. to align it with MetaGame's voice.. Is it easier if I do that now or do a full run-through later?

[davort]

This reminds me, at some points I'd like to go through & put in more thinking around all the text on MyMeta, on each step, prompts, error messages etc. to align it with MetaGame's voice.. Is it easier if I do that now or do a full run-through later?

Whatever we can start now, so that there's less to do later, is better started now IMHO.

1. Would it make sense to keep track of all these prompts, error messages, and other pieces of micro copy? In a database, even if only a plain excel sheet?
2. Do we have principles and personality, "tone of voice", defined and described somewhere already? Would be a great guideline for designers and builders to use, when we do our respective creative work!

[davort]

I like this @davort 👍🏻 Maybe it would be good to add a "success/error" notice once delete is pressed, before the section is removed or if it fails? 🤔

Hey @luxumbra – please check out the updated prototype: "Add Block" on Figma

Alternatively, here is a quick take on the error messaging design: Error message (Delete block) on Figma → please note that this particular error message text doesn't make much sense, so let's just focus on the layout for now ;)

[peth-yursick]

• Would it make sense to keep track of all these prompts, error messages, and other pieces of micro copy? In a database, even if only a plain excel sheet?

• Do we have principles and personality, "tone of voice", defined and described somewhere already? Would be a great guideline for designers and builders to use, when we do our respective creative work!

I think it would definitely help if we kept track of it or make easy queryble or something.
Depends on how difficult it is to do, if its a lot of work, we can just update the copy in figma & have devs do another run through after the whole UI is facelifted.
But I also don't mind digging through code & suggesting edits in github if they're not all over the place & insanely hard to navigate for a nondev.

We don't but it's been brought up a few times lately & I've been thinking about it a lot.. I have a bookmark on writing that by mailchimp but I'll also see what other ways these things are written. Alternatively, we can get someone who actually knows how to write these things, but that someone probably won't know metagame's voice as well as I do so it might end up even more work 🤷‍♂️

[davort]

@peth-yursick – thanks for the added context.

My 2 cents:

1. Let's shift focus to writing the guidelines for MetaGame's Tone of voice. I love the idea for basing them on Mailchimp's Content Style Guide (Voice and Tone). If possible, it would be awesome to also put Goals and Principles in writing (pun intended), too. Mailchimp offers a great example for that, as well!
   Can you do it alone, or might our writers lend a hand?
   We might need a whole separate issue/quest/initiative for this? Your call.
2. Once we have the principles and guidelines for Tone of voice, anyone should be able to do better writing, and the effort will scale. Whatever will need fixing after that, can easily be fixed, as you yourself pointed out.

[luxumbra]

@davort, a little update for you - I have made a start building out this component and have got the embedded view styled and displaying metadata from a given URL. I'll be looking at the rest of the flow over the next couple of days.

[luxumbra]

@dysbulic, thanks for getting in touch. 🙏🏻
@davort, I've made a little more progress on the flow but there needs to be further discussion & work done on the back-end before any of this can be hooked up. Perhaps it can be brought up in Builders Align later.

metagame-add-embedded-link.mp4

[peth-yursick]

@dysbulic, thanks for getting in touch. 🙏🏻
@davort, I've made a little more progress on the flow but there needs to be further discussion & work done on the back-end before any of this can be hooked up. Perhaps it can be brought up in Builders Align later.
metagame-add-embedded-link.mp4

Any update on this?

[HBesso31]

@dysbulic, thanks for getting in touch. 🙏🏻 @davort, I've made a little more progress on the flow but there needs to be further discussion & work done on the back-end before any of this can be hooked up. Perhaps it can be brought up in Builders Align later.

metagame-add-embedded-link.mp4

Very nice demo, @luxumbra. When is this going to be live?

[luxumbra]

Very nice demo, @luxumbra. When is this going to be live?

I hit blockers on this and passed it to @mquellhorst some time back in July. I am not sure what the current status is. I reckon one of the newer builders would like to take it on if it needs someone to continue on it.

[luxumbra]

@vidvidvid @Udit-takkar @polimyl @tommymaher15 this is another one that needs some attention to get it finished. Another one I started and ran out of talent. Will be great to have someone look at it when other pressing issues have been crossed off the list.

[peth-yursick]

Need any help with this @dan13ram?

[dan13ram]

@peth-yursick Thanks for following up. I did have some trouble getting into this issue, but finally I've made some progress.
Do checkout the latest at #1012 and https://the-game-4u24mz2h0-metafam.vercel.app/player/grid/peth-yursick

This is still very much a WIP. But I think I've laid down the foundations to slowly start adding options to embed new types of sections to users' profiles.

[dan13ram]

@luxumbra

metagame-add-embedded-link.mp4

Do you have the code for this awesome demo ? If so, could you share it with me ?

[luxumbra]

Do you have the code for this awesome demo ? If so, could you share it with me ?

It was in a feature branch when i handed the issue over to @mquellhorst. Here you go ser feature/264-embed-url-section. To make finding stuff easier, I tend to use the issue number as the first part of a branch name and as it was never merged, it didn't get deleted. 🙌🏻

[dan13ram]

Thank you @luxumbra 🙏🏽

[peth-yursick]

Thank you @luxumbra 🙏🏽

Was there any followup on this after #1029 was merged?

[dan13ram]

No progress since. What do you think is a good next custom section that we can implement @peth-yursick ?

Past work? Custom Questions? We also require design to go ahead with these custom sections.

@davort do you have time to provide input for this?

[davort]

@dan13ram Easiest IMHO would be to go with "custom questions", both for input and later for displaying in profiles.

For input, it would boil down to:

1. input field for Question → with reasonable lower and upper limits for number of characters (e.g. min=5, max=80)
2. textarea for Answer → min=1, max=2000 (should be enough, or?)

On the "front" we can then show full Questions with their respective Answers, truncated and displayed in full in a modal window, on demand/when clicked.

Lemme know if this makes sense, or if you'd like me to put together a quick sketch? Any other feedback is also welcome, of course :)

[dan13ram]

@davort Thank you! I'd like to understand a little more in detail.

Are the questions posted by visitors to the profile or are the questions posted by the player themself?

Will the answers be public to all players or only to the player themself ?

Will each block be limited to a single question or multiple questions ? (If multiple, the blocks may end up becoming unusually long?)

[davort]

@dan13ram I imagined it as a "custom text box" where only the profile owner can post what they think is relevant and/or special to them.
In that regard, using the 'questions' and 'answers' terminology perhaps isn't the best fit ☺️

Would anybody want to contact a player, they ought to use other channels for that IMHO - Discord, email... We don't want to open that can of worms — think abuse and misuse of different kinds, if we'd enable general public to post stuff on anyone's profile page.

[dan13ram]

Interesting @davort. So both the "question" and the "answer" are something written by the user. Again though,
1 question and 1 answer per block or multiple ?

Would anybody want to contact a player, they ought to use other channels for that IMHO - Discord, email... We don't want to open that can of worms — think abuse and misuse of different kinds, if we'd enable general public to post stuff on anyone's profile page.

Totally agree!

[davort]

@dan13ram It's likely I am overthinking this. Perhaps better we'd referred back to the opening description by @peth-yursick

Of all the options listed there, I suggest we add these next:

• Random expertise, skills or traits
• Beliefs
• How to work with me
• Goals & aspirations
• Other interests or activities
• Describe yourself in 1 word
• My tone of voice (how to read my text)
• Talk to work ratio? 😁

If we were to go with the above options, what can we offer in the way of formatting text? Markup or a WYSIWYG editor of some sort? I remember us running into the same question when we were initially discussing #657

What are your thoughts on this?

[peth-yursick]

No progress since. What do you think is a good next custom section that we can implement @peth-yursick ?

Past work? Custom Questions? We also require design to go ahead with these custom sections.

@davort do you have time to provide input for this?

Wait, "next" section? You're saying the "embed links" was done? 😱

I like the idea of having a blank block, doesn't even need to be a question necessarily. It can just be "block title" & "block body" 🤷‍♂️

The way it could work: you click "new block", by default you start typing but there's also a dropdown or something with the suggested questions/titles:

• Random expertise, skills or traits
• Beliefs
• How to work with me
• Goals & aspirations
• Other interests or activities
• Describe yourself in 1 word
• My tone of voice (how to read my text)

Eventually, these could be sorted based on how often other people are using them & custom ones added to the bottom.

For formatting, we could use the same thing we're using for Quests, though that may be too many options for a small box... 🤔

[dan13ram]

Wait, "next" section? You're saying the "embed links" was done?

Yes @peth-yursick That PR was merged a while back to develop along with the "Edit Layout" changes. You can test it out at https://test.metagame.wtf but we are yet to merge to master.

I like the idea of having a blank block, doesn't even need to be a question necessarily. It can just be "block title" & "block body"

I'll take a crack at this. Should be relatively simple to accomplish :D

[peth-yursick]

Migrating to #1512