1079472 - Design co-branded partner page template for Fall Campaign

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Matt Thompson (@OpenMatt :OpenMatt)]

* Goal: create a Fall Campaign partner template that builds off existing work and meets the requirements outlined here: 
https://wiki.mozilla.org/Webmaker/FallCampaign
https://etherpad.mozilla.org/partner-landing-page

* We'll start by digging into this current template, for the After School Alliance 

** Partner Landing Page https://welcome.webmaker.org/signup/lightson/?ref=lightson
** Partner Make Page https://welcome.webmaker.org/make/lightson/

Comment 1

[Matt Thompson (@OpenMatt :OpenMatt)]

* Here's a mock-up that tries to:
a) slice up the original Partner Landing Page requirements, and
b) map them against the After School template
http://mzl.la/partner_mockup

* This is a proposal from Cassie, Paul and Matt on requirements for the template.

Comment 3

[Matt Thompson (@OpenMatt :OpenMatt)]

here's the landing page REQUIREMENTS, broken down:

a) PARTNER DETAILS
* Partner name
* Partner logo
* Custom photo
* Custom intro copy

b) PARTNER CALLS TO ACTION
* 1 to 3 calls to action. (1 is best.) 
* These CTAs are chosen by the partner. Offered off a set menu, during the sales process.
* Default CTA is: "host an event," which links to Wizard. 
* BUT: we have the option of other CTAs, if desired -- (e.g., a lightweight customized make, like: "make a digital YMCA poster.") 
* The key is: *let the Sales Team guide us* toward CTAs the partner really wants. Working together with them to ensure the menu also minimizes custom work. These are just copy and links -- we can put whatever we want in there. 

* On the production side: these CTAs are just straight copy and links. No special functionality is needed here. The important thing is: the template should support and look great with 1, 2, or 3 CTAs.

Comment 4

[Matt Thompson (@OpenMatt :OpenMatt)]

OUT OF SCOPE for v1:

c) PARTNER EVENTS
* Engagement Team's original requirements included a list of partner events at the bottom of the page.
* Let's take this out of scope for v1. But can be considered for fast follow next heartbeat.

Comment 5

[Matt Thompson (@OpenMatt :OpenMatt)]

* PAUL: as sales lead / Engagement Team proxy, can you review and +1 or -1 these requirements?

Comment 6

[Matt Thompson (@OpenMatt :OpenMatt)]

* Cassie, Hannah, Aki, Andrew: flagging you to make sure this shows up on your radar as well. Want to ensure we have good requirements before we push ahead into design.

Comment 7

[hannah:hkane]

looks good to me. thanks for the summary.

Comment 8

[Michelle Thorne]

Would include: 

* How to report back. 

Maybe we find a strong default, but how do we signal to the people going through this how to report back? The LightsOn afterschool as this as a section, for example. 

Also adding Amira for her review.

Comment 9

[paulj]

+1 requirements. 

* Michelle - which section of the LightOn example are you referring to? It sounds like something we can do via copy/messaging.

Comment 10

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/p/gk80068f68322e0d21

Far from finished but time for feedback. Appreciate any thoughts – especially about content and the kinds of things that might be unnecessary to include here or might be missing.

Comment 11

[Michelle Thorne]

Comment on attachment 8502526 [details]
https://redpen.io/p/gk80068f68322e0d21

The 2nd option with the horizontal photo is my fav. More comments in the redpen.

Comment 12

[hannah:hkane]

Lookin' good!

Added my comments to the redpen, but my main one is that I think if there are 2 or 3 CTAs on the page, it needs to be clear that it's a "choose one" type of scenario, rather than a "walk through these steps" type of thing.

Comment 13

[Andrew Sliwinski:thisandagain]

Left a few notes in the redpen. My largest concern is that we are burying the primary call to action below the fold. That + the high information density will impact conversion.

Comment 14

[paulj]

My comments are in redpen as well. 

+1 Andrew's comment about the CTA being at bottom of page. I like the versions with a single CTA/button (especially 2) but would like to see the button higher up. Would it be weird to put it below the partner logo?

RE: Hannah's comments I think the default scenario will be a "choose one" but in a case like Afterschool Alliance it will be a set of steps - it's the "side of rice" in Matt's menu (https://wiki.mozilla.org/Webmaker/FallCampaign/SalesFunnel). The design should be able to accommodate either scenario if possible.

Comment 15

[Matt Thompson (@OpenMatt :OpenMatt)]

* Nice teamwork in this ticket. :) 
* Cassie: this give you what you need for the next iteration?

Comment 16

[hannah:hkane]

I've misunderstood then. I thought the partner landing would ALWAYS be a set of choices (or, in some cases, a single "choice"). 

One of the possible choices (Specialty of the House) leads to another set of choices (the Wizard, with a particular flavor pre-selected or not). 

The other possible choices (spring roll, side of rice) would lead to a *separate page* that might have step-by-step instructions.

The key distinction is that the landing page itself is always a place where the end user makes a choice (or is forced to choose from one option), whereas the subsequent pages might have guided step-by-step instructions.

