Hero Sprint 2 Edits to All Campaigns, Site Builder, & CMS

Transcript

1. Hero Site Builder Edits User Experience Site Creation Hero Site Builder is the user experience the client admin will work within as they build and edit their online campaigns. Hero Site Builder is an option/widget/toggle within each campaign AND Hero Site Builder is also its own section within the left hand navigation. Below are slides that provide the client admin user experience in using the Hero Site Builder.
2. Quick Navigation "All Campaigns" All Campaigns lives under the Quick Navigation tab of the left navigation of the Hero Admin console. A client admin user should have the ability to edit a campaign as you are showing in V1 of the Site Builder functionality BUT the team has missed building out the "Hero Site Builder" tab on the left nav. We are providing edits to BOTH the "All Campaigns" client admin user experience AND the Hero Site Builder client admin user experience. Starting first with edits to the "All Campaigns" client admin user experience. The next screen will display edits of what this section should provide via user experience.
3. search donors, fundraisers, campaigns, emails, forms.... American World Organization All Campaigns This quarter $512,109 Online Revenue 4,864 Total Donors 989 Recurring Donors 2,408 Total Registrants 129 Rejected Gifts 24,098 Total Page Views +21% this quarter -3% this quarter +14% this quarter +1% this quarter -3% this quarter -11% this quarter Web Mobile Campaign name Run the Rock Fundraising campaigns #2 #1 #3 $56,104 $24,786 $21,910 $19,453 673 donors 319 donors 348 donors 321 donors 198 registrants 74 registrants 142 registrants 201 registrants 234876901 283785802 432567764 987425461 $11,229 286 donors No registrants 027425461 Sight Savers Cape Hope 5k Shave for Kids Holiday giving Rank Raised #4 #5 Donors Registrants Campaign ID 07/24/2020 06/04/2020 08/13/2020 0722/2020 09/01/2020 Date created The "All Campaigns" section should match the look & feel of the other sections delivered in Sprint 1 e.g. data visualization widget style, font style, color schemes, etc. Below the data visualization will live the list of all of the client admin users campaigns with filterable toggles for the client admin user to filter the order they'd like to see the campaigns in. You can follow this screen shot to help follow the styling already in place, using this to help guide the naming conventions for all of the real estate on the page for the client admin user experience. The next slide shows the client admin user experience after clicking into a campaign's edit widget, which prompts the client admin user with options to edit the campaign they chose. search for a specific campaign
4. search donors, fundraisers, campaigns, emails, forms.... Run the Rock Campaign Configuration Run the Rock This quarter $512,109 Online Revenue 4,864 Total Donors 989 Recurring Donors 2,408 Total Registrants 129 Rejected Gifts 24,098 Total Page Views +21% this quarter -3% this quarter +14% this quarter +1% this quarter -3% this quarter -11% this quarter Web Mobile The style should match the look and feel of the Sprint 1 user experience for consistency. Top left will list the name of the campaign the client admin user clicked on. Directly to the right of the name should be an option for the client admin user to click the live link which will pop up the live site build in another browser. Below that should read the name of the campaign the client admin user selected + "Campaign Configuration" with a toggle option on the right side of the header for the client admin user to change the data visualization stats via month, quarter, etc. Below the data visualization will live back-end basic campaign editing for the client admin user. The next screen is a continuation of this page... V i e w c a m p a i g n l i v e Run the Rock $20,000 RunTheRockP2P www.runtherock.org Public campaign name Public campaign goal Export naming Campaign URL 1234 Stripe Published Campaign gateway Stripe client ID Campaign currency Campaign status USD
5. Run the Rock $20,000 RunTheRockP2P www.hero.com/RTR 1234 Stripe Published search donors, fundraisers, campaigns, emails, forms.... Run the Rock Campaign Configuration Run the Rock This quarter The client admin user should be able to click into any of the text fields and edit the content that is editable with ease. If the option is a drop down, the client admin will select from the options available - always able to click save. The client admin user should not have to ACTUALLY click the edit button to edit text real time. The client admin user should not HAVE to complete all of these fields to move on. These configurations can be edited at any point pre- campaign launch, or even during a live campaign. - NOTE: if a client org has already set up a payment gateway for previous campaigns, we should always default to that payment gateway, -If this is the first campaign a client organization is launching, adding a payment gateway should be a notified step for a client organization admin to set up. Below the basic campaign configuration will live the "Quick Navigation Configuration" visual widgets as you built out. These need to match the user experience of the visual widgets in Sprint 1 and displayed here to the left via icon styles, font styles, and color schemes. V i e w c a m p a i g n l i v e Public campaign name Public campaign goal Export naming Campaign URL Campaign gateway Stripe client ID Campaign currency Campaign status Quick Navigation Configuration Donations View all campaign donations Configurations View campaign configurations Hero Site Builder Build or edit your site Campaign Admins Manage campaign admin access USD +2.25% Donor cover the fee Save
6. Run the Rock $20,000 RunTheRockP2P www.hero.com/RTR 1234 Stripe Published A couple of questions around the back-end basic campaign configuration below. - Can we pre-populate the campaign URL with the Hero naming convention they will have follow.....offering the client admin user only the ability customize the section past the forward slash? - Secondary question here: what if a client is adamant about purchasing their own domain? How will they add that domain into the system? e.g. in this case the client admin bought www.runtherock.org and wants to use that URL. - Campaign Gateway: We need to come up with a user flow for first time client admin users that do not have a gateway attached yet. Can we discuss? - What is the purpose of the Stripe Client ID? I kept it in my edits as I wasn't sure of the importance. - What other currencies will Stripe allow for? I see USD and EUR currently listed. - Donor cover the fee means that the client admin user wants to ask the donor if they'd like to cover XYZ fee for transaction fees. Customizable here for the front-end. USD +2.25% search donors, fundraisers, campaigns, emails, forms.... Run the Rock Campaign Configuration Run the Rock This quarter V i e w c a m p a i g n l i v e Public campaign name Public campaign goal Export naming Campaign URL Campaign gateway Stripe client ID Campaign currency Campaign status Quick Navigation Configuration Donations View all campaign donations Configurations View campaign configurations Build or edit your site Campaign Admins Manage campaign admin access Donor cover the fee Save Hero Site Builder
7. Run the Rock $20,000 RunTheRockP2P www.hero.com/RTR 1234 Stripe Published This slide is focused on what the client admin user experience should be when they select "Hero Site Builder" WHILE being inside of a specific campaign e.g. Run the Rock in this case. By clicking Hero Site Builder the client admin user should be prompted into an experience where they can visualize and select which page(s) they would like to edit. -CURRENTLY the V1 Clicky build has this option as a + sign to the left of a campaign when campaigns are listed in a list view, in "All Campaigns" The next screen will show what the client admin user experience should be when a client admin has already clicked into a specific campaign e.g. Run the Rock in this example - and selects "Hero Site Builder" USD +2.25% search donors, fundraisers, campaigns, emails, forms.... Run the Rock Campaign Configuration Run the Rock This quarter V i e w c a m p a i g n l i v e Public campaign name Public campaign goal Export naming Campaign URL Campaign gateway Stripe client ID Campaign currency Campaign status Quick Navigation Configuration Donations View all campaign donations Configurations View campaign configurations Build or edit your site Campaign Admins Manage campaign admin access Donor cover the fee Save Hero Site Builder
8. Sign-Up Page Log-In Page Fundraiser Page About Page Registration Page The blue title header will read the name of the campaign the client admin selected + "Site Pages" To the the right of the title header will always live a "Edit home page" button that will take the client admin user to the Hero CMS home page of the site build. Here is the styling of the "Site Pages" section. Page Name & Short URL should be editable by the client admin user. They might want to organize their pages the way they want. NOTE: The edit icon is just an icon to let the client admin user know they can edit this section. The text field should allow for the client admin to real-time edit. The action icon can pop up the options to: "Edit Page" "Page Design" We will want to stay consistent with icon styles, font styles, color schemes, etc. throughout each Sprint. search donors, fundraisers, campaigns, emails, forms.... Run the Rock Site Pages Run the Rock Edit home page V i e w c a m p a i g n l i v e Pages Add a page Page Name Description Short URL Action Home Page Pg #1 #2 #3 #4 #5 #6 #7 Site home page /home Donate Page Site donate page Site sign-up page Site log-in page Site fundraiser page Site about us page Site registration page /donate /sign-up /log-in /fundraiser /about-us /registration Edit Page Page Design
9. Hero Site Builder Left Nav Accessing Hero Site Builder from the left nav Hero Site Builder has a different client admin user experience when the admin user is not editing an existing campaign build. Below is the Hero Site Builder section of the admin console for your team to build out the user experience.
10. "Hero Site Builder" Build a Site Edit a Site Build a Form Edit a Form Thermometer Here is the Hero Site Builder left hand navigation that we built out in Sprint 1. The next screen will display what the Hero Site Builder Home Page should deliver for the client admin user experience.
11. "Hero Site Builder" Build a Site Edit a Site Build a Form Edit a Form Thermometer search donors, fundraisers, campaigns, emails, forms.... Hero Site Builder Home Page Hero Site Builder This quarter Build a Site Build a new site experience Edit a Site Edit an existing site experience Build a Donate Page Build a new donate page Edit a Donate Page Edit an existing donate page Thermometer Customize a data display Build a Form Build a new form experience Edit a Form Edit an existing form experience
12. "Hero Site Builder" Build a Site Edit a Site Build a Form Edit a Form Thermometer search donors, fundraisers, campaigns, emails, forms.... Hero Site Builder Home Page Hero Site Builder This quarter Build a Site Build a new site experience Edit a Site Edit an existing site experience Build a Donate Page Build a new donate page Edit a Donate Page Edit an existing donate page Thermometer Customize a data display Build a Form Build a new form experience Edit a Form Edit an existing form experience "Build a Site" will render the new site build user experience with prompts for the admin user to follow to help set up the site build, before being placed into the Hero CMS. "Edit a Site" will bring the client admin user to the list of "All Campaigns" for the admin user to select which campaign site they'd like to edit. "Build a Donate Page" will enable the client admin user to build a donate page that they can place on their website, social media, add to a Hero Site Build, use in email marketing, etc. "Edit a Donate Page" will bring the client admin user to the list of all of the organizations donate pages to select which on they want to edit. "Thermometer" will enable the admin user to customize data displays that they want to turn on in a Hero Site Build. "Build a Form" will enable an admin user to build a new form that can be used wherever they want e.g. social media, Hero Site Builds, email marketing, etc. "Edit a Form" will bring the client admin user to the list of all of the organizations form page builds to select which on they want to edit.
13. Hero CMS Once the admin user is into page designing Hero Site Builder CMS has fully built presentations that ClickySoft is starting to inject into Sprint 2. Since there is not much to test on the CMS side of the house, I am providing more of the mock-ups of the Hero Site Builder CMS user experience screens to ensure your team has everything you need to make the Hero CMS intuitive and powerful!
14. Donate page Sections Widgets Blocks Pages Settings Supporter pages Fundraiser HUB Top navigation Banner Top navigation Opens up a left-nav pop-out for the admin to personalize the top navigation/header of the site experience. Banner Opens up a left-nav pop-out for the admin to personalize the banner section of the site experience. Sections Opens up a left-nav pop-out for the admin to visualize all of the sections in the site experience. The admin can move sections up & down and also click into a specific section to access features for that section e.g. background color, section sizing, etc. Widgets Opens up a left-nav pop-out for the admin to visualize all of the widget options that an admin can drag onto the site experience. In a later slide we will detail the widget options and naming conventions that we want our users to see. Blocks Opens up a left-nav pop-out for the admin to visualize all of the pre-defined block combinations that an admin can drag onto the site experience. In a later slide we will detail the block options and naming conventions that we want our users to see. Pages Opens up a left-nav pop-out for the admin to visualize all of the added pages that live within the site experience, that the admin can move around and click into specific pages so that they are now editing that specific page. e.g. Home, About Us, Learn More, etc. Settings Opens up a left-nav pop-out for the admin to visualize things like social media settings for the page, SEO settings for the page(s), universal-style guide, and more that we will detail in a later slide. Supporter pages Opens up a left-nav pop-out for the admin to visualize options for the admin to edit what a supporter/fundraiser/team page design should look like once a campaign is launched that has the p2p fundraising feature turned on. Donate page Opens up a left-nav pop-out for the admin to visualize options for the admin to add/edit a donation page that is tied to the site experience. The admin can customize the donation/check-out experience and settings. Fundraiser HUB Opens up a left-nav pop-out for the admin to visualize options for the admin to configure the site experience of the Fundraiser Admin/HUB. The Fundraiser Admin/HUB is the experience new fundraisers will see upon signing up/logging in to fundraise in a campaign.
15. Donate page K I S S G O O D B Y E T O M D S S T E P T E M B E R #KissGoodbyeToMDS BE BRAVE WALK 100 MILES IN THE MONTH OF SEPTEMBER, R E G I S T E R N O W Find a fundraiser Register Text Type Headline 1 Font Oswald Size 7 Spacing 2 Color Sections Widgets Blocks Pages Settings Supporter pages Fundraiser HUB Banner Pages How it Works About Us Section 2 - Shave registration Section - Top Navigation How it works About us Leaderboards Resources S T E P T E M B E R Donate Login $ 6 4 6 , 2 4 9 R A I S E D T O D E F E A T M D S 9 , 9 4 2 P E O P L E B R A V E L Y S T E P P I N G Top navigation Leaderboard Resources Register Donate Login Background Image + Add Image Section padding Top Bottom Left Right Top navigation
16. Donate page K I S S G O O D B Y E T O M D S Find a fundraiser Register Text Type Headline 1 Font Oswald Size 7 Spacing 2 S T E P T E M B E R #KissGoodbyeToMDS BE BRAVE WALK 100 MILES IN THE MONTH OF SEPTEMBER, R E G I S T E R N O W Color Sections Widgets Blocks Pages Settings Supporter pages Fundraiser HUB Top navigation Added assets Register Widget Text Section 2 - Shave registration Section - Top Navigation How it works About us Leaderboards Resources S T E P T E M B E R Donate Login $ 6 4 6 , 2 4 9 R A I S E D T O D E F E A T M D S 9 , 9 4 2 P E O P L E B R A V E L Y S T E P P I N G Banner Background Image Section padding Top Bottom Left Right Banner Edit Image Widget Shape Media assets No media Device specific display Web display
17. Donate page K I S S G O O D B Y E T O M D S Find a fundraiser Register Text Type Headline 1 Font Oswald Size 7 Spacing 2 S T E P T E M B E R #KissGoodbyeToMDS BE BRAVE WALK 100 MILES IN THE MONTH OF SEPTEMBER, R E G I S T E R N O W Widgets Blocks Pages Settings Supporter pages Fundraiser HUB Top navigation Top Navigation Section 3 - Thermometer Section - Top Navigation How it works About us Leaderboards Resources S T E P T E M B E R Donate Login $ 6 4 6 , 2 4 9 R A I S E D T O D E F E A T M D S 9 , 9 4 2 P E O P L E B R A V E L Y S T E P P I N G Homepage sections Sections Sections Banner Banner Section 3 Surviror Stories Section 5 Section 6 Footer CTA
18. Widgets When an admin selects the "Widgets" tab, they will visualize a combination of standard CMS assets that the user can drag onto the site experience + fundraising specific widgets that can drag onto the site experience as well. Below is a list of the widgets we want to offer to Hero admins in the Hero Site Builder feature. The next slide provides a visual representation of the "Widgets" tab as well. Add Text Content Add an Image Add Image + Text Add a Video Add a Button Add a Form Add a Content Box Add a Spacer Add an Icon Add Social Share Add a Social Like Widget Add a Blog Post Add a Fundraising Thermometer Add a Fundraising Leaderboard Add Your Donor Display Add Product Purchase Add a Registration Sign-Up
19. Donate page K I S S G O O D B Y E T O M D S Find a fundraiser Register Text Type Headline 1 Font Oswald Size 7 Spacing 2 S T E P T E M B E R #KissGoodbyeToMDS BE BRAVE WALK 100 MILES IN THE MONTH OF SEPTEMBER, R E G I S T E R N O W Widgets Blocks Pages Settings Supporter pages Fundraiser HUB Top navigation Section 3 - Thermometer Section - Top Navigation How it works About us Leaderboards Resources S T E P T E M B E R Donate Login $ 6 4 6 , 2 4 9 R A I S E D T O D E F E A T M D S 9 , 9 4 2 P E O P L E B R A V E L Y S T E P P I N G Sections Banner Fundraising widgets Text Text + Image Image Video Button Locations Thermometer Leaderboards
20. Donate page Widgets Pages Settings Supporter pages Fundraiser HUB Top navigation Sections Banner Blocks Take action Website blocks Section type Impact blocks Meet Soloman Soloman was diagnosed with prostate cancer 4 years ago. Thanks to Movember, Soloman is cancer free today! Donate New here? Sign up Sign up with Facebook Sign up with Apple Enter your email Take action New here? Sign up Sign up with Facebook Sign up with Apple Enter your email Section 2 - Movember registration Impact blocks About your org Call to action Testimonials Text blocks Corporate partners Sponsorships Volunteer CTA
21. Donate page K I S S G O O D B Y E T O M D S Text Type Headline 1 Font Oswald Size 7 Spacing 2 S T E P T E M B E R #KissGoodbyeToMDS BE BRAVE WALK 100 MILES IN THE MONTH OF SEPTEMBER, R E G I S T E R N O W Pages Settings Find a fundraiser Register Widgets Blocks Supporter pages Fundraiser HUB Top navigation Section 3 - Thermometer Section - Top Navigation How it works About us Leaderboards Resources S T E P T E M B E R Donate Login $ 6 4 6 , 2 4 9 R A I S E D T O D E F E A T M D S 9 , 9 4 2 P E O P L E B R A V E L Y S T E P P I N G Website pages Sections Banner Pages How it Works About Us Leaderboard Resources Register Donate Login Drag & drop you page here to remove it from being visible on the front-end of your site experience Hidden from the front-end Other pages
22. Supporter Pages - Donate Page - Fundraiser HUB There are fully built mock-ups for each of these sections that are listed in the left nav as well. Attaching those presentations/mock- ups in the email I sent. Providing here as well: Hero Campaign Builder: https://speakerdeck.com/herofundraising/hero-campaign-builder-admin-user-experience-product- wireframes Hero Site Builder CMS - Breakdown of Left Nav: https://speakerdeck.com/herofundraising/grapejs-hero-site-builder-user- experience?slide=2 Hero Admin "All Campaigns" V1 Mock-Ups: https://speakerdeck.com/herofundraising/hero-admin-dashboard-and-analytics- admin-user-experience-product-wireframes?slide=4 Hero Admin "Admin-Level Access" from V1 Mock-Ups: https://speakerdeck.com/herofundraising/hero-admin-dashboard-and- analytics-admin-user-experience-product-wireframes?slide=26 Hero CMS Thermometers & Leaderboards: https://speakerdeck.com/herofundraising/configuration