PLURALSIGHT PROTOTYPE PRESENTATIONSEPTEMBER 17, 2014

PLURALSIGHT +

Process

• Held whiteboard sessions with tech, UX & Design.

• Using our own creative instincts to think beyond just the documentation & research.

• Use Lean UX methodology, quickly concept, generate, and iterate work.

• Validate decisions as a group.

• Designing interaction for content consumption and discovery.

• Avoid rigid hierarchies of content by making content visible in as few taps as possible.

• Output sitemaps, wireframes

• Culminates in the creation of a clickable prototype

SUMMARYPROCESS & DESIGN DECISIONS

SUMMARY

Design Decisions

• App should align with the Beta experience.

• Video navigation should not be steeped inside layers of UI.

• Video content consumption is the primary purpose of the app.

• Modules are baked into the course pages since the app is not dependent on secondary module content like assessments.

• Global navigation occurs on vertical axes within the app drawer, while local navigation occurs on the horizontal axes in the tab UI.

• Offline & online modes should be as sealmless as possible.

• Prototype is designed to be agnostic. Moreover the experience is to be Pluralsight’s branded in-app experience across platforms.

2

SITE MAPS

Main Navigation Drawer

Login

Account Profile/Sign-In Top Courses Settings

plu0032 Sitemap - Unregistered

Top Course Content

Data/Wifi Toggle

Search

Recent Search

Browse

TagsPopularNew

TagsNewPopularDashboard

New Courses• Featured• Popular• New• Tags

Popular Courses

Browse Courses Tabs

Tag Names

SITE MAPSUNREGISTERED USER EXPERIENCE

3

SITE MAPS

Main Navigation Drawer

Account Page

Bookmarks under My Courses

Login

My Downloads

Browse

TagsNewPopular

TagsNewPopularDashboard

My Courses

DownloadsBookmarksHistory

DownloadsBookmarksHistoryDashboard

• Continue Watching• Current Courses• History• Bookmarks• Downloads

Account Profile/Sign-In

Search

Settings

plu0032 Sitemap - Logged In

Complete Course History

Recent Search

New Courses• Featured• Popular• New• Tags

Popular Courses

Browse Courses Tabs My Courses Tabs

Tag Names

SITE MAPSLOGGED-IN USER EXPERIENCE

4

The Browse category is the course discovery pathway for users.

The Dashboard serves the corresponding use as a jump-off point for users to discover new courses and tags.

Dashboard content includes:

• Featured course content

• The top three popular courses.

• The top three new courses.

• Jumpoffs to the top tags.

BROWSEDASHBOARD - UNREGISTERED

BROWSE

5

Sign In modal that pops in over any screen in the unregistred experience. Contains access to the in-app sign-up UI. Social sign-in recommended.

SIGN UP/SIGN INSIGN IN MODAL

SIGN UP/SIGN IN

6

The logged in state for the dashboard is more or less identical to the unregistered version.

This leaves open many types of opportunities to investigate, including surfacing featured content specifically for a logged-in user, or bookmarking tags.

BROWSEDASHBOARD

BROWSE

7

BROWSEPOPULAR/NEW

BROWSE

Browse > Popular houses the top courses by user views and bookmarking. Number of courses TBD.

Browse > New is an identical UI, but with the chronologically newest course content displayed. Number of courses TBD.

8

BROWSETAGS

BROWSE

Browse > Tags duplicates the tag browsing experience of the Pluralsight Beta web experiences, allowing users to drill-down by topic in order to focus on discovery paths.

9

BROWSETAGS > TAG DETAIL

BROWSE

Browse > Tags > Tag Detail displays all courses under the selected Tag.

10

COURSESTOOLTIP ACTIONS

COURSES

Tooltip actions are initiated by swiping left to right on all video content-level screens.

11

VIDEO PLAYERPLAYER CHROME CONTROLS

VIDEO PLAYER

The video popover is a solution that removes layers of linear navigation to video content, while at the same time preserving the context for viewing a video. Videos are accessible from just one to two taps from the My Courses sections, and 2-3 taps from the Browse section.