That might not be the right answer, but that's how I interpreted this: https://wiki.mozilla.org/Webmaker/FallCampaign/SalesFunnel

Comment 17

[Aki Rose Braun [:akirose]]

(In reply to hannah from comment #16)
I so freaking love our food analogies.

+1 hannah this makes sense to me, especially from my experience on the builds.

Comment 18

[paulj]

(In reply to Aki Rose Braun [:akirose] from comment #17)
> (In reply to hannah from comment #16)
> I so freaking love our food analogies.
> 
> +1 hannah this makes sense to me, especially from my experience on the
> builds.

I'm starting to get confused about the food analogies! 

I think we are all in agreement that the landing pages are intended to lead to a set of choices, either to the wizard or a separate, light-weight custom make. 

The side of rice is something optional and can be anything. As Matt describes it's "a link to a page, program or CTA the partner cares about. So long as its just copy and a URL, it's easy for us to add to the page, if the partner sees added value in it." 

In the case of someone like Afterschool Alliance (mzl.la/lightsonafterschool) they used their "side of rice" as the first in a set of steps. Their side of rice linked to a registration on their site. The final step was the CTA for their "spring roll." 

Might be worth having a quick check-in to talk through if I am not making sense.

Comment 19

[Cassie McDaniel [:cassiemc]]

Attachment: another-idea.jpeg

Andrew and I were talking about how we weren't happy with the partner page design so far. Wanted to send another thought to you guys.

I'm definitely leaning toward bringing the partner relationship more to the forefront. Could also integrate the wizard just below a 'partner header' with the 'choose 1' instructions just above the fold (or could have a lets go button there and lead to events wiz in a second page in the flow)

Comment 20

[paulj]

+1 the new design (from the demo) Cassie. 

My favorite is "partner template v2" which provide previews of the activities. I think this works great as the default template for new partners as well as for a more general audience. Simple version is also great (central CTA) but not sure how it would work if there were more than 1 option to choose from?

In all cases I think it's worth talking through or looking at how these would look with all the various configurations of menu items that a partner might want (https://wiki.mozilla.org/Webmaker/FallCampaign/SalesFunnel#Sales_Menu).

Comment 21

[hannah:hkane]

Yup. Really like the new design for the cases where the partner has chosen the wizard. Not sure how this works in cases where they've chosen other options from the "menu."

Comment 22

[Aki Rose Braun [:akirose]]

Just wanted to gently tap the brakes on co-branded wizard stuff—let's get it shipped to prod before we commit ourselves to templatizing it. It's something we should be able to do, I just dk the time commitment required yet.

Comment 23

[paulj]

Aki - agree. What still needs to happen to get this shipped to prod?

Comment 24

[Aki Rose Braun [:akirose]]

As soon as the redpens are locked up and fundraising things are shipped, I'll be back on it full-time. Right now though it seems like people still want to be making some changes. (and I have a donation form to finish)

Comment 25

[Matt Thompson (@OpenMatt :OpenMatt)]

* This ticket seems like our #1 priority right now. 

* Given that, Cassie: what's the next step to finish here? Finalize the redpens? And if so: when do you think that can happen?

* Want to flag the timelines here: to give us enough time to build the page once design is complete (bug 1079963), then do final fixes and QA, we're probably going to need the design completed by Oct 15 latest. 

* Can we make sure we simplify and scope accordingly?

Comment 26

[Matt Thompson (@OpenMatt :OpenMatt)]

* Cassie is now updating this design: https://redpen.io/kp089bb2de108027ad

* The main innovation here is: more emphasis on a primary CTA. So we're not burying the main call to action.

* Everything else in Paul and Hannah's comments can be addressed through copy and links -- so I think we're in good shape on this one. 

* Cassie will post updated design w. comments here soon

Comment 27

[Cassie McDaniel [:cassiemc]]

Adding new redpens:

VERSION A:
Simplified landing page with one main CTA: https://redpen.io/na8df99db8782ab212
That 'let's go' button could link to a single option (a make with instructions) or to a set of options, like this: https://redpen.io/joc4a5cc7161030371
It just breaks the flow into two steps – a more guided experience instead of cramming it all into one page.

VERSION B:
This design, on the other hand, has all the menu options on one page: https://redpen.io/kwf1b966c3c6bc0e1e

We don't have to think of the 3 side-by-side columns as 'the event wizard'. Take out the 1/2/3 progress bar and the 'step 1' language and those thumbnails could be links to whatever partners want (may need some design tweaking).

My next step will be to update those designs to reflect this flexibility. I'll go through the menu options (https://wiki.mozilla.org/Webmaker/FallCampaign/SalesFunnel#Sales_Menu) and see if they work in this design.

Comment 28

[Matt Thompson (@OpenMatt :OpenMatt)]

* This looks great and feels in scope:
a) https://redpen.io/na8df99db8782ab212

* These "co-branded Event Wizard" approaches add complexity to the build and feel out of scope to me
b) https://redpen.io/joc4a5cc7161030371
c) https://redpen.io/kwf1b966c3c6bc0e1e

