vCard images

[mrpaulmason]

1. Desire is for Meetable's texts to "pop" in the user's sms message inbox (cross-platform, meaning circles and squares are used) as accomplished by Rex and our current version (the last attachments).
2. Desire for Consideration given post V0 color variations of icon to ease V0 Paul use of 10-20 numbers at once, later applied to user's who likely will pay for > 5 numbers. this palette is one idea http://arrowapp.io/
3. agreement to use upper case M (our pre-logo)
4. Size of M is tbd @danieltynerbryan likes smaller one (attached) as "no one reads the letters". fyi its smaller than the iOS default. i'm undecided
5. Worth stating that we (and all users) have different device displays and settings. I, for one, keep my brightness at the lowest possible and use night mode yellowing (medium).

Small M Larger M (harder to tell) Messages view (the one that matters)

[dgavazzi]

My comments regarding points 1-4:

I think the "M" with color background is ok for differentiation from the rest of text messages in a list, but not as ideal as an image that includes an element other than a letter. This approach looks like a slightly altered version of what Apple throws in by default -- if that's intended, great.

Using different color backgrounds to distinguish between conversations is a half-step in my opinion. It requires too much association from user side (e.g., "bluey one is sara, purpley is bob"), and doesn't scale. I would use the same icon for all messages for reasons mentioned above and brand consistency, and find some way to differentiate threads in the thread title.

I prefer a larger M. The smaller one looks too diminutive. Re: "no one reads the letters" -- any data to support that?

See attached for five color variants.

[mrpaulmason]

These colors look good, thanks. I’ll try ‘em out on my phones. Added verbiage to ticket around device display settings ⤴

Duly noted on your comments. The similarity with iOS font is happenstance with our font choice and not a big deal either way. Agree that we’re in a half step mode atm — do you have any suggestions for the vCard ahead of a full blown logo? The vCard image is more important (and more eyeballs) than the pre-logo on the LP so the V0 LP can certainly be altered.

[mrpaulmason]

I have 6s, Nexus 4 & now a Nexus 6. @dgavazzi you have an 8 right? any other iphones from the past/Rachel? @danieltynerbryan which iphone do you/Allison have? and care to elaborate on your comment that the letter/text in the vCard image isn't read / not super important? Dave's asking.

[dgavazzi]

Unfortunately, my suggestions are ones that are largely precluded by the direction of the initial branding. Initial thoughts on options would be (see examples):

• a "M" using a font that more easily discernible from the iOS default, which would then require a new v0 brand treatment
• an additional element (e.g., the box used on the LP) to mitigate the font similarity

Re: devices, I have an 8+, and Rachel has the (what now seems) tiny SE.

[mrpaulmason]

@dgavazzi perhaps you mean something else, but I don't see a font change as precluded from V0. Do clarify there what i've misinterpreted. that being said, while I kinda like the curly M, can you let me know what your effort would be to present what a 'curly M' font LP looks like?

2 other ideas that I don't think require changing anything else on the LP

1. using an apostrophe before the 'M to distinguish the vCard, accurate in that 'm means 'short for Meetable', and it reinforces that the ' is used for relay messaging. get 'em informed from the get-go it's accurate because it means 'short for Meetable' and practical bc its how ppl will send relays. keep 'em informed ya know. indifferent on upper/lower case M and the many apostrophe options like the prime mark
2. putting the M in a message bubble like this. thinking a grey bubble so we avoid a 2nd color. also its platform agnostic as a received msg (like from the bot). Here are 2 examples, of course there are many.

[dgavazzi]

vCard examples with message bubble and LP with script M.

I took a stab at apostrophe version and couldn't make it work.

[mrpaulmason]

@dgavazzi Nice, both of these look great! re: bubble one, can we see it with a LEFT side pointer part (thing bottom, does this have a name?) Bot messages will have a left pointer is why. Can you send me whatever you did with the apostrophe? I wanna give it a chance solely because of the incredibly functional role RELAY plays in V0. And it can wait til after I see it but to hear why you don't think it works

[dgavazzi]

I trashed the apostrophe tests and would rather not explore that anymore. I don't think it works ... because I don't think it works. It's the same reason I kill myriad other design directions.

