Story Section Description Solution QuestionsA user can see a visual representation ofrecent projects on the homepage.Homep...
A user can see a "Hire Us For YourProject" button on any page, that movesdown the homepage as the user scrolls.Header A us...
A user can see a Products page andlearn more about Hub and Dub.ProductsA user visiting the Products page can see a tabbedl...
Content Type and Fields Field Type Widget RequiredBasic pageTitle Node module elementBody Long text and summary Text area ...
Description Long text TextareaFeatures/Capabilities Field Group (field_group_multiple?)> Feature/Capability Title Text Tex...
Vocabulary Name Description Example Terms Additional Fields NotesTopic Shared fixed vocabulary across all blog posts,resou...
Module Name Used For Version Requirements/Dependencies Download NotesMasonryHomepage,ProjectsViews InfiniteScroll Projects...
Upcoming SlideShare
Loading in …5
×

Technology Plan for new 4SiteStudios.com

973 views

Published on

Technology plan outlining how we will build the new 4SiteStudios.com on Drupal

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
973
On SlideShare
0
From Embeds
0
Number of Embeds
352
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Technology Plan for new 4SiteStudios.com

  1. 1. Story Section Description Solution QuestionsA user can see a visual representation ofrecent projects on the homepage.Homepage A user visiting the homepage can see a dynamicgrid of images representing recent featured 4Siteprojects. Interspersed among the images is a briefblock of introductory/branding message text. Whenthe user hovers over an image, a tooltip with theproject title will display. When the user clicks on animage, it will increase in size, and a description ofthe project and a "learn more" link will be overlaidon top of the image.Build a view to create a nested series ofDIVs containing the images and relatedmetadata. Use the Masonry or IsotopeJS libraries to control layout.A user can see a visual representation ofthe services 4Site offers on thehomepage.Homepage A user visiting the homepage can see images oricons representing the services 4Site offers. Oneimage will be larger than the others, representing a"featured" service. When the user hovers over animage, the image will animate to illustrate someaspect of that service. When the user clicks on theimage, they will be taken to a page offering moreinformation about that service.Build content type for Services, with twofields to contain the small and largeimages (each image will be a spritecontaining both the static and animatedversions of the image). Create a view todisplay the images, each linked to thatservices page.A user can see a video with moreinformaton about 4Site Studios.Homepage A user visiting the image can see a static imagefrom 4Sites brand video, with a "play" iconoverlaid. When the user clicks the image, theimage will turn into an embedded video player andplay the brand video.Use Vimeo embedded player.A user can see a paged listing of recentblog posts and other resources on thehomepage.Homepage A user visiting the homepage can see summariesof the three most recently posted blog posts orresources. A pager will allow the user to navigateto earlier items. Each summary will contain the titleof the resource a summary of the body, the postdate, the type of resource, a thumbnail image fromthe post, and a thumbnail image of the postsauthor.Build a view to display a pagedsummary of the most recently publishednodes in the blog post and resourcecontent types.A user can see 4Sites most recent Tweeton the homepage.Homepage A user visiting the homepage can see the mostrecent tweet from the @4SiteStudios account. Atthe bottom of the tweet are "web intent" iconsallowing the user to reply, retweet or favoritethetweet. To the left of the tweet, a large Twitter iconwill link to the main @4SiteStudios Twitter page.Use Twitter module.A user can sign up for 4Sites emailnewsletter.Footer A user can see in the site footer a newslettersignup form. The form should contain a text box forthe users email address and a submit button.Upon submitting the form, the entered emailaddress should be added to 4Sites Mailchimp list.Embed Mailchimp form in a static block.A user can navigate to 4Sites varioussocial media presences.Footer A user can see in the site footer a series of iconsrepresenting various social media networks. Uponclicking an icon, the user should be taken to4Sites presence on that network.Embed social media icons and links in astatic block.A user can search for content on the site. Footer A user can see in the site footer a magnifiyingglass or other "search" icon. Upon hovering overor clicking the icon, a seach form and submitbutton will appear. Upon submitting the form, theuser will see a search results page, with the querybeing the data that was entered into the form.Configure Drupal core search.A user can navigate to other pages on thesite.Footer A user can see in the site footer a menu containinglinks to the top-level pages on the site, and followthose links.Core functionality.User Stories1
  2. 2. A user can see a "Hire Us For YourProject" button on any page, that movesdown the homepage as the user scrolls.Header A user can see a button labeled "Hire Us For YourProject," that moves down the page as the userscrolls. When the button is clicked, the user will betaken to a "Hire Us" webform.Set CSS for button to fixed positioning.(Depending on where the button is inthe layout, we may need to add jQueryto switch between fixed and absolutepositioning once the user scrollsbeyond a certain point.)A user can send an email to 4Site. Header A user can click an eimail icon in the site headerand see a pop-up "contact us" form, containingfields for name, email address, subject, body text,and a CAPTCHA. When the user submits the form(assuming it passes CAPTCHA), the contents ofthe form will be emailed to [TBD]@4sitestudios.com.Write a small custom module to createand process contact-us/hire-us form,which will appear differently (differentfields displayed, etc.) depending oncontext.A user can navigate to other pages on thesite.Header A user can see in the site header a menucontaining links to the top-level pages on the site,and follow those links.Core functionality.A user can contact 4Site about a project. Services A user can see (at the bottom of the Services pageor by clicking a "hire us" link) a form containing textfields for name, organization, email address, bodytext, a dropdown for project budget, date fields fordesired start and end dates, and a submit button.Upon successful form submission, the contents ofthe form will be emailed to [TBD]@4sitestudios.com.Use custom module created for "contactus" form.No visible CAPTCHA in the wireframe -how do we protect against unauthorizedform submissions? Mollom?A user can see the navigation menupersist as they scroll down any page onthe site. MiscA user scrolling down any page on the site cancontinue to see the page navigation as they scroll.Add jQuery to switch menu div betweenfixed and absolute positioningdepending on scroll position.A user visiting the Our Work page cansee a display of client logos, or click a linkand see a text list of clients instead. ProjectsA user visiting the Our Work page can see adisplay of selected client logos. The logosdynamically position themselves in order tominimize vertical gaps. The user can click a link tosee a text list of all logos.Create a views display to display logofield of the client content type (for nodeswith "promote to front page" checked)within a masonry grid, and a secondviews display to create a text list of allclients.A user visiting the Our Work page cansee a gallery of project images.ProjectsA user visiting the Our Work page can see agallery of project images. The user can togglebetween all projects and only those with casestudies, or filter the gallery by project type orcause. Upon being filtered, the images in thegallery will dynamically reposition themselves soas to minimize vertical gaps. The user can displaymore projects by scrolling down. When the userhovers over an image, an overlay will appear overthe image, displaying the title of the project, theclient name, and a brief description of the project.When the user clicks on the image/overlay, a pagewill display with more information about theproject.Create a view to display project imageswithin divs, with project title, clientname, description and more linkrendered in a div that is hidden untilrevealed upon mouseover. Addexposed filters for projects with casestudies, project type, and cause. AddMasonry JS w/ infinite scroll to controllayout.If some of the images are reallythumbnails for videos, how does theuser play the video? The onClickbehavior will display the overlay.A user can see a project detail page.ProjectsA user clicking a "more" link on the Our Work pagecan see a page with details about the selectedproject. The page will include a gallery of imagesfrom the project, the title of the project, the clientlogo, a brief client testimonial, and three blocks oftext, each with a thumbnail image: The Challenge,Our Solution, and The Results.Theme project node page using ControlDisplay, template files, alter hooks, orpreprocess functions, depending onrequirements of graphic design.User Stories2
  3. 3. A user can see a Products page andlearn more about Hub and Dub.ProductsA user visiting the Products page can see a tabbedlisting of products (currently Hub and Dub).Clicking a product in the tab will cause the pagebelow to shift to display the content for theselected product. Below the menu tabs isdisplayed an image and description for theselected product, followed by a list of features. Foreach feature, the feature name, a brief description,and an icon or image are displayed.Create a view to display all nodes of theproduct/service content type that have"product" selected, with only theproduct selected in the menu tabsdisplayed.A user visiting the Products page can signup to learn more about Hub.Products A user visiting the Products page can see a formcontaining fields for name, organization, emailaddress, and phone number, and a submit button.Upon successfully submitting the form, thecontents of the form will be emailed to [TBA]@4sitestudios.com.Use custom module created for "contactus" form. Display through a static blockattached to the bottom of the contentarea.Should we put this into a database aswell? Can we automatically put this intoSalesforce?A user can see a "What we Do" page andlearn more about the services 4Siteprovides.Services A user visiting the "What We Do" page can see aseries of service icons. Clicking an icon will causethe page below to shift to show content for theselected service. Below the icons is displayed animage and description for the selected service,followed by a list of capabilities. For eachcapability, the capability name, a brief description,and an icon or image are displayed.Create a view to display all nodes of theproduct/service content type that have"service" selected, with only the serviceselected in the menu tabs displayed.A user can see a "Who We Are" pagewith information about the company andits employees.Who We Are A user visiting the Who We Are page can seeintroductory text, an embedded brand video, ananimaged GIF of the 4Site logo, text about 4Site, agraphical display of 4Site employees with animage and links to their social media profiles, agraphic describing our process, and text andgraphics describing our community contributions.Create basic page with introtuctory text,brand video, logo GIF, and body text inbody. Create View to display staff listingand attach block below main content.Create static blocks to display Processand Giving Back content and attachbelow staff listing block.A user can see an "Our Insights" pagewith summaries of recently postedinsights (blog entries, white papers, casestudies, and training videos).InsightsA user visiting the Our Insights page can see alarge image preview text and author thumbnail of afeatured insight, followed by an "infinite scroll"display of previews of all insights. Each previewincludes an image, title, summary, post date,insight type, and author thumbnail. The display isfilterable by insight type and topic.Create a view to display all nodes of theblog entry and resource content types,in reverse chronological order, withexposed filters for resource type andtopic. Create a second views display,attached to the header of the first view,to show the single most recently postedblog entry/resource with "promote tofront page" set.A user can read an insight, post acomment, or share it to social media. InsightsA user visiting an insight page can see a largeimage related to the post, the post title, post date,insight type, author thumbnail, summary, post textwith embedded images, social media icons, andan embedded Disqus comment block.Create custom page templates for eachcontent type. Create custom themefunction to display social share icons.User Stories3
  4. 4. Content Type and Fields Field Type Widget RequiredBasic pageTitle Node module elementBody Long text and summary Text area with summaryAttachment File FileBlog EntryTitle Node module elementMedia Fieldset> Image Image Media file selector> Video File Media file selector> Caption Long text TextareaBody w/ Summary Long text and summary Text area with summaryAttachment File FileAdditional Information (Link) Link LinkRelated Content Entity Reference AutocompleteTopic Term Reference Select listService Term Reference Select listProjectProject Name Node module elementShort Description Long text TextareaClient Testimonial Long text TextareaChallenge Long text TextareaChallenge Thumbnail Image Media file selectorOur Solution Long text TextareaSolution Thumbnail Image Media file selectorThe Results Long text TextareaResults Thumbnail Image Media file selectorTopic Term Reference Select listService Term Reference Select listClient Term Reference AutocompleteCause Term Reference Select listClientClient Name Node module elementClient Logo Image Media file selectorCause Term Reference Select listService/ProductService Name Node module elementProduct/Service? List (text) Select listProduct/Service Icon/Image Image Media file selectorContent Types4
  5. 5. Description Long text TextareaFeatures/Capabilities Field Group (field_group_multiple?)> Feature/Capability Title Text Text field> Feature/Capability Description Long text Textarea> Feature/Capability Image Image Media file selectorResourceTitle Node module elementBody Long text and summary Text area with summaryAttachment File FileMedia Fieldset> Image Image Media file selector> Video File Media file selector> Caption Long text TextareaResource Type Term Reference Select listTopic Term Reference Select listService Term Reference Select listClient Term Reference AutocompleteCause Term Reference Select listRequire Registration BeforeViewing? Boolean CheckboxBioName Node module elementTitle Text Text fieldBio Long text TextareaFun Fact Long text TextareaPhoto Image Media file selectorTwitter Link LinkLinkedIn Link LinkService Term Reference Select listWebformTitleBodyContent Types5
  6. 6. Vocabulary Name Description Example Terms Additional Fields NotesTopic Shared fixed vocabulary across all blog posts,resources, and services.NTEN Conference, DrupalCon 2013, Content As Media WebinarSeriesServices Relates a piece of content to a specific departmentor service that was delivered. Services will have atwo-level hierarchy, with top level termsrepresenting our divisions (Strategy, Video,Design, Development, Support), and second levelterms representing the services offered withineach division.Design- Branding/Logos- Website Design- Mobile App Design- Infographics/Visual Content- Print CollateralDevelopment- Website Development- Mobile Development- Video Applications- CRM IntegrationStrategy- Content Strategy- User Experience- Management and Optimization- Analytics and ReportingSupportVideo- Commercials- Edutainment- Animation- Event Videography- Grassroots VideoImage: Small Image (sprite with both static andanimated version)Image: Large Image (sprite with both static andanimated version)Client Tagging vocabulary for clients. NetCentric CampaignsNational Building MuseumSay Yes to EducationImage: Client logoCause Description of the type or cause we were workingfor.AdvocacyScience and TechnologyResource Type Describes the type of resource White PaperCase StudyTutorial VideoBlog PostTaxonomy6
  7. 7. Module Name Used For Version Requirements/Dependencies Download NotesMasonryHomepage,ProjectsViews InfiniteScroll Projects, InsightsTwitter 7.x-5.8 OAuthOAuth 7.x-3.1Library Name Used For Version Requirements/Dependencies Download NotesMasonry orIsotopeHomepage,Projects http://masonry.desandro.com/jquery.masonry.min.jsCustom ModuleNameUsed For Requirements/Dependencies Download Notes4site_contactcontact-us form,hire-us formModules toRemoveDownload NotesActivity StreamAdvanced HelpFlexsliderFlippyFullcalendarGeocoderGeofieldGeophpMollomNice MenusNodequeuePrintProfile2ReCAPTCHASoundcloud FilterSplashifyModules7

×