[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:

• Embed posts
• Credentials
• Past work
• 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 %)
• ???

[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 https://github.com/MetaFam/TheGame/issues/264#issue-782473256? 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.

[davort]

Thanks for the update @luxumbra. You seem to be doing alright with that 👍 Please let me know when you feel like you're done, and I can check it out to do a tad bit of UX QA 😉

[luxumbra]

I noticed that there's already some work done on adding of new sections. Looks like @hammadj added this last year. I will dig further and probably have to ping hammad or one of the other more senior devs for assistance.

[luxumbra]

@dysbulic would you be able to take a look at this with me when you have some time? I am trying to figure out how to add in the next piece of the functionality for this component.