See attached for extender on left version.

[mrpaulmason]

ok. it helps me to see things to eliminate/table an idea if you don't mind sending in future. An impermanent snap is fine 👻

got some fairly unbiased input from a branding dude with a great eye a) lets scrap the cursive one for now b) lets keep going with the lefty bubble... -M is bit overpowered by the white. lets try M with more weight/bigger -corners/extender are a bit rounded relative to the angular M. make them look more like github? c) lets try this one without the white box

[dgavazzi]

a) ok b) if the M in the bubble is going to be a stronger weight, then the font being used for Meetable would also have to be a stronger weight, otherwise there is an consistency. I intentionally made the corners rounded to both contrast the hard angles of the M, and make it not look so much like github, Bravo network, etc. c) the first image in the 5 color variant post is that one without the white box, no?

[dgavazzi]

One more option for review:

[dgavazzi]

also, bubble with hard angles (just noting again that this is a relatively commonly used design):

[mrpaulmason]

Calling out a change to the ticket up top --color variation changing from a consideration to a desire for V0. Subsequent to lunch convo with @danieltynerbryan on single vs multi-threaded text convos (the latter being a prohibitive friction for users, detail to follow in new ticket)

Desire for Consideration given post V0 color variations of icon to ease V0 Paul use of 10-20 numbers for inviting 10-20 new users at at time (exact number tbd by @danieltynerbryan), in later version, color variation likely applied to normal users. Who will likely pay premium for > 5 numbers. this palette is one idea http://arrowapp.io/

[mrpaulmason]

let me start with an attempted summation of where we're at, suggested next steps if you agree and then i'll also address your comments / images from above. Happy to discuss any/all of this live

1. Focus on the bubble & square options without a color in the background In other words, do NOT use an image that fills the entire circle or square displayed - both you and Ken (my friend) pointed out that negative space makes it "pop" / stick out. I tend to agree.
2. Doing 1) means of course, a bg color can't be used for variation but having a defined bubble shape and perhaps the gradient of 2 colors inside the bubble would be enough? Also we don't have to perfectly solve color variation for V0 as I'll have the only eyes on it

Suggest next steps if you agree with above:

3. look at a blue gradient square WITHOUT the additional white box inside (too busy to me). thoughts on a border?
4. look at white & blue gradient bubbles WITHOUT a bg color.
5. decide on a bubble size, presumably bigger than current versions?
6. decide on a bubble shape. github's is a mock of SMS, only used for onboarding (pre-registration on HP), not actually part of their product. So a 100% copy would go unnoticed. I happen to think its a happy medium between square and rounded edges but let me know your thoughts

Replies to your comments above b) if you don't think the bubble overpowers the M, then lets start there. But if you do, I personally think the smallness of the vCard image means no one will notice a different "weight" on HP. And the 2 contexts don't interact that much. And at this stage, more focus is on vCard logo. b2) can you say a bit more about valuing the contrast over parallelism of angular M and rounded bubble? I'm curious is all c) probably already clear, but this is different bc that square fills the entire circle displayed in Messages, Hangouts, etc

Regarding the 2 additional images d) I really like that dark blue playing off the gradient and maybe it'll stand alone too? e) I don't hate the all angular bubble and I, for one, was not reminded of Bravo logo

[dgavazzi]

Comments on suggested next steps in italics, also trying to consolidate other comments into one list of responses:

3. look at a blue gradient square WITHOUT the additional white box inside (too busy to me). thoughts on a border?
   • I'm still not clear on this request -- as described, I think I've provided it twice in the ticket already (blue gradient bkg with white M); perhaps you can explain on call tomorrow AM?
4. look at white & blue gradient bubbles WITHOUT a bg color.
   • I'll put an example together & attach.
5. decide on a bubble size, presumably bigger than current versions?
   • The current size I'm using gets me a centered image that fills the frame without hitting margins (see attached FIGURE 1). If this isn't what you're seeing, perhaps I can increase the size slightly to overcome the discrepancy.
