Challenge Summary
Welcome to the FCBH Bible.Is Facebook App Design Challenge! In this challenge we need you to design the mobile screens for an app that facilitates Bible listening and engagement, spanning multiple languages. The idea is to make Bible content accessible via multilingual audio, as well as encourage and provide a platform for discussion - while utilizing the capabilities of Facebook as a platform. There is a wireframe for reference, we are looking for your visual designs!
Round 1
Please submit your initial designs for checkpoint feedback. These should include at least the following screens:
- 1. Home
- 3. Group Overview
- 6. Video Group Discussion
- 8. User Profile (My Achievements)
Round 2
Please submit all screens designed for final review, after incorporating checkpoint feedback.
We are looking for your visual designs for a Facebook app for Bible listening and engagement. Facebook is introducing free internet across multiple countries (including Zambia, Colombia, etc) so by building this app entirely via the FB framework, users will be able to access all the Bible content and interact with other users for free. This app will allow users to have group discussions and video chats, Bible study groups conducted online, and most importantly allowing users across different language barriers and nationalities to access and understand Bible content.
An important part of this app is the gamification that increases user engagement. Achievements are unlocked for activities performed within the app, or for time spent listening to sections, or sharing content with users or participating in discussions - the users will be given points, and can be placed on a leaderboard. We would like a visually attractive way to show this, so that the user feels encouraged to spend more time within the app.
Design Considerations:
- Please follow the Bible.Is branding guidelines, while also keeping in mind that this is a Facebook app
- Looking for modern, intuitive user interface. Designs should be clean and simple, easy to interact!
- Make sure the gamification aspects of the app really pop, the user should feel encouraged to earn points and engage with the app further. Make this look fun!
- Stock photography is allowed, you may use relevant photos wherever necessary
- Additional information regarding Facebook Framework: https://developers.facebook.com/docs/graph-api
Documentation on SDKs for iOS,https://developers.facebook.com/docs/ios, and Android, https://developers.facebook.com/docs/android.
Design Size:
This app will be designed for iOS and Android, as a Facebook app:
- 750 x 1334 (iPhone 6 Portrait)
Required Pages:
Please see the attached wireframe for reference (FCBH_wireframe.zip) and Bible.is branding guide (BibleIs_Brand_Guide.zip):
1. Home
This is the landing page for a logged-in user to the Bible.Is app. The content on this page includes:
- An area to showcase/advertise other Bible.Is products
- Notifications/Alerts regarding scheduled Bible Study discussions
- A main navigation into sections of the app, namely: Read Bible, Group Discussion, My Favorites, My Profile, Leaderboard, Settings
2. Read Bible
This is the primary feature of the app - with an interactive player - where the user will be able to select Bible content and listen to audio of their selection, and also browse related material. The app will utilize Facebook's capability to know the user's location and language, and will display the content in the user's native language.
- The user will be able to select a specific Bible section, and a corresponding chapter
- They can also highlight specific sections and add to Bookmarks
- Within each Bible section, the user can also choose to highlight specific paragraphs and interact with that: Favorite, Share or Comment (this app seeks to promote discussion of Bible content)
- Users may search within the content
- A player needs to be prominently displayed, where they can Listen to Previous, Pause/Play, Listen to Next section, as well as a slider to show progress.
3. Groups Overview
- Users can be a part of Bible Study groups, or user-created groups of their interests
- See wireframe for content. There are three views of a group page (joined, not joined, owned)
1. Joined:
This is a group that the user is a member of, so they will have access to all the content and discussions. They have the capability of entering a group chat, inviting friends, or leaving the group. They can also view and interact with individual group members.
2. Not joined
User can see the overview of the group and the schedules .They have the ability/call to action to Join the group.
3. Owned
This is the same as the other group views, except that the user has admin capabilities: they can Manage Group Schedule, or Edit Group Info
4. Create/Edit Group Info
The user creates a group or edits an existing group info from this page. The fields to be input are:
- Group Name
- Group Description / Info
- Group Image / Logo
5. Manage Group Schedule
Here a group admin can modify the group discussion schedule. Items added to the schedule will require:
- Date and Time
- Description/overview of discussion
Each list item can be edited or deleted. There is a primary call-to-action for Adding an activity to the schedule.
6. Video Group Discussion:
This screen is a video group discussion - requires all the controls of a video conference, such as:
- Add Participant
- Show/hide video
- Microphone / Mute
- Volume
- Hang Up
This screen should show how thumbnails of multiple participants of a discussion would show up, as well as a section where the users can sent text/chat messages within the group
7. Favorites:
Users highlighted paragraphs or Bible sections. Stats are displayed for how many other users have liked/commented on this particular section. Each section can be interacted with:
- Share
- Comment
- Delete
8. User Profile: My Achievements
- This is the user's profile page, where they can see their stats, points and achievement status (badges unlocked).
- Please design two sample achievements badges
- Think of an attractive way of displaying these points and stats
- Users have the option of sharing this page
9. User Profile: Activity History
- This page is like a newsfeed/activity log of the user's activities
10. Leaderboard
- This shows a weekly/periodical ranking of the users as per their points status
- Fields shown are: Rank, User profile picture, Name, No. of points
11. Comments
- This is how a selected paragraph would look with the discussion visible / comments expanded
- User should be able to add comments and reply to / like comments.
12. Settings
- This screen allows user to set their language preferences, and notifications preferences.
- Be aware of how Facebook apps structure settings / user preference fields
Target Audience:
- Users of different nationalities/languages looking for Bible content
- Bible study group users
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
Submission & 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.
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.