Development Wireframes: Table of ContentsGLO UX Functional Wireframes v5.0 Designer 5.0Duane Loose Version Date 1November 19, 2014 Page of 27 GameCloud Studios - Company Confidential

Back Navigation Bar Title (Context Sensitive) Nav Specific Action ‹

GLO UX Functional Wireframes v5.0

Designer Duane Loose Version 5.0 Date November 19, 2014 Page 1 of 27

GameCloud Studios - Company Confidential

iPhone screen size: 7.76” x 5.82”

2048 x 1536 (264 PPI)

Development Wireframes: Table of Contents

Section Notes/Feedback to be Addressed 1. Anatomy of a Screen

1.1. iOS 1.2. Android

2. Main Cards 2.1. GLO Landing Screen

2.1.A. GLO Landing Screen minimal nav and tool bars.

2.1.A.1. Persistent Card (Category Aggregation) Interaction and Access

2.1.A.2. Persistent Card content element access 2.1.B. Navigation, Tab and Tool Bar Locations and

functions 2.1.C. Search Function

2.1.C.1. Search Results – GRID View 2.1.C.2. Search Results – LIST View

2.2. GLO Card Archetypes 2.2.A. BOOK: Generic Layout

2.2.A.1. BOOK: My Bible 2.2.A.1.1. Marking Tools: Highlighter 2.2.A.1.2. Marking Tools: Comments 2.2.A.1.3. Marking Tools: Glyphs/Stickers 2.2.A.1.4.

2.2.A.2. BOOK: Non-Bible 2.2.B. GROUP

2.2.B.1. Group Navigation Bar 2.2.C. PRESENTATIONS 2.2.D. MY FEED

2.2.D.1. MY FEED – Post Level Screen

Alicia 1. Could we make the status bar a persistent bottom bar? Examples of this are in Twitter, Facebook and Pinterest apps. I like using

this to navigate apps and it's really intuitive and easy to use. I also like that it's pretty standard so people will know immediately how to use it. This example has the bottom status bar plus tabbed menu at the top: http://ststephenshouston.files.wordpress.com/2011/02/facebook-app.png.

2. [Page 9] One idea for groups layout is to click on the groups card and this immediately opens up a forum style listing of threads with subject and date. Group "official content" can be "stickys" at the top of the list of threads Ex: http://venturebeat.files.wordpress.com/2012/08/twitter-app.jpg?w=450&h=675

3. [Page 8/9] Forum posts can obviously have text but also items of type Presentations, Study Guides, Polls by clicking an icon. Ex: http://gadgets.ndtv.com/social-networking/news/facebook-rolls-out-ability-to-add-photos-to-comments-382077.

Fritzie: - Page 1: Unsure if I like persistent status bar and its position at the top of the screen. Have noticed that a lot of iOS apps now have persistent bars/buttons at the bottom (Facebook, Pinterest, Instagram, Twitter, iOS Music, etc). - Page 9: Confusion about the mail/letter icon in (2). So does it go to your personal messages or your group messages? Or both? - Page 9: Feels like there are way too many collapsible bars on top of each other. I think it would be better if (5) just slides with the rest of the group page. Also I feel like things are crowded when there is too much at the top because eyes naturally go to the top and then have to look down for content -- bar and buttons feel more out-of-the-way at the bottom. - Page 9: Order of icons on (2). Doesn't feel right for Feed Viewing Mode Selector and Filter Settings to be on the left before the Group Home button.

http://ststephenshouston.files.wordpress.com/2011/02/facebook-app.png

http://venturebeat.files.wordpress.com/2012/08/twitter-app.jpg?w=450&h=675

http://gadgets.ndtv.com/social-networking/news/facebook-rolls-out-ability-to-add-photos-to-comments-382077






2048 x 1536 (264 PPI)

Addendum: i. Design Resources

a. Apple iOS 7 b. Android

ii. Card interfaces: a. HTC Blinkfeed b. Facebook PAPER c. Flipboard d. Pinterest e. WeChat (Stickers)

User experience and interface design guidelines for iOS and Android devices.

Versions Version Date Note

COLOR KEY: (Green: Complete – Yellow: In Process – RED: Planned but Not Started)

