My Home: eCommerce Learn & Grow cards

autumnfjeld commented 3 years ago

What

Add a new card to the Learn & Grow section of My Home that is tailored to eCommerce users.

This is an example of a Learn & Grow card:

Design

@jeffgolenski

[x] work with @jordesign & Kate (I couldn't find Kate's github handle) to pick best candidate article(s) from Seth's list for a new Learn & Grow Card
[x] Design Card: copy & visuals

Dev

[x] add these two cards to the Learn & Grow section #55014
[x] filter this card(s) visibility so it only shows to eCommerce users D64875-code

Testing

jeffgolenski commented 3 years ago

Just a couple of ideas that I'm sharing from a slack convo between Kate and myself (so far)

I personally like the idea of one of these two articles: 1) https://wordpress.com/go/tips-and-tricks/10-ways-to-find-success-with-your-new-small-business-website/ 2) https://wordpress.com/go/content-blogging/how-to-respond-to-customer-feedback/

For a few reasons:

They provide some broad information that pertains to store growth
Other articles in the sheet such as domain and theme selection may have happened during onboarding and no longer relevant
A customer might see this card right after onboarding, or much later in their lifecycle if they upgrade to eComm from another plan after X time.

jeffgolenski commented 3 years ago

IF we decide to go with either of the above articles, I have already whipped up some design and copy for em.

Secondary CTA area-1

jeffgolenski commented 3 years ago

Providing the optimized SVG code (and SVG files if that's what is preferred)

Customer feedback card: <svg xmlns="http://www.w3.org/2000/svg" width="197" height="100" viewBox="0 0 197 100" fill="none"><style>.a{stroke-width:2;stroke:#0675C4;}.b{fill:#DCDCDE;}</style><rect x="0.5" y="0.5" width="195.1" height="98.2" rx="2.5" stroke="#C3C4C7"/><path d="M22.3 30.5L22.6 30.2 23 30.2 31.5 30.2C31.8 30.2 32 30 32 29.7L32 20.5C32 20.2 31.8 20 31.5 20L19.5 20C19.2 20 19 20.2 19 20.5L19 33.3C19 33.4 19 33.4 19.1 33.5 19.2 33.5 19.3 33.5 19.3 33.4L22.3 30.5Z" class="a"/><path d="M37.7 44L37.4 43.7 37 43.7 28.5 43.7C28.2 43.7 28 43.5 28 43.2L28 34C28 33.7 28.2 33.5 28.5 33.5L40.5 33.5C40.8 33.5 41 33.7 41 34L41 46.8C41 46.9 41 46.9 40.9 47 40.8 47 40.7 47 40.7 46.9L37.7 44Z" class="a"/><rect x="18" y="61.5" width="74.5" height="7.1" class="b"/><rect x="96" y="61.5" width="59" height="7" class="b"/><rect x="18" y="72.5" width="56" height="7" class="b"/><rect x="78" y="72.5" width="32" height="7" class="b"/><rect x="114" y="72.5" width="21" height="7" class="b"/></svg>

Success card: <svg xmlns="http://www.w3.org/2000/svg" width="197" height="100" viewBox="0 0 197 100" fill="none"><style>.a{fill:#0675C4;}.b{fill:white;}</style><rect x="0.5" y="0.5" width="195.1" height="98.2" rx="2.5" stroke="#C3C4C7"/><circle cx="151" cy="50" r="19" class="a"/><path d="M142.3 50C142.3 45.2 146.2 41.3 151 41.3 155.8 41.3 159.8 45.2 159.8 50 159.8 54.8 155.8 58.8 151 58.8 146.2 58.8 142.3 54.8 142.3 50ZM151 42.8C147 42.8 143.8 46 143.8 50 143.8 54 147 57.3 151 57.3 155 57.3 158.3 54 158.3 50 158.3 46 155 42.8 151 42.8ZM149.7 47.6C149.3 47.8 149.3 48.1 149.3 48.3 149.3 48.4 149.3 48.7 149.7 48.9 150 49.1 150.4 49.3 151 49.3 151.8 49.3 152.6 49.5 153.2 49.9 153.8 50.3 154.3 51 154.3 51.8 154.3 52.5 153.8 53.2 153.2 53.6 152.8 53.9 152.3 54.1 151.8 54.2V54.5C151.8 54.9 151.4 55.3 151 55.3 150.6 55.3 150.3 54.9 150.3 54.5V54.2C149.7 54.1 149.2 53.9 148.8 53.6 148.2 53.2 147.8 52.5 147.8 51.8 147.8 51.3 148.1 51 148.5 51 148.9 51 149.3 51.3 149.3 51.8 149.3 51.9 149.3 52.2 149.7 52.4 150 52.6 150.4 52.8 151 52.8 151.6 52.8 152 52.6 152.3 52.4 152.7 52.2 152.8 51.9 152.8 51.8 152.8 51.6 152.7 51.3 152.3 51.1 152 50.9 151.6 50.8 151 50.8 150.2 50.8 149.4 50.5 148.8 50.1 148.2 49.7 147.8 49 147.8 48.3 147.8 47.5 148.2 46.8 148.8 46.4 149.2 46.1 149.7 45.9 150.3 45.8V45.5C150.3 45.1 150.6 44.8 151 44.8 151.4 44.8 151.8 45.1 151.8 45.5V45.8C152.3 45.9 152.8 46.1 153.2 46.4 153.8 46.8 154.3 47.5 154.3 48.3 154.3 48.7 153.9 49 153.5 49 153.1 49 152.8 48.7 152.8 48.3 152.8 48.1 152.7 47.8 152.3 47.6 152 47.4 151.6 47.3 151 47.3 150.4 47.3 150 47.4 149.7 47.6Z" class="b"/><circle cx="98" cy="50" r="19" class="a"/><path d="M87.2 54.3C87.6 54.7 88.2 54.7 88.6 54.4L94.8 48.7 99.9 53.1 105.8 47.2V51.2H107.6V45.9 44.9 44.9 44H106.7 106.7 105.8 100.4V45.9H104.4L99.8 50.5 94.8 46.2 87.3 53C86.9 53.3 86.9 53.9 87.2 54.3Z" class="b"/><circle cx="45" cy="50" r="19" class="a"/><path d="M51.1 45.3H52.3V53.3H51.1L38.2 50.5 38.1 50.5H38 37.8V48H38 38.1L38.2 48 51.1 45.3Z" style="stroke-width:2;stroke:white"/><path d="M42.9 54.2C41.7 53.9 41.1 52.6 41.4 51.4L40 51C39.4 53 40.5 55.1 42.5 55.7 44.5 56.3 46.6 55.2 47.2 53.2L45.7 52.8C45.4 53.9 44.1 54.6 42.9 54.2Z" class="b"/></svg>

If you prefer to download the .svg files, they are here: https://cloudup.com/c8CGoPPhpRZ

arthur791004 commented 3 years ago

@autumnfjeld @jeffgolenski I've added the new Learn & Grow cards in https://github.com/Automattic/wp-calypso/pull/55014. Is that correct to add both cards mentioned above? Or we should only select one of them? Besides, is there any preference for the order? Currently, I make the two cards next to The WordPress.com free photo library

autumnfjeld commented 3 years ago

@arthur791004 Jeff is AFK until next week. I'd say we can add both of the cards. Let's put the "10 ways to find success" card first. (I updated the issue description to be clear about adding both cards.)

Automattic / wp-calypso