6. decide on a bubble shape. github's is a mock of SMS, only used for onboarding (pre-registration on HP), not actually part of their product. So a 100% copy would go unnoticed. I happen to think its a happy medium between square and rounded edges but let me know your thoughts
   • Hard edges v. Soft edges -- I don't feel that strongly about it, just don't ever like the idea of knowingly 100% copying another design as a point of integrity. The "bubble" design is fairly ubiquitous at this point (the more you search, the more you find it -- e.g., intercom, pendo), but I don't seeing this making/breaking the product. In the interest of bringing us closer to closure, I'll use the rounded corner, hard edge extender convention going forward.

[dgavazzi]

Color variations applied to bubble icon with white bkg:

[mrpaulmason]

Responses below the snippets

3. look at a blue gradient square WITHOUT the additional white box inside (too busy to me). thoughts on a border?
   • I'm still not clear on this request -- as described, I think I've provided it twice in the ticket already (blue gradient bkg with white M); perhaps you can explain on call tomorrow AM?

Maybe "blue gradient square with white bg" is more clear? previous versions have blue bg and thus fill in the entire space allotted by the phone (circle or square) different from a defined square on a white bg that gets us negative space

5. decide on a bubble size, presumably bigger than current versions?
   • The current size I'm using gets me a centered image that fills the frame without hitting margins (see attached FIGURE 1). If this isn't what you're seeing, perhaps I can increase the size slightly to overcome the discrepancy.

Fig 2 bubble (below) with previous cubic bubble and latest, greatest "3 out of 4 rounded" shows smaller bubbles than your Fig 1 above. and note the fig 3 scale step where you might've adjusted (i left 'as is') and that users would rarely go into.

6. decide on a bubble shape. github's is a mock of SMS, only used for onboarding (pre-registration on HP), not actually part of their product. So a 100% copy would go unnoticed. I happen to think its a happy medium between square and rounded edges but let me know your thoughts
   • Hard edges v. Soft edges -- I don't feel that strongly about it, just don't ever like the idea of knowingly 100% copying another design as a point of integrity. The "bubble" design is fairly ubiquitous at this point (the more you search, the more you find it -- e.g., intercom, pendo), but I don't seeing this making/breaking the product. In the interest of bringing us closer to closure, I'll use the rounded corner, hard edge extender convention going forward.

Agree with your sentiments here and this isn't make/break but fewer people will notice a likeness to a github onboarding mock than intercom's logo and I happen to prefer the former if we could go with that instead, assuming we decide later on bubble over square.

fig 2 fig 3

[dgavazzi]

"Maybe "blue gradient square with white bg" is more clear? previous versions have blue bg and thus fill in the entire space allotted by the phone (circle or square) different from a defined square on a white bg that gets us negative space" Ok I get it now, thanks. A couple reasons I want to avoid this direction -

• (most important) it doesn't jive with the desire to make logo itself to be larger. Putting a square around it with fully visible corners would require the logo to be at the size you've seen to now, or smaller.
• the shape of the logo and a square don't work well together, and will produce an uneven, incongruent look

"Fig 2 bubble (below) with previous cubic bubble and latest, greatest "3 out of 4 rounded" shows smaller bubbles than your Fig 1 above. and note the fig 3 scale step where you might've adjusted (i left 'as is') and that users would rarely go into."

• See attached for logo as large as it can be without falling outside of the default circular margins

"Agree with your sentiments here and this isn't make/break but fewer people will notice a likeness to a github onboarding mock than intercom's logo and I happen to prefer the former if we could go with that instead, assuming we decide later on bubble over square."

• If I understand this correctly, we are already there. Github has rounded corners and a sharp extender, the only difference with Meetable's being extender on left

[mrpaulmason]

nah, thats not it. see fig 4 & fig 5 (JoAnne Harris) to see the white bg to the blue square

the git mock has a rounded pointer (and less rounded than dark blue bubble version) unlike your latest batch that has a pointy pointer.

fig 4 fig 5

[dgavazzi]

Edited because i think i know what you mean now Let’s discuss tomorrow AM.

[dgavazzi]

Taking a chance at these being what you're thinking (let's still discuss this AM to the degree necessary):

[dgavazzi]

See attached color enumerations of both bubble vCard options we discussed today:

[dgavazzi]

Closing for real this time.

[dgavazzi]

Attaching slightly altered (logo nudged downwards) final versions.