View
92
Download
0
Category
Preview:
Citation preview
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
• 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
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
Recommended