Challenge Summary
Welcome to the FCBH Bible.bible Responsive Design Challenge.
In this challenge, we are looking to create a website that utilizes the text, audio, and video assets from the Bible.is and Bible.bible sites, but we are looking for it to be organized in a more intuitive and search-engine-friendly manner.
We are looking for you to define the initial design direction for this application by using best UX practices.
Good luck! We are looking forward to your designs!
Round 1
1) Home Page (desktop)
2) Bible Resource Page (desktop)
3) Commentary and Study Guide Page (desktop)
4) Online Store (desktop)
- Readme.jpg: Provide notes about your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
1) Home Page (desktop, tablet, and mobile)
2) Bible Resource Page (desktop, tablet, and mobile)
3) Commentary and Study Guide page (desktop, tablet, and mobile)
4) Online Store (desktop, tablet, and mobile)
- Readme.jpg: Provide notes about your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Purpose of this challenge is to design a competitive website to Biblegateway.com by utilizing FCBH assets of Bible text, audio, and video. It should expand upon these assets by adding commentary and study guide pages, an online story, and banner ads. The current site (Bible.bible) uses a javascript-based navigation framework which seems to be more frustrating to search engine robots. FCBH would like to move to a more user friendly interface for Bible.bible which uses static links and drop downs to navigate through the various versions of the Bible (See "Ref 1" for a screen which displays the current navigation mechanism).
Required Features:
FCBH is looking to completely update the look and feel of the Bible.bible website and add these features wherever applicable:
Note: In the below functions 1-4 and Note 1 apply to "02 Bible Resource Page - Bible Text Display"):
1. Add the ability for the user to share text he finds on the website with others in various social media platforms (Twitter, Facebook, Email)
2. We would like to add the ability for the user to compare two different versions of the same text. For example: Compare New International Version (NIV) with King James Version (KJV)(See "Ref 4" and also here: https://www.biblegateway.com/passage/?search=John%203&version=NIV;MSG)
3. Please add placeholders for advertising on each chapter interface page.
4. Please incorporate the existing functionality from Bible.is (See "Ref 5" and "Ref 6")
- Bookmarking
- Highlighting
- Commenting
- Social sharing functionality
- - - Each verse be highlighted when it is selected
- - - - - - Add the ability to select a highlight color
- - - - - - - - - - Mark a favorite passage
- - - - - - - - - - Add a note/comment
- - - - - - - - - - Share the verse in social networks (Twitter, Facebook, Email)
Note 1: The social sharing ability is at the verse level (like it is in Bible.is - See "Ref 7")
Note 2: Create a “Study” menu like bible.gateway (The topics will currently be placeholder - See "Ref 8") (This note applies to 03 Commentary and Study Guide Page below).
Design Guidelines:
- Looking for a modern design interface!
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Reference the DBP Brand Guide (See attached files)
- Reference the Bible.is website and mobile app for assets
- Reference the Biblegateway.com website for commercial inspiration (Please do not COPY)
- Include “Powered by the Digital Bible Platform” message across the bottom of each screen with the “Digital Bible Platform” linking back to https://www.digitalbibleplatform.com/
Required Design Sizes:
Design to look best as a mobile website, in terms of viewport size, the design should be responsive, and adjust to varying sizes:
- Desktop screens: 3840 x 2160px
- Tablet screens: 2048 x 1536px
- Mobile screens: 1136 x 640px
Required Screens:
We need below screens to be designed for this application..
00 Navigation and Overall Structure:
- We need the navigation mechanism / site map (Bible, Radio, Deaf Bible, Downlaod, Apps, Share, Donate, Store) to the Home page of the web site. For an example of this you can review www.biblegateway.com. (See "Ref 2" for an example of the Bible Version and Chapter selection element for the Biblegateway site).
- Looking for your thoughts for the overall navigation.
- Include “Powered by the Digital Bible Platform” message across the bottom of each screen with the “Digital Bible Platform” linking back to https://www.digitalbibleplatform.com/
01 Home Page:
The home page should have lot of features that will attract Bible users. Some examples are as follows:
- Welcome Message
- Search function
- Verse of the Day
- Links to Articles
- Links Inspiration items
- Banner ads
- Bible resource page
- Commentary and study guide page
- Links to Online store
- Anything else do you think will help engage users, feel free to show them in your designs - we are open to your ideas!
02 Bible Resource Page:
- Language selection
- Bible book and chapter selection
- Bible text display (See functions 1-4 and Note 1 in the top of this Challenge Description section).
- Bible audio player (sync with text display): Allow for audio playback on each chapter interface page (See "Ref 3").
- - - Please make sure the audio feature is prominent as this is one of the client’s greatest strengths.
- - - Audio players can either be on the pages themselves or in a separate popup. The important design element here is that it really stands out and wows the user.
- Banner ads
- Back to home page
03 Commentary and Study Guide Page:
- Commentary selection
- Study guide selection (See Note 2 in the top of this Challenge Description section)
- Devotionals
- Bible Aids
- Banner ads
- Back to home page
04 Online Store:
- Books
- Videos
- Music
- Banner ads
- Back to home page
Reference:
www.Biblegateway.com
- Please DO NOT COPY, just provided for reference!
- For content reference, please find them here: Bible.is and Bible.bible!
Target Audience:
- People who are interested in learning more about the bible
Judging Criteria:
We will be judging on:
- How well does your design align with the objectives of the challenge
- Overall Design and User Experience
- Your entry must perform well in a low bandwidth environment. Your submission should be as lightweight as possible without javascript and with optimized imagery.
Submissions and Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback. See more information about Final Fixes.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.