vSearch Cloud Mobile
Overview
vSearch Cloud was built from the ground up to be have a mobile-optimized version for smartphones. This was exciting for me personally since I feel Mobile development has had a profound effect on how web-applications are designed in general, forcing teams to focus on simplicity — abandoning any "fluff" in an application and getting directly to what their users genuinely need on a regular basis.
The Process
The design of this UI built on previous work that was done by the Engineering team on the legacy platform which used the well-established "Listview" UI convention to navigate trees of content. This initial work was very rudimentary and, frankly, unattractive so my main goal once it was brought back into the PM process was to:
- Refine Design
- Refine from "rushed" implementation to add a level of refinement to made it look more like a "real" application.
- Improve Usability
- Along the way, many usability improvements were made by making commonfunctionality easier to see and access.
- Unify Design Language
- Bring in line with the current design language of vSearch Cloud, including branding, and the layout of common objects in the system.
The Solution
The design we crafted took two of the most important visual components in vSearch Cloud and translated them into a mobile form that in many ways was superior to the desktop form.
Browse by Category
The first component was the Browse by Category tree, which necessitated a "drilldown" approach to provide Mobile users with an easy way to navigate the tree, see all content within a particular branch or drill further into the tree.
- Listview Methodology
- Employs a common Mobile UI navigation methodology where clicking on main menu elements drills further into data tree, with a "Back" button navigating backwards in tree.
- Browse All Sessions
- At each level of navigation, the user can click "Browse All Sessions" to show all Session at that level or below, instead of having to drill all the way into a sub-category.
- Content Listing
- Once a user reaches a level with content within it, they're shown a listing familiar to anyone used to the desktop product or other consumer video applications such as YouTube.
Session Details
The second component brought over to mobile was the "Player Page", which due to restrictions of common mobile platforms could not be as fully featured as the desktop version. Instead, this page became the "Session Details" page, being based on the look and feel of Session Listings in the desktop version, but optimized for Mobile. Instead of stretching horizontally across the page, the listing takes advantage of the vertical real estate.
- Session Listing-based Look
- The main component brought over from the desktop version was the "Session Listing" styling and its prominent Preview Icon which retained the "Bookmark" and "Play" icons. In this case "Play" would simply play the media in the device's native media player.
- "Stacked" Orientation
- Working with the ergonomically more "natural" means for paging through an app on smart phones, the original "Session Listing" was "stacked" vertically instead of being stretched out horizontally.
- Downloads, Topics and Transcript Tabs
- Each of these tabs from the desktop product now have dedicated "pages" that use nearly the full screen's real estate for easy scrolling/reading — especially important for previewing transcripts.
vSearch Cloud
Overview
vSearch Cloud's development was initially kicked off as a "skunk works" project to build a new event centric product, with engineering managing the design as well as development. During this period I focused on managing the legacy platform, but once the development of the new platform started to lose focus I was brought back in to get things back on track with a clear product vision, at the request of the Engineering team.
The Process
My core task was to act as the Voice of the User and provide Engineering with the product guidance they were desperately lacking in my absence. At this point in vSearch Cloud's evolution we had to focus on the requirements needed to migrate customers to the new platform.
Instead of simply bringing all features from the old platform into the new, this process identified only the key components needed to successfully migrate existing customers over while developing new or improved features to attract new customers.
- Establish Feature Comparison Matrix
- Document features of legacy platform in a matrix, allowing us to map current customers' usage of each feature to help in prioritization.
- Prioritize Features
- Working with both the data from the Comparison Matrix and the needs articulated by Sales & Marketing, prioritize features for Product Requirements gathering process and placement on the Product Roadmap.
- Product Requirements Definition
- In order of prioritization, work through each feature to develop and document the User Experience and related Product Requirements. In some cases this meant introducing features "as is", but where applicable this meant satisfying the use case with an improved solution.
The Solution
The resulting design partly resembled the legacy platform, but with greater emphasis on the video content and a "looser" feel overall using a clean, uncluttered design that allowed new portals to be customized with a minimum of coding required. larger preview icons for video clips, and a "Session Details", where the user could play content, explore it further, comment on the content or discover similar content.
- Featured Videos
- The most dramatic break from the legacy platform, was the inclusion of playable video on the front page through the "Featured Videos" panel. This allowed user to view only the video, or to launch the "Player Page" to view the content in the more fully-featured interface.
- Home Page Customization
- If customers didn't have content that fit well into the "Featured Videos" approach, they could opt to use a more traditional "3-Column" layout.
- Preview Icon Improvements
- While Preview Icons were present in the legacy platform, the new solution featured larger Preview Icons for each Session, allowing the design to build features around the icon - Bookmark, Play and for users with the Editor role, an Edit Icon for opening the Edit Dialog.
- Mixed Content in Listings
- One of the biggest improvements in the system was the introduction of numerous "Session Types" allowing customers to include not only Video content in the system, but virtually any content they could imagine. These disparate types could appear next to each other in any type of listing - including Search Results.