* so +1 to (a) from me. I'd love to see us finalize that and hand over to Aki to start building asap, given time constraints.

Comment 29

[Cassie McDaniel [:cassiemc]]

I don't see how you can do A without B or C, if we stick with the set menu approach.

Let's regroup today verbally, this bug is getting a bit unwieldy!

Comment 30

[Cassie McDaniel [:cassiemc]]

After the earlier regroup, thought I'd map out the flow as I see it:

https://redpen.io/uw3f0f660e21c5921b

Hope this helps with our conversation later today.

Comment 31

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/uw3f0f660e21c5921b

Aki/Ricardo, wanted to see if this flow matches with what you guys are designing / building. We can hop on vidyo to talk it through as well, just ping me.

Comment 32

[Aki Rose Braun [:akirose]]

Does this imply that there are links in this landing page that are meant to skip a step on the wizard? If so no, that is not what I'm currently building. It's possible, but it would be a future iteration.

Comment 33

[Ricardo Vazquez [:ricardo]]

What Aki said, otherwise the flow looks good :)

Comment 34

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/kwf1b966c3c6bc0e1e

Aki / Ricardo – here's the latest version. Essentially, a header with the partner logo, a custom photo, and a custom title and intro paragraph embedded above the Wizard (which will function as you guys are building it, no skipping steps). So the part that is templatized is the page *around* the event wizard, not the wizard itself. The engagement team will sell the wizard with the pre-packaged 3 templates. In the future we may want to switch out the asks, but not now.

Question: In the wizard, would it be possible to change the buttons from 'Host this Event' to 'Try this activity'?

I want to provide a few other image options. Working on that now.

Comment 36

[Cassie McDaniel [:cassiemc]]

Attachment: Final MVP partner template pages

Comment 37

[Cassie McDaniel [:cassiemc]]

Photo option: https://redpen.io/bra11f5689bed50c16
Icon option (choose any color from makerstrap and any icon from font awesome): https://redpen.io/kwf1b966c3c6bc0e1e

Makerstrap colors: http://k88hudson.github.io/makerstrap/demo/#/
Font awesome icons: http://fortawesome.github.io/Font-Awesome/cheatsheet/

I'd suggest we download the images and post them on the webmaker blog or wiki, to have a central place where we can update them if needed. Matt, can you help with this?

Comment 38

[Ricardo Vazquez [:ricardo]]

Looks good Cassie!

Comment 39

[Matt Thompson (@OpenMatt :OpenMatt)]

* Cassie: sure. These look great. Couple proposed tweaks that will make it easier to sell and for partners to understand what it is: 

1) copy: change "Choose your Webmaker Event" to "Choose your Webmaker Activity"
2) change: "Hack your school" to "Remix your school" 
3) Add the real icons. For each event type. To replace these:
https://dl.dropboxusercontent.com/spa/6c38yp3crbxni5b/wn6wf87c.png
(Ricardo should have these)

Comment 40

[Matt Thompson (@OpenMatt :OpenMatt)]

* Also change blue button copy to something else. Like "Go" or "Get started."

Comment 41

[Matt Thompson (@OpenMatt :OpenMatt)]

* Only other tweak from paul: make the customizable copy portions "Lorem Ipsum" -- so Partners can more easily grok that the copy's fully customizable.

* That's it! Once those are done I'll post to a Webmaker blog page

Comment 42

[Ricardo Vazquez [:ricardo]]

The Remix your School icon is here: https://dl.dropboxusercontent.com/u/43783651/Wizard/wizard_icons_hack_school.svg

The Make Your Music video icon is here: https://dl.dropboxusercontent.com/u/43783651/Wizard/wizard_icons_music_video.svg

Waiting on the Private Eye icon.

Comment 43

[Ricardo Vazquez [:ricardo]]

The Private Eye Icon is here: https://dl.dropboxusercontent.com/u/43783651/Wizard/wizard_icons_private_eye.svg

Comment 44

[Matt Thompson (@OpenMatt :OpenMatt)]

* Also: I think once that's done, we can mark this ticket resolved. :)

Comment 45

[Ricardo Vazquez [:ricardo]]

Cassie: I made a page with the lorem ipsum and changed CTA like Matt requested so that you can just copy paste. https://redpen.io/kg1b5a00ee454769b3

Comment 46

[Cassie McDaniel [:cassiemc]]

Matt/Paul – do you want me to replace the afterschool alliance logo and headline with something more generic?

Comment 47

[Matt Thompson (@OpenMatt :OpenMatt)]

* Sure! Good idea.

Comment 48

[Cassie McDaniel [:cassiemc]]

Attachment: Final partner template pages w/ placeholder images

Placeholder image and text: https://redpen.io/yv9610b221ed99df4e

To show the possible photo or icon treatments:
Photo example: https://redpen.io/bra11f5689bed50c16
Icon example: https://redpen.io/kwf1b966c3c6bc0e1e

Comment 49

[Cassie McDaniel [:cassiemc]]

Marking this resolved. Please re-open if you need further changes.

Comment 50

[paulj]

Just to confirm. This is all we need at this point to share with partners as a template. Thanks!