Essential player controls live alongside the major MVP requests:

• Course Module/Video Title info

• Chromecast & Airplay controls

• Speed control

• Total length and time lapse.

Additionally a module progress counter and linear navigation controls allow users to track and toggle their video content, as well as skip ahead and backward.

12

VIDEO PLAYERLANDSCAPE MODE

VIDEO PLAYER

Landscape mode offers the same player chrome and controls, but with two layers of hide/unhide gestures.

Landscape mode is automatically full-screen when the phone is oriented horizontally. Chrome is surfaced by tapping the screen. Play/pause happens by tapping the center of the screen.

13

VIDEO PLAYERMINI-PLAYER

VIDEO PLAYER

The mini-player is an audio-only mode for consuming content. Play controls are limited to play/pause toggling, while tapping anywhere else will resurface the video-player.

14

My Courses is where course progress is surfaced. It contains pathways to current courses, complete course history, downloaded content and synced content like bookmarks.

The Dashboard screen is the hub of My Courses

• It is a jumping-off point for synced content.

• The user’s most recent unfinished video featured at top of screen.

• Contains most recent items for History, Bookmarks and Downloads.

MY COURSES DASHBOARD

MY COURSES

15

MY COURSES HISTORY

MY COURSES

My Courses > History is the screen containing current and completed course history, in chronological order (current to oldest].

16

MY COURSES BOOKMARKS

MY COURSES

My Courses > Bookmarks syncs with all user bookmarks from the Pluralsight website. Bookmarked items are displayed under a course header.

17

MY COURSES DOWNLOADS

MY COURSES

My Courses > Downloads contains all content available for offline viewing. Users may also bookmark course content from here for access after removing downloaded content.

18

COURSE DETAILSTANDARD COURSE DETAIL

COURSE DETAIL

The course view merges the whole course & module view into a single vertical matrix.

19

COURSESCOURSE DETAIL, MODULE

COURSES

Course detail, module view and videos in course have been merged to an inline view to facilitate immediate tap-through to the video content of each module.

20

COURSE DETAILDOWNLOADS/BOOKMARKS

COURSE DETAIL

Added to the vertical course layout are tabs surfacing downloads & bookmarked content related to the course.

21

SEARCHDEFAULT VIEW

SEARCH

The default search view uses standard popover UI, and surfaces recent searches.

22

SEARCHRESULTS VIEW

SEARCH

23

• Intuitive approach that aligns with MVP request and competitors’ comparable products.

• Well-understood nav strategy.

• Primary navigation between key screens.

NAVIGATION NAV DRAWER

NAVIGATION

1. Account & Profile - Basic profile-level, and account and payment

2. My Courses - Tapping the parent-level takes user to the section’s dashboard. Child-level sections are History, Bookmarks and Downloads.

3. Browse - Course-discovery section of app. Tapping the parent-level takes user to the section’s dashboard. Child-level sections are Popular (courses), New (courses) and Tags (categories).

4. Settings - Contains app-level settings.

24

SETTINGSSETTINGS VIEW

SETTINGS

The settings screen contains app-level adjustments for the app.

25

OFFLINE MODEEXPLAINER

OFFLINE MODE

As mentioned in the summary, Offline Mode is meant to be as seamless an experience as possible. In practice this means duplicating network-connected activity as much as possible, such as allowing adding courses to the Download queue, which allows full browsing experience etc.

26

OFFLINE MODEUNREGISTRED

OFFLINE MODE

The only dead-end that we were not able to reconcile is when a user is not registred or logged-in, and is opening the app for the first time out of network reach. In this case, the app asks the user to get onto a network before proceeding.

27

NEXT STEPSDISCUSSION POINTS

SUMMARY

The following is a list of discussion points for the app creation.

• Registration: Our ideal registration scenario allows registration in-app. We recommend it.

• Free time: How much free viewing time is allowed––if any? We recommend 1-8 hours minumum.

28

THANK YOU!

DAN WALSH MANAGING DIRECTOR DAN@ROUNDHOUSEAGENCY.COM | 503.482.0832

PLURALSIGHT +