flight parent dashboard development wireframes: table of ......ux: create “affordance” in all...

FLIGHT Parent Dashboard Development Wireframes: Table of Contents Section Notes/Feedback to be Addressed

1. Dashboard Resource/References 1.1. Parent profile 1.2. Dashboard Content

2. Responsive Design 2.1. Layout

2.1.A. Existing Screen UX + Layout 2.1.B. Proposed Screen UX + Layout

3. UX/UI Flow 3.1. Welcome

3.1.A. Welcome Screen A 3.1.B. Welcome Screen B

3.2. Main UI 3.2.A. Session 3.2.B. Session: seconds or minutes view 3.2.C. Session: Screen Navigation

3.3. Progress 3.4. Tips + Info

3.4.A. Tips: push down Screen 3.4.B. Tips: Side Elements 3.4.C. Main Screen 3.4.D. Main Screen Hover Element

4. References 4.1. Responsive Web Design 4.2. Beginners-guide-to-responsive-web-design

5. Wireframe Screens

To be designed: • 3.3 Progress is not shown in this version. • User settings

Addendum: i. Design Resources

a. Apple iOS 7 b. Android c. SCREENFLY – View Sites at Responsive sizes

ii. Responsive Interfaces/Templates: a. SHAPE5

• User experience and interface design guidelines for iOS and Android devices • Examples of Responsive interfaces • Infographics resources

FLIGHT Parent Dashboard UX Functional Wireframes v1.0

Designer Duane Loose Version 1.0 Date September 12, 2015 of 28

GameCloud Studios - Company Confidential

http://alistapart.com/article/responsive-web-design

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

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

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

http://quirktools.com/screenfly/

http://www.shape5.com/

b. Rich Media Gallery

iii. Infographics a. Infogr.am b. Visual.ly c. Piktochart d. Venngage

Versions

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

V1 9/12/2015 Reviewed:




http://www.richmediagallery.com/

http://infogr.am/

http://visual.ly/

http://piktochart.com/

http://venngage.com/

1.1 – User Profile UX: Parent user profile – understanding the primary user of this tool.

• Provided by Matt Brent, PLAYTO • UX Notes added

Primary User:

• Primarily mothers making purchasing decisions, directly involved with managing child's education and treatment (gatekeeper)

• College educated / graduate.

• Likely balancing a full time job with parenthood. UX: Simple, clean, enjoyable, anticipation, easy to use, checkbox completion, sense of accomplishment, speed of access and

interface. Positive, encouraging – not sterile and neutral.

• Lacking time / attention (busy lives); may be ADD / ADHD themselves. UX: Use ADHD Learning strategies/principals in the content layout. E.g.: tactile, visual and auditory

response to interface action.

• Willing and able to educate themselves about disorders, alternative treatments (lower-income / education level will tend to accept insurance-provided options). UX: Provide a

“gateway” to access expanded information – perhaps a BLOG.

• Current with headlines and press; don’t read the white papers or go deeper into the evidence or dissenting opinions, but don’t want to be condescended to or patronized

• Visual learners who prefer infographics to blocks of text. UX: Interpret data into easy to understand and remember translations.

• Hopeful, looking for solutions (Dashboard needs to always reflect and reinforce that hope and a feeling of self-empowerment). UX: Consistent and immediate access to the most

important information to make informed choices for the child.

• Looking for a product that feels trustworthy without being overly clinical, medical or scientific. UX: Create information relevance and context – to understand information “at-a-

glance”.

• Regular computer, smart device and internet users, but not tech savvy and without a lot of time for troubleshooting. UX: Create “affordance” in all functional elements. Works

like a user “thinks” it should work.




1.2 – Dashboard Content UX: Scheduled Information and Tips:

• Session Milestones and Daily Tips • UX Notes to be added

Notes:

• Last session snapshot - graph of focus over the last session, beta / theta measures • Session progress / history • User performance metrics (Profile report) • Scheduled tips and information • Form and targeted email with tips, updates based on child’s progress

Information Hierarchy –Parents want to know

• Who: o The name of the child whose information they are accessing. o Easy to select their children and view their information

• What: o The games or activities they completed o Their current level of performance and a summary of how they are doing:

How far are they are towards completing all the sessions Their latest session performance compared to their own average range or best performance (over time)

• When: o When the child last accessed the game and how long the played

• How: o An “encouraging” ranking of how the child performed and




1 View the dash in alternate screen formats on Screenfly.

2.0 – Responsive Design

UX: The Parent Dashboard needs to exhibit the same functional paradigm and information hierarchy in three forms: PC Online, Mobile and Tablet1. Screen sizes are shown in the image below for iPhone 5, iPad Mini, PC 22” + 24” monitor screens. Responsive design allows the dashboard to “flex” or “morph” to accommodate the different screen sizes.

2.1 – UX + Screen Layout

2.1.A – Existing UX + Screen Layout This image reveals UX and Layout issues with the current

Dashboard. For example: • Left side placement of “flags for Overall, Details and

Accounts create an unusable area of 25% of the screen real estate in the iPhone version

• The dropdown menu in the upper right hand corner is visible only in the larger PC screens: “ally”

• This will compromise the desired placement of elements in consistent locations on the screen