V1 1/2/2014 Reviewed: 1/2/2014

V2 1/6/2014

Addressing notes from review meeting:

My Feed – simple linear feed (Facebook-like) o Clicking on thread filters feed to that message thread

QUESTS cards: on hold

BOOKS o Remove Scripture of the Day

Add excerpt from bookmarked content instead o Show Book Cover on GLO landing/feed screen

Presentation Cards and Tools: Focus on content creation tools

GROUP Cards o Groups have the following main elements:

Official content

Presentations Events / Calendar Forum / Chat

Tagged threads - categories

https://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289

http://developer.android.com/design/index.html

http://www.htc.com/us/why-htc/blinkfeed/

http://techcrunch.com/2014/01/30/facebook-paper/

https://flipboard.com/

http://www.pinterest.com/

http://www.wechat.com/en/






2048 x 1536 (264 PPI)

V3 1/13/2014 Changes/Additions:

Revised Doc TOC, Versions and Notes

Conformed navigations elements to iOS 7 Design Guidelines

Added Design Resource Addendum

V4.1 1/27/2014 Addressing Jira Feedback

Group Card

My Feed card

Presentation Card

V4.2 1/31/2014 Search field function

V4.3-4.4 2/4/2014 Add Navigation Bar to GLO landing page

Persistent way of getting to the Bible at any time in the App

Show Search in a “list” view.

Marking tools UX

V5.0 2/10/2014 Review meeting Revisions: o Update Footer o Integrate “paper” like elements o Functional use of color for tagging elements

Glyphs and Stickers Highlighting reading content Selecting and assigning category colors

o Show how many followers, likes and such on persistent profile o Revise “Search” to indicate search function for individual elements only – searching in the bible for example or in Cards. Search is not functional in a

“system wide” context – can’t search an aggregated overall search – just specific to the mode or section currently in use. o Remove “non-bible” books cards o Add Audio Bible Card o Add Landing screen for Bible – what we see when we first land – no nav bars or tool bars

Show reading screen with no nav bars etc. Show how nav bars etc. appear when hovering, flick or “inserting” comments into the text.






2048 x 1536 (264 PPI)

Use color to associate with marking tools functionality and tagged meaning/description – Red means ??, Blue?? Etc. Show how Nav bars flip/switch position – 2.2.A.1.1 Marking Tools: Comments

o Stickers: Show Emoji like icons a’la’ WeChat – Sticker Shop Add Emoji’s to Bible Marking tools

o Group Card Add landing page Group “Home Screen” Show Activities Topics Events Daily Message Some idea of Group “Templates” – template group set up Group cards focus on content sharing (??)

o Presentation Card Focus on “How to Make a Presentation” In App tools and content to create presentations Combine/Add text, voice and images from the app content NO Media (movies etc.)

o My Feed Explore making this My GLO Add text/comment/new post box to the feed.

DO List

Archetype CARD submenus o Drop down menu paradigms o Navigation Bar interactions: what happens when user taps an icon?

GROUP leader Presentation content creation tools

Alert messages: such as requesting user to log in to be able to access a certain function.

First Time UX: o Login o Subscribe o Purchase Elements (Skins, Stickers, Seasonal Themes, Art Packs) o Logged In Message Alerts (appear on device when app is active in the background)






2048 x 1536 (264 PPI)

1 Use a navigation bar to enable navigation among different views and—if appropriate—to provide a control that manages the items in a view. If you need to provide a larger set of controls and you don’t need to enable navigation, consider using a toolbar instead (to learn more, see Toolbar). 2 Use a toolbar to provide a set of actions users can take in the current context. 3 Use a tab bar to give users access to different perspectives on the same set of data or different subtasks related to the overall function of your app.

1.1 - Anatomy of a GLO Screen: iOS7 Paradigm UX: Basic Template Paradigms

Excerpts from Apples iOS Human Interface Guidelines

Status bar:

The status bar displays important information about the device and the current environment i.e.: Carrier and Connection type: E.g.: Verizon / WiFi

Persistent – at top of screen

Navigation bar1: Enables navigation among different views and—if appropriate—to provide a control that manages the items in a view.

A navigation bar enables navigation through an information hierarchy and, optionally, management of screen contents.

o Is translucent o Generally appears at the top of an app screen, just below the status bar o On iPad, a navigation bar can also display within a view that doesn’t extend across

the screen, such as one pane of a split view controller. o Can automatically change its height when an iPhone changes orientation o Maintains the same height in all orientations on iPad

Screen Content:

Tool Bar2: The most frequently used commands that make sense in the current context

A toolbar contains controls that perform actions related to objects in the screen or view. o Is translucent o Always appears at the bottom edge of a screen or view on iPhone o Can also appear at the top edge of the screen or view on iPad. o Can automatically change its height when an iPhone changes orientation o Maintains the same height in all orientations on iPad.

Tab Bar3: Organizes information at the APP level

A tab bar gives people the ability to switch between different subtasks, views, or modes. o Is translucent o Always appears at the bottom edge of the screen o Displays no more than five tabs at one time on iPhone (if there are more tabs, the

tab bar displays four of them and adds the More tab, which reveals the additional tabs in a list)

o Maintains the same height in all orientations o Can display a badge—a red oval containing white text and either a number or

exclamation point—to communicate app-specific information

SCREEN CONTENT

1

2

4

3

1

2

3

4

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html#//apple_ref/doc/uid/TP40006556-CH12-SW4






2048 x 1536 (264 PPI)

1

My GLO

[Aggregate Card]

Card Specific Content

[Bible Last Access]


[Bible Bookmark]

2.1.A - GLO Landing Screen – Initial View: Minimal Nav and Tool Bars UX: This is the first screen the user sees when they open the GLO App

Two persistent default cards: o My Bible – study, mark and share your Bible o My GLO – User customizable feed of their selected people, events,

groups, presentations

Additional Persistent Aggregated Cards can be added to the Upper Persistent Card area as categories specified by GLO – in essence: single purpose apps combined into an ecosystem: GLO

Off screen cards are accessed by using the “flick” dots

Card Peek/Preview allows user to see a synopsis of card content before accessing it full screen (See Holy Bible card this page + Peek mechanic preview: TBD)

UI is divided between the top (persistent Cards) and the bottom Card specific content – such as Dividers allow grouping of cards into categories. (Not Shown)

Notes

Persistent Status Bar (Hidden under landing page)

GLO Landing Page Nav Elements – with number of requests, messages and so on shown.

Connect Requests

Messages

GLO Notifications Persistent Card Area: Showing

My BIBLE

My GLO

Flick-Dots: Tap Dots Access other Persistent Cards Card Content Preview Area

Relevant elements from the selected persistent card area appear here

Flick/Slide to access all content in selected Card

Background wallpaper image

1

2

3

5

3

4

4

5

2






2048 x 1536 (264 PPI)

1

GROUPS

[Aggregate Card]


[Specific Groups Joined]


[Specific Groups Joined]

PRESENTATIONS

[Aggregate Card]

2.1.A.1 - GLO Landing Screen – Initial View: Minimal Nav and Tool Bars UX: Continuation of the first screen the user sees when they open the GLO App

Persistent default cards: o My Bible – study, mark and share your Bible o My GLO – User customizable feed of their selected people, events,

groups, presentations o Groups o Presentations

Additional Persistent Aggregated Cards can be added to the Upper Persistent Card area as categories specified by GLO – in essence: single purpose apps combined into an ecosystem: GLO

Off screen cards are accessed by using the “flick” dots

Card Peek/Preview allows user to see a synopsis of card content before accessing it full screen (See Holy Bible card this page + Peek mechanic preview: TBD)

UI is divided between the top (persistent Cards) and the bottom Card specific content – such as Dividers allow grouping of cards into categories. (Not Shown)

Notes

Persistent Status Bar (Hidden under landing page)

GLO Landing Page Nav Elements – with number of requests, messages and so on shown.

Connect Requests

Messages

GLO Notifications Persistent Card Area: Showing

GROUPS

PRESENTATIONS

Flick-Dots: Access other Persistent Cards Card Content Preview Area

Relevant elements from the selected persistent card area appear here

Flick/Slide to access all content in selected Card

Background wallpaper image

5

3

4

2

1

2

3

4

5






2048 x 1536 (264 PPI)

Stopped Here 2/10/14






2048 x 1536 (264 PPI)

BOOKS (CARD ARCHETYPE)

My FEED

(CARD ARCHETYPE)

Add’l CARD

(CARD ARCHETYPE)

PRESENTATIONS

(CARD ARCHETYPE)

Add’l CARD

(CARD ARCHETYPE)

Add’l CARD

(CARD ARCHETYPE)

QUEST

(CARD ARCHETYPE -

Post Launch)

Add’l CARD

(CARD ARCHETYPE)

GROUP

(CARD ARCHETYPE)

Peek/Preview Mode

Show important alerts

and messages here

2.1B - GLO Landing Screen – All Nav + Tool Bars UX: This is the first screen the user sees when they open the GLO App

Cards can be dragged by user to desired locations

Off screen cards are accessed by scrolling

Card Peek/Preview allows user to see a synopsis of card content before accessing it full screen (See QUESTS card this page + Peek mechanic preview: TBD)

GRID view shows ALL active cards

Dividers allow grouping of cards into categories. (Not Shown)

Notes

Persistent Status Bar

GLO Landing Screen Navigation Bar

BIBLE (Could also be a persistent CARD in the GLO landing Screen)

GROUPS

PRESENTATIONS

EVENTS

FILTER – Organize the GLO feed into topics, threads, categories GLO Card Archetypes:

Books

Group

My Feed

Presentation

Quest (Post Launch – design and implementation: TBD) Background wallpaper image

CARD Peek/Preview Mode

Selected (single tap) Card scales up and shows synopsis content

Card scales up and down in place

App Level TAB Bar

GLO icon: HOME

View Modes Toggle (GRID mode shown)

Bookmarks

Search

Settings Cards show most important information in the grid and preview mode. E.g.: number of messages

rec’d.

Book Card (non-bible) cover image

Landing Screen – Navigation Bar

2

3

8

5

7

1

6

4

1

2

3

5

6

7

8

4






2048 x 1536 (264 PPI)

2.1.B – Search Function (move to assoc with Bible) UX: Tapping the Search Icon (Magnifying Glass) in the App Level Tab Bar reveals the

SEARCH function navigation bar, keyboard and results screen.

Notes

SEARCH Nav Bar

Enter Search Here

Cancel Search

View Mode o List o Card Grid

Search word filter

Search Results Field

Standard Keyboard

Background wallpaper image (Per Global Settings)

1

2

3

Phrase All Words Any Words

G Grief Cancel

4

1

2

3

4

6






2048 x 1536 (264 PPI)

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

Search Results

Card W/BG Image

2.1.B.1 – Search Results (Grid) UX: Entering Text into the SEARCH field and pressing Search on the keyboard performs

the search and displays the results.

Cancelling the search returns the user to the previous screen where the search was initiated (GLO Landing screen in this case)

Use the View Modes to switch between Grid and List View

Tap the X in the search field to cancel this search and start a new search.

Tap in the search field to refine this search

Filter the search results by Phrase, All Words or Any Words

Notes

Persistent Status Bar:

SEARCH Nav Bar

Enter Search Here

Cancel Search

View Mode o List o Card Grid (Shown)

Search word filter Search Results Field

Shown as a Grid

Cards are identified by type and relevant search content CARD Peek/Preview Mode

Selected (single tap) Card scales up and shows synopsis content

Card scales up and down in place

Presentation Card Shown

1

2

3

4

G


Grief Cancel

1

2

3

Search Results

Card

(Peek Mode)

4






2048 x 1536 (264 PPI)


2.1.B.2 – Search Results (List) UX: Entering Text into the SEARCH field and pressing Search on the keyboard performs

the search and displays the results.

Cancelling the search returns the user to the previous screen where the search was initiated (GLO Landing screen in this case)

Use the View Modes to switch between Grid and List View

Tap the X in the search field to cancel this search and start a new search.

Tap in the search field to refine this search

Filter the search results by Phrase, All Words or Any Words

Notes

Persistent Status Bar:

SEARCH Nav Bar

Enter Search Here

Cancel Search

View Mode o List (Shown) o Card Grid

Search word filter Search Results Field

Shown as a List

Listed results are identified by type and relevant search content

List shows type of element: GLO Member, group, topic, presentation, media, etc.

Quick Action Icons o Filter – add this to a category, thread o Reply o Remove from search

G

1

2

3

1

Grief Cancel

My father recently died. The grief has felt

overwhelming at times….(more)

Healing from the loss of a

Child – Group Study….(more)

Living with Grief Workshop –

February 13th: 8PM

My husband was killed in an accident. How can

I deal with the grief?

Grief group meeting – Losing a loved one

and…(more)

Death, Loss and the Savior by

Graham Ellis…(more)

Death is Not the End – GLO

presentation from Mary Connors…(more)

My wife has left me recently. The grief I am

feeling….(more)

Christ and the Resurrection

Podcast…(more)

2

3






2048 x 1536 (264 PPI)

2.2.A- GLO Card Archetype: BOOK UX: This is a generic layout for the BOOK card archetype

BOOK card fills full screen below the Persistent Status Bar

BOOK cards have a “dropdown” Navigation bar below the Persistent Status Bar.

My Bible card type is shown here

Other sub-types of the BOOK card include: o Non Bible Books o Readings o Study Guides

Notes

Persistent Status bar:

See: GLO Landing Screen

CARD Navigation bar:

See: BOOK Card Navigation Bar

Cover:

Non-bible Book

Bible

Custom (user specified) o Color / texture

BOOK Card Cover Content o Book Name o Content Provider o Bookmark excerpt o User Name (Bible)

Card Level TAB bar

GLO icon (HOME) - return to Landing Screen

Bookmarks

Marking Tools

Search

Settings

1

3

4

BOOKS

(CARD ARCHETYPE) 2

3

Book Navigation Bar

1

2

4

BOOK NAME

Content Provider

Bookmark excerpt

content

User Name 5

5






2048 x 1536 (264 PPI)

2.2.A.1 - BOOK Card: My Bible UX: This is a layout for the BOOK card

BOOK cards have a “dropdown” Navigation menu below the Persistent Status Bar.

Navigation bar: slide/flick to view and hide

My Bible card type is shown

Notes



CARD Navigation bar: GLO (brand) Bible cover shown

Bible Version

Current Testament selection

Current Book of the Bible

Current Chapter and verse

Synopsis, content or study guide note

Slide Down Open/Flick grip Customized Cover: GLO (brand) Bible cover shown

Image – Book or Bible Cover

Color BOOK Card Cover Content: GLO (brand) Bible cover shown

o Book Name o Content Provider (GLO shown) o Excerpt from last accessed bookmark or scripture o User Name

Card Level TAB bar


Bookmarks

Marking Tools

Search

Settings

1

3

4

2

3

4

2

1

5

5






2048 x 1536 (264 PPI)

2.2.A.1.1 – Marking Tools: Highlighter UX: Marking Tools

BOOK and Presentation cards have marking tools which allow the user to make inline comments, mark passages, and create personal footnotes – customizing their Bible study experience.

Tapping the Marking Tools icon opens the Marking tool navigations toolbar.


Notes



Marking tool Navigation bar:

Back to BIBLE reading Nav Bar

Highlighter (in selected Color) o Double tap to show color and size controls

Write/Insert Inline Comment

Add Glyph/Sticker Marking elements drop down

Select highlight color

Select highlight size Bible page

Page gutter overlay

Corner page turn Highlighted verse

o Tap and hold highlight to access X to delete highlight Card Level TAB bar


Bookmarks

Marking Tools

Search

Settings

5

2

6

1

1

4

5

2

6

3

4

3

Commit to Christ!






2048 x 1536 (264 PPI)

2.2.A.1.1 – Marking Tools: Comment UX: Marking Tools


Tapping the Comment icon opens Comment drop down menu.


Notes







Add Glyph/Sticker Comment elements drop down

Select Font Color (Blue selected)

Control Font Size

Select Font Bible page

Page gutter overlay In line Comment. When active

o Tap and hold inline text to insert comment o Tap and hold icon to access X to delete comment o Tap in comment text field to reveal the keyboard and edit text.

Keyboard

2

1

1

4

5

2

3

4

3

Can’t serve two masters… 5

Commit to Christ!

A A San Serif Hand

6

6






2048 x 1536 (264 PPI)

2.2.A.1.1 – Marking Tools: Glyphs UX: Marking Tools


Tapping the Glyph icon opens the Marking tool navigations toolbar.


Notes







Add Glyph/Sticker o Drag and Drop to place

Glyph/Sticker elements drop down

Select Glyph Color (Blue Selected)

Select Glyph Bible page

Page gutter overlay

Corner page turn Glyph

o Tap and hold GLYPH to delete Tap X to delete highlight

Card Level TAB bar


Bookmarks

Marking Tools

Search

Settings

5

2

6

1

4

5

2

6

3

4

3

Commit to Christ!

Can’t serve two masters…






2048 x 1536 (264 PPI)

2.2.A.2 - BOOK Card: Non-Bible Book UX: This is a layout for the BOOK card navigation menu

BOOK cards have a “dropdown” Navigation menu below the Persistent Status Bar.

Navigation menu: slide/flick to view and hide

Basic Book card type is shown

Notes



CARD Navigation bar for the book “Not a Fan” by Kyle Idleman shown.

Access Book Table Of Contents

Current Chapter

Chapter synopsis, content or study guide note

Slide Down Open/Flick grip Cover

Publisher’s Cover content

Excerpt from last accessed bookmark Card Level TAB bar


My BIBLE

Bookmarks

Marking Tools

Search

Settings

1

1

3

3

2

2

4

“Are you a follower of Jesus?

I would say the chances are pretty good that you

just skipped over that question. You may have

read it, but I doubt it carried much weight or had

any real impact…”

4






2048 x 1536 (264 PPI)

GROUP MEMBER NAME – posted Message Topic

synopsis goes here – tap message to open thread… /

Time Stamp

GROUP MEMBER NAME – amen’d Message Topic


Time Stamp

2.2.B - GLO Card Archetype: GROUP UX: This is the layout for the GROUP card archetype

Group Activity messages fill the full screen below the Persistent Status Bar

Messages have “Quick Action” icons for per message actions.

Notes



GROUP CARD Navigation bar:

GROUP Settings o Group Name/ID o Group guidelines/rules o Moderator(s) Information + Contact o Social Media connections

Events

GROUP Forum Filter Settings o Tagged, Categorized Thread settings

Polls

Study guides

Presentations (With NEW CTA) Group Card Main Content

o Forum/ Chat messages o Group Member Image/Avatar o Time Stamp o QUICK Actions – per message

Filter Message Settings – Organize into threads Reply/Comment Delete

CARD BG image

Customized by group moderator/leader Card Level TAB bar


BIBLE – go to MY BIBLE

New GROUP Message

Search GROUP Messages

User GROUP Settings

1

3

4

2

5

3

4

1

GROUP MEMBER NAME – posted Message Topic


Time Stamp



Time Stamp

5

GROUP Name/ID – Navigation Bar



Time Stamp

2






2048 x 1536 (264 PPI)

GROUP

(CARD ARCHETYPE)

2.2.B.1 - GLO Card Archetype: GROUP – Navigation Bar Interaction UX: This is a typical layout for the GROUP Navigation Bar Icon Interaction

Events interaction is shown for reference. These are second level interactions and will be detailed separately.

Selected Icons scale up and their contextual activity elements appear in the expanded menu below the Navigation Bar

Contextual Tools appear in the Card Tab Bar at the bottom of the screen

ICONS scale in place when they are activated. Drop down window shows ICON content screen

Notes




Back to GROUP feed

Event Icon Selected

View by List (shown)

View by Calendar

Submit Calendar Event

Filter Events Group Events List

o Add to Personal Calendar o Access moderator materials

embedded media for this event presentation for this event Study Guide for the event Internet Site

o Comment on Event in Group Feed o Event is already in Personal Calendar: Add icon is inactive o Highlighted (blue) Event is the current chosen event

Card Level TAB bar



Comment and post EVENT in My Feed

Search EVENTS

User EVENT Settings

Nav Bar Icon Selected Menu

1

2

3

Upcoming Events

January 27, 2014 Moderator Meeting (Event Details)

Feb. 14, 2014 Group Potluck – Study Group The Living Church (Event Details)

March 1, 2014 Dr. Mike Owens – Addiction, Recovery and the Savior Jesus Christ (Event Details)

June 6, 2014 D- Day Commemoration Riverside National Cemetery -

4

April 20, 2014 Easter Sunday Services (Event Details)

+

+

+

+

+

List Calendar

1

2

4

3






2048 x 1536 (264 PPI)

2.2.C - GLO Card Archetype: PRESENTATION UX: This is a typical layout for a PRESENTATION CARD

Presentations are designed and crafted by specific users, such as Group Moderators.

Presentation creation tools enable presenters to use embedded media, slide shows, imagery and text to create gospel centered messages for instruction and learning.

A unique feature is the ability of the viewer to provide feedback notes directly to the presenter using the mark up tools. The intent is to encourage feed commentary and Presentation curation.

Notes




Presentation Icon. Tap to show presentation elements o Embedded Media o Images o Credits o Comments accepted/declined*

Presentation Title

Presentation Abstract PRESENTATION

o Cover o Content o Controls

Card Level TAB bar



Bookmark(s) in this presentation

Marking tools o Includes a new tool to share comments with the author

Search this PRESENTATION

PRESENTATION Settings o Audio o Autoplay

1

2

4

3






2048 x 1536 (264 PPI)

o Show Comments*

3

1

2

4






2048 x 1536 (264 PPI)

2.2.D - GLO Card Archetype: MY FEED (Top Level) UX: This is a typical layout for a MY FEED CARD

MY FEED is a user customized card showing the message threads, presentations and groups they have chosen to show in their feed.

Integrating Morgan’s interaction ideas: MY FEED is essentially THE Social Engine – opening the card from the landing screen puts the user at page 2 of Morgan’s Doc: “You can now stumble upon conversations.” – trending conversations shown.

Notes




ME o Filters o What appears on Nav Bar o Show Feed as Image Grid or List (shown)

MY BIBLE o Tap to read MY BIBLE

MY EVENTS o Tap to access subscribed events

MY FEED o Tap to See Trending

Trending Conversations o Number of followers o Messages in this thread o Quick Action icons

Card Level TAB bar


FILTER to pass on message – remove from feed

AMEN = Like

HEART – Joins the selected conversation

Post NEW Message

Search MY FEED

1

2

4

3

1

2

Amen

3

4

NAME – amen’d Message Topic synopsis goes here –

tap message to open thread… / Time Stamp

A 5 2



A 1 5

NAME – amen’d Presentation Topic synopsis goes here

– tap message to open thread… / Time Stamp

A 3 10



A 2 11

NAME – amen’d Group Topic synopsis goes here – tap

message to open thread… / Time Stamp

A 5 6






2048 x 1536 (264 PPI)

2.2.D.1 - GLO Card Archetype: MY FEED (Post Level) UX: When the user clicks HEART (respond) they join the conversation.

Integrating Morgan’s interaction ideas: Joining a conversation in the message feed puts the user at page 3 of Morgan’s Doc: “You have joined the conversation on the shared photo.”

Notes




ME o Filters o What appears on Nav Bar o Show Feed as Grid or List (shown)

MY BIBLE o Tap to read MY BIBLE

MY EVENTS o Tap to access subscribed events

MY FEED o Tap to See Trending

Current “Joined” Thread

Card Level TAB bar


FILTER to pass on message – remove from feed

AMEN = Like

HEART – Joins the selected conversation

Post NEW Message

Search MY FEED

1

2

4

3

1

2

AMEN

3

4

– Message content goes here

NAME

NAME

NAME

– Message content goes here






2048 x 1536 (264 PPI)






2048 x 1536 (264 PPI)






2048 x 1536 (264 PPI)

Development Wireframes: Table of ContentsGLO UX Functional Wireframes v5.0 Designer 5.0Duane Loose Version Date 1November 19, 2014 Page of 27 GameCloud Studios - Company Confidential

Documents