GrapeJS Hero Site Builder User Experience

Transcript

1. Hero Site Builder GrapeJS
2. Real-time editing We are looking to create an admin user experience that enables admins to edit anything on a given site experience with ease. We have seen that using lightboxes or pop-ups as a user clicks something to edit on the site provides a pretty intuitive process for the admin user to quickly see the editing options for whatever they have clicked on. Here is an example of how we are envisioning editing text. A similar user experience would happen when clicking on an image to edit the size of the image, image placement, adding an action/page/link, etc. Sections Banner Section style Row 1 Amount goal Register Logos S I T E B U I L D E R Section 2 - Shave registration Section 1 - Banner Text Type Headline 1 Font Oswald Size 7 Spacing 2 K I S S G O O D B Y E T O M D S How it works About us Leaderboards Resources S T E P T E M B E R Find a fundraiser Register Donate Login 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 $ 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 Run the Rock - Kiss Goodbye to MDS Page layout
3. Create a site from scratch When an admin creates a site from scratch, we still want Hero Site Builder to provide a shell for the customer to build into. The Hero Site Builder should render 6 blank sections to give the admin user a starting block to create a site from scratch. At any point, the admin user can delete, move around, or personalize the pre-defined blank sections. Description of each section below with the next slide providing a visual of the foundational shell for "Building from Scratch" #1: Header (or Top Navigation): This is where a customer will typically inject the logo(s) for the campaign and also activate headers for pages e.g. Home, About Us, Donate, Survivor Stories, FAQs, Learn More, etc. #2: Banner: This is where a customer will typically inject the larger image and add text over the top that is the main marketing asset for their online site experience. #3: Section #1: This is a section of the body where the customer will typically inject information about the online campaign. The admin will add things like images, videos, text, social media sharing, blog-style posts, buttons, call to action (CTAs), color schemes, and so much more. #4: Section #2: This is a section of the body where the customer will typically inject information about the online campaign. The admin will add things like images, videos, text, social media sharing, blog-style posts, buttons, call to action (CTAs), color schemes, and so much more. #5: Section #3: This is a section of the body where the customer will typically inject information about the online campaign. The admin will add things like images, videos, text, social media sharing, blog-style posts, buttons, call to action (CTAs), color schemes, and so much more. #6: Footer: This is a section at the bottom of the site experience where the customer/admin will inject things like their logo(s), social media images and links, links to privacy policy, their address, and more. Images, text, links, etc.
4. Top navigation Banner Section #1
5. Section #2 Section #3 Footer
6. Left navigation overview Hero Site Builder GrapeJS
7. 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.
8. 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
9. 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
10. 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
11. 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
12. 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
13. 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
14. 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