• Heavy use of text • Minimal use of iconography

1

3

2

1

3

2




2.1.B – Proposed UX + Screen Layout Design principles for responsive UX + Screen Layout in the

Parent Dashboard include: • Consistent placement of elements • Create “at-a-glance” content

o Simple, bold icons o Use of text sparingly o Interpret Data for action

• “Personalize” the experience o Use the parent and child’s names o Connect the child’s in-game achievement to

the parent • Functional color to indicate status • Establish and maintain an information hierarchy • Provide multi-use choice • Provide encouragement at all performance levels • UI should be “fun” to use:

o Entertaining o Surprises + Prizes

• PC Screen: 1920 x 1200

• iPhone 5 Screens: 320 x 568

1

2

2

1




3.0 – UX/UI Flow

3.1 – WELCOME

UX: This welcome screen provides a top-level summary of the latest activity. Immediate “at-a-glance” data, such as this, makes it easy to “drop in’ on the website for a quick check. This encourages users to return often. This summary can also be used as a daily “push” email keeping Mom and Dad up to date on their child’s progress.

3.1.A – WELCOME Screen A

• “Push Down” Window – temporarily takes over screen when user logs in

• Main Tab Bar

• Greeting area - date and customized messages appear here

• Child Specific summary title (changes when a new child is selected)

• Session performance and interpretation

• Performance based/relevant customized “tip-of-the-day”

• User chooses what they want to do with this summary. . Click icon to choose:

o Share o Email o Print

Click to view next (child) summary (when multiple children are

enrolled)

• Main screen is pushed down and darkened during welcome

• Click X to close this window

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10




3.1.B – WELCOME Screen B UX: Showing the summary for another child or user

• Click to view Next (child) summary (when multiple children are enrolled)

• Click to view Previous(child) summary (when

multiple children are enrolled)

• Click the Main TAB bar while WELCOME Screen is active to close the summary and view the SESSION screen. The WELCOME screen is accessed in the TIPS + INFO tab.

2 1

1

2

2




3.2.A – SESSION Screen

• SESSION progress main screen

• Main Tab Bar

• Session date. Click the calendar to choose previous session

reports

• Session number, total session progress and information message

• Color coded session icon indicates how the child performed in

the three session activities as well as total time spent in the session

• Three activity performance metrics: time in each activity and “encouraging” interpreted results

• User chooses what they want to do with this summary. Click icon to choose:

o Share o Email o Print o Download

Click to view next or previous available summary. Summary slides in Left/Right.

Data chart shows session performance. Identifies peak for the session and provides relevant comparison to best performance over all sessions.

Choose the child’s name from a drop down list. Child’s current rank in the game is shown. This provides information the parent can use to discuss the child’s progress. “Oh, I see you made Captain!!”

Tip icon appears when there is a relevant tip available for this sessions results

3.2 – SESSION

UX: The SESSION screens show all the information for the current/latest session completed by the child.

1

2

3

4

5

6

7

8

9

9

1

2

3

4

5

6

7

8

9

10

10

11

11

8




3.2.A – Session: seconds or minutes view

• Session progress chart is scrollable in its own

window. Parent can view it in seconds or minutes “scale”

• Seconds scale

• Minutes scale

1

1

2

2




3.2.C – Screen Navigation

• Tab Navigation - Click on tabs to go to next Tab

• Arrow Navigation – Hover over arrows to reveal next tab and

swipe to navigate. • Establishes navigation for touch screens

1

2

1

2

2

2 2 2




3.3 – PROGRESS

UX: An interactive summary of the child’s progress over all sessions. Detailed tracking of player performance with formative and summative assessment of task and objective completion of tasks. Screen layouts are TBD in this version of the Wireframes.

3.3.A – PROGRESS

• CONTENT In Progress

Screens TBD




3.4 – TIPS + INFO

UX: The screens in the TIPS + INFO provide the user with concise, brief, relevant and helpful information. “Slide-in” prompts appear in other main screens when the need is indicated by the performance data. An alternative to the Welcome Screen provides a “push-down” screen for mid-session or start-of-session promotion of this information

3.4.A – SESSION Screen with TIPS + INFO Prompt

• TIPS + INFO Alert Overlay – hover to reveal Topic

• TIPS + INFO Topic reveal – Click/Tap to reveal

Push-Down Screen

• Push-Down Screen – does not change the currently selected tab

1

2

3

3

2

1




3.4.B –TIPS + INFO “Push-Down” screen

Push Down Screen overlays currently selected TAB screen

Current TAB remains selected

TIP Prompt remains on screen

Tap arrows to slide to next TIP

User choice of what to do with this TIP

Click “X” to close push-down window and return to current TAB

1

2

3

4

1

5

6

1

2

3

4 4

5

6




3.4.C –TIPS + INFO Main Screen

TIPS + INFO Tab

TIP Section of this screen

Tap arrows to slide to next TIP

Information elements presented in Infographic form. Scroll down for view more information. Hover for pop-up detail

User choice of what to do with this TIP or INFO

1

2

3

4

5

1

3

2

4

5

3

4




5.0 – Wireframe Screens




ADD PAGES




flight parent dashboard development wireframes: table of ......ux: create “affordance” in all...

Documents