4. DELIVER THE MINISTRY
1. Solid Architecture
FOTF
Execution
2. Core Components
3. Faster Development
5. DELIVER THE MINISTRY
• Create standard templates and intuitive IA
• Structure content around “hubs”
• Build standard set of flexible, responsive components
6. DELIVER THE MINISTRY
Over the years, FOTF has published thousands of pages
of amazing content. But as the site has grown, so has the
need for a better approach and underlying system for
relating and structuring this material. Using existing
content as a baseline, we update content items for
reusability and map atomic elements to support other
content relationships and design flexibility. An important
aim is to empower editors to publish their material in a
more comprehensive and efficient way.
For more rapid development, we should construct basic
pages around FOTF’s core needs that, when coupled with
key components can be leveraged holistically to stand-up
affiliate sites and create a collection of online experiences.
7. DELIVER THE MINISTRY
BASIC PAGE TYPES: EXAMPLE REDESIGNED “EXPERIENCES”
• Homepage • Create About Us & Focus Stories Section
• Archive Page • Focus Findings
• Basic Content Pages • Create Donate Section (instead of form only)
(Article, Video, Audio)
• Focus Media Hub
• Event Page
• Article Modules (Series)
• Portrait Page
Note: certain templates already exist on Boundless.org and should be considered before
building new templates
8. DELIVER THE MINISTRY
Construct basic pages around FOTF’s core needs that
when coupled with key components can be leveraged
holistically to stand-up affiliate sites and create a
collection of online experiences.
9. DELIVER THE MINISTRY
While the new FOTF consolidates several disparate sites,
both content categories and and FOTF sub-brands need to
retain certain brand and user experience autonomy. As a
solution, FOTF would use robust templates to allow for
“skinned” views across FOTF.com, individual channels, and
various content types.
Each hub presents it own content “ecosystem” of relevant
navigation, promotions and content.
Using components, hub pages can be fully customized
outside of the template layout, enabling the site to flexibly
support brand campaigns, media spends, and individual
marketing category needs.
10.
11. FEATURES:
Topically-related hub
• Leverage brand/KMI colors: Each navigation
channel is its own “hub” of relevant “Issues”
content and indicated by brand color dropdown
links to
reactive,
• Use Subdomains instead of expert area
subdirectories to promote Seasonal & trend
consolidated brands within FOTF. This sensitive topical
navigation
also promotes high-level areas of the
site and helps them compete
individually with competitors
(parenting.focusonthefamily.com
marriage.focusonthefamily.com)
• Accommodate unique brand and
content delivery needs while creating
consistent user experience
12. DELIVER THE MINISTRY
Components give an incredible level of flexibility over
page content so each page / site can look highly designed
and serve up on the necessary content but maintain
consistency in the user experience.
13. EXAMPLE COMPONENT IDEAS:
• Sticky navigation • Recommended Resources
• Announcements • Related Topics / Content
• Video Feature • Most Popular
• Audio Feature • Content Series Module
• Photo Carousels • Touts
• Homepage Hero’s • Filtering
• News Archive • Thin Headers / Footers
• Focus Answers Box • Content Ratings
• Blog Feed • Polls
• Quizzes
etc…
14. DELIVER THE MINISTRY
Brings together FOTF and affiliate sites under one
“umbrella” for better brand awareness
FEATURES:
• Surfaces lesser-known ministry brands
• Requires much less screen real estate
15. DELIVER THE MINISTRY
Filtered archives enable users to quickly and easily browse
specific content.
FEATURES:
• Enables user-controlled browsing experience
• Allows for contextual callouts link users to relevant
cross-channel content (marriage vs parenting)
• Enduring content scalability
Filtered archives
16. DELIVER THE MINISTRY
The fixed audio player brings FOTF’s flagship content
[broadcasts] to the forefront.
Regardless of where you are on FOTF, there is always an
audio player pinned to the bottom of the screen, thus multi-
tasking users can simultaneously listen while exploring.
Sticky audio bar that remains throughout navigation experience. It
can be collapsed for uninterrupted reading experience
17. DELIVER THE MINISTRY
Embedded feature video
If clicked, video expands to play in-
line with content
In addition to an easily accessible audio experience, FOTF
should allow for immersive, interactive video within content
pages – modernizing the canvas for digital media.
Articles that have a video tie-in, should feature media
upfront for users to play-inline.
Any related videos should be placed within the content grid
and can be expanded to play in-line with content.
Video in closed state
18. DELIVER THE MINISTRY
Presently, only 3% of our site visitors utilize the search
feature. There’s an obvious need to better bridge the gap http://jasonogle.com/fotf/search/Search.html
between a user and the content or products they seek. This
is a crucial factor in the success of FOTF. Features:
• Type ahead search
The link on the right prototypes a sliver of the new FOTF • Relevant product integration
search functionality. Features include type-ahead, and • Relevant media / content suggestions
product integration.
21. INCREASE ENGAGEMENT
Unlike many websites, the purpose of FOTF.com is not
necessarily to keep visitors on the site for as long as
possible.
The new FOTF should promote idea discovery and
creativity. Users are inspired with practical and activity-
driven ideas to get users away from the screen and
together with family.
22. INCREASE ENGAGEMENT
Place the “Ideas in an Instant” tool front and center on each
category home page. With this module, it’s dead simple for
people to find content tailored for the specific needs we’ve
identified (from “I’m a parent looking to connect with my
teen” to “I’m a spouse who needs date night ideas”).
23. INCREASE ENGAGEMENT
Through inspired storytelling, photography, design and
powerfully moving video testimony, FOTF can be
transformed into an "epic brand" that inspires love and
loyalty–think Apple or Nike for the charitable sector.
This is accomplished using media to express heart-felt,
character-driven stories about people impacted by our
ministry.
By being authentic, we feel less like an ivory tower
organization and more like real people – people that
users can really connect with and support.
24. INCREASE ENGAGEMENT
Engage users with clear, connected calls-to-action. Make an emotional
connection using photography and video to reveal the urgency and
importance of our core values. Below is an example of two components
used together for better donation ask:
IDEA: Use “soft ask” that engages user in other ways
Links user to stories hub under with what we do. Links users to module of how they
“About Us” section can pray for families for 30 days. Puts user on
cultivation track with eventual goal donor conversion.
25.
26. EDITOR EFFICENCY
• Content Reusability
• Provide Better Internal Help and Consulting
27. EDITOR EFFICENCY
FOTF 5.0 should leverage Sitecore to support new
granularly structured content, content relationships, and
design flexibility. For better efficiency, the content
approach is “Upload once, reuse everywhere.“
28. EDITOR EFFICENCY
Photography is instrumental to FOTF’s message and
efforts. A key part of this editor-friendly strategy is creating
a photo management tools to make working with this rich
(and often filesize-heavy) content as easy as possible.
To aid in reuse of photos across pages and components,
Sitecore should automatically scales and crops an
uploaded image into numerous sizes. Editors only need to
pick which photo they'd like to use in a particular slot, and
the system does the rest.
Editors can also use the CMS to manually crop images to
one of several fixed aspect ratios to ensure the resulting
image is presented in the best way possible.
29. EDITOR EFFICENCY
The goal of the Standards & Component Library is to
create a centralized, accessible location to create,
maintain and communicate standards, layouts, and
components. This repository captures shared knowledge
between teams reducing development time, and enable
FOTF to build consensus and improve how FOTF builds
digital experiences.
30. EDITOR EFFICIENCY
The library offers some of the following features:
1. Global Standards
2. Editorial Standards
3. Components
• Guidelines & Specs
• Useage Combinations
• Enhancement considerations
4. Internal Points of Contact
31.
32. • Navigation enhancements to accommodate unique
FOTF structure
• Ability to create robust hub pages and associated
content-delivery components for basic content types
• Archive and search enhancements for better fundability
• Updated audio component to showcase broadcast
offerings
• Editor usability enhancements for internal